JavaScriptページの読み込みが完了してから所定の関数を実行するテクニック

3412 ワード

JavaScriptスクリプト言語の実行には、トリガが必要です.一般的な方法は、Webページで、いくつかの関数を直接作成したり、コードがロードされたときにブラウザで処理されたり、次のようなコードを使用して関数を実現する関連機能をトリガーしたりすることです.

上面代码的意思就是，当鼠标点击 id 为 link 的元素的时候，就触发了它的 onclick 事件，然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的，因为触发操作直接写进了 HTML 结构里面，内容和行为没有隔离开，对日后的二次开发或者修改带来不便。
需要注意的是，当事件处理与对应元素绑定起来的时候，只有在那个元素加载完之后才能进行操作。如果说把处理的脚本放在了 head 区域，浏览器会报错。因为下面的 HTML 元素还没有加载出来，head 中的处理脚本已经被处理了。

一个好的执行 JavaScript 代码的方法应该是行为内容分离的、在页面加载后处理的。所以，处理 JavaScript 代码我们要用到监听器和 window 对象的 load 事件。

监听器

监听器实际上的功能就是行为与内容分离的。以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数，而现在直接在 JavaScript 中对某个元素的使用监听器，监听这个元素的事件，如果这个元素被触发了某些事件，在监听器中又定义了这个事件对应的处理函数，那么就会处理这个函数。

W3C 的标准方法叫做 addEventListener ，被IE9，chrome，firefox，opera所支持，写法：


window.addEventListener(‘load',function,false);

初期IEにはattachEventメソッドの効果が似ています.


window.attachEvent(‘onload',function);

Listenerを使用する方法も簡単です.まず、ページ内の要素を取得し、その後、この要素に対してListenerを使用して、リスニングされたイベントと対応するイベント処理関数を定義します.


document.getElementById(‘link').addEventListener(‘click',fun,false);

リスナーのより詳細な使用説明については、文末補足資料を参照してください.window.onloadイベント
onloadイベントは、ページ全体が完全にロードされたときにのみトリガーされます.JavaScriptコードをonloadイベントに書き込むと、HTML要素のロードが完了した後、ブラウザがJavaScriptコードを処理することを保証できます.基本的な書き方:


window.onload = function(){
 //code
}

これにより、この関数のcodeはロードが完了した後に処理されます.しかし,この方法には欠陥があり,この関数にしか使用できない.ページに複数のwindowが表示されません.onloadイベントは、複数のonloadイベントが発生すると、後の内容が前を上書きします.では、windowでこのようにすることができます.onloadイベントでは、ロードする必要があるすべての関数名を書き、外で関数を定義します.


window.onload = function(){
  func1();
  func2();
 }
function func1(){…}
function func2(){…}

これは可能ですが、ロードするすべての関数名を書き込む必要があるので、修正するのは面倒です.もちろん方法はあるに違いないが、jQueryは特に強力なマルチスクリプトロード方法を提供しているので、オリジナルのJavaScriptにも方法があるに違いない.
window.onloadは複数の関数を同時に処理する
処理関数を作成し、コードを見てみましょう.


  function addLoadListener(fn){
    if (typeof window.addEventListener != ‘undefined'){
      window.addEventListener(‘load',fn,false);
    }else if(typeof document.addEventListener != ‘undefined'){
      document.addEventListener(‘load',fn,false);
    }else if (typeof window.attachEvent != ‘undefined'){
      window.attachEvent(‘onload',fn);
    }else{
      var oldfn = window.onload;
      if(typeof window.onload != ‘function'){
        window.onload = fn;
      }else{
        window.onload = function(){
          oldfn();
          fn();
        };
      }
    }
  }

簡単に解析すると、このカスタムaddLoadListener関数は、パラメータとして関数名を渡します.まず、ブラウザが関連するリスナーをサポートしているかどうかを判断し、リスナーがサポートされている場合は、リスナーを使用してwindowオブジェクトのonloadイベントをリスニングし、この関数を処理します.このコードはif文を使用して、すべてのブラウザのリスニングイベントを判断し、ブラウザ間で互換性があります.このコードをJavaScriptコードセグメントの一番上に置き、次に関連関数を定義し、次の文を使用してJavaScript関数をロードしました.


addLoadListener(func);
function func() {…}

このようにJavaScript関数はページのロードが完了した後に処理する必要があり、addLoadListener関数を直接使用すればよく、複数使用できます.通常、すべてのJavaScriptは、予期せぬ事態を回避するためにonloadイベントロードを使用することが望ましい.

Ruby社内勉強会第1回

「Laravel/Vue.js勉強会#8 オールスターズ」に参加した際のメモ