複数のJavaScriptファイルから複数の関数を読み込む

Question

ページが読み込まれたときに読み込む複数の外部JavaScriptファイル内に複数の関数があります。私が "body onLoad"を使うと、ある関数は常に他の関数よりも優先されます。どうすれば各ファイルから各関数を読み込み、ページの読み込みをすぐに行うことができるのですか？

私は "document.getElementById（" clockModule "）。innerHTML ="を使用して特定のdivにデータを出力するたびに、両方の関数（現時点で2つしかない）を1つのjavascriptファイルに入れてファイルを結合しようとしました。 IDは、データが単一のIDに出力されており、互いに重複しています。

Answer 1

window.onload = function(){ ... }を実行するときには、新しい値をwindow.onloadに割り当てて、それ以前に割り当てられたものを置き換えます。つまり、1つの値しか存在できません。同様に、innerHTMLは要素の内容全体を置き換えます。

代わりにを使用してイベントハンドラをアタッチし、createElementとappendChildを使用してDOMノードを作成してそれらをアタッチすることを検討してください。

Answer 2

開発時には、複数の別々の.jsファイルを読み込んでも問題ありません。ただし、プロダクションに公開する準備が整ったら、パフォーマンス目的ですべての.jsファイルを1つのファイルにロールバックしたい（さらにはminifyでも可能です）。いずれにせよ、私はいつものようにDOMContentLoadedリスナーを使用します。

document.addEventListener('DOMContentLoaded', function() { 
    //do stuff in here. 
    if(window.location.pathname === '/about'){ 
    //do page specific stuff in here. 
    } 
}, false);