Webフロントエンド開発-プログラムへの統一入り口--window.onloadとDOMREAdy

JavaScriptはスクリプト言語で、ブラウザがどこまでダウンロードすれば実行されますか?このような特性はプログラミングに便利ですが、プログラムがあまりにもばらばらになりやすいです.そのために、私達は機能からプログラムを機能的に区分して、区分されたアプリケーション部分を組織して、彼らに統一された「入り口」を与えます.機能を追加する時に直接彼を見つけます.

<div>
    xxxxx
</div>
<script type='text/JavaScript'>
    xxxxx
</script>
<script type='text/JavaScript'>
function init(){
//  A
(function (){})()
//  B
(function (){})()
//  C
(function (){})()
}
</script>
<div>
    xxxxx
</div>

      
       次に、エントランス関数を呼び出して、ページの初期化を完了します.プログラムがあるDOMノードを制御すると、このノードがまだロードされていないため、プログラムがエラーとなります.

<script type='text/JavaScript'>
alert(document.getElementById('test').innerHTML);
</script>
<div id='test'>hello world</div>

     
      この問題を解決するために、シナリオを後ろに移すことができますが、その位置を無視して、対応するDOMノードの後にあるかどうかは無視してほしいです.私はwindowのonloadイベントを監督して、windowがonload事件を触発する時シナリオを呼び出します.

<script type='text/JavaScript'>
function init(){
    alert(document.getElementById('test').innerHTML);
}
window.onload=init;
</script>
<div id='test'>hello world</div>

 
       ホームページ制作の過程で、windowのonloadイベントはホームページのすべての要素をロードしてからトリガします.これはウェブページに大きな遅延をもたらします.これは利用者に受け入れられないものです.この問題を解決するために、多くのJsフレームワークはwindow.onloadイベントの代わりにDMredyイベントを提供しています.DMredyはページ内のすべてのDOMノードが完全に生成されているかどうかだけを判断しますので、window.onloadより速いです.Jsフレームワークを使用しない場合は、DOMREAdyイベントをモデルにすることもできますが、トリガ原理が異なり、ブラウザの原理が異なりますので、DOMREAdyイベントを回避して簡単に機能することができます.

<script type='text/JavaScript'>
function init(){
    alert(document.getElementById('test').innerHTML);
}
</script>
<div id='test'>hello world</div>
.........
<script type='text/JavaScript'>
init();
</script>
</boday>

 
       実際の仕事では、ウェブサイトの頭と末尾は通常単独のファイルを作成します.サーバー端末の言語でincludeからウェブページに行くと、一般的には、頭と尾のファイルは安定しています.全駅が統一されていて、よく変えられません.しかし、JSフレームワークはの前でinit関数を呼び出します.このときエラーが発生します.簡単な処理はinit関数を呼び出す前に、ページ内にinit関数が定義されているかどうかを判断し、定義して実行します.

<div class='foot'>
    ....
</div>
<script type='text/JavaScript'>
    if(init){
        init();
}
</script>