JavaScriptにおけるカスタムイベントの使い方分析

本論文の実例はJavaScriptにおけるカスタムイベントの使用法を述べている.皆さんの参考にしてください.具体的な分析は以下の通りです.
webフロントエンドの開発では、多くの人がjsのカスタムイベントを使用しないかもしれませんが、比較的大きなプロジェクト、特に複数の人が共同開発する場合は、カスタムイベントが重要になります.じゃ、jsの中のカスタムイベントは何ですか?まず一つの例を見てみます.フロントエンド開発者Aが一つの関数をカプセル化しました.

   function move(){ 
  
     alert(a);  //     N    
  
 } 
 

しばらくして、フロントエンドの開発者BはAの基礎の上でこの関数を豊かにします.すると、彼はこう書きます.

   function move(){ 
  
     alert(a);  //     N    
  
     alert(b);  //     N    
  
 } 
 

問題が発見されたかどうか、BはAの変数、関数などとのネーミングと衝突に注意しなければなりません.また時間が経ったら、フロントエンド開発員Cもこの関数を豊かにします.

   function move(){ 
  
     alert(a);  //     N    
  
     alert(b);  //     N    
  
     alert(c);  //     N    
  
 } 
 

この時は頭がおかしくなります.Cさんがコードを書いたら、きっと楽ではないと思います.この問題を解決する方法はカスタムイベントを通じて、同じイベントを追加できます.

   window.addEventListener('click',function(){ 
  
     alert(1); 
  
 } ,false); 
  
 window.addEventListener('click',function(){ 
  
     alert(2); 
  
 } ,false); 
 

ページをクリックすると、1と2がポップアップします.この方法で関数を定義できます.

   window.addEventListener('move',function(){ 
  
     alert(3); 
  
 } ,false); 
  
 window.addEventListener('move',function(){ 
  
     alert(4); 
  
 } ,false); 
 

このように、私達はmoveを実行します.をクリックすると、3と4が表示されます.ここのmoveはカスタムイベントです.実は関数です.
イベントハンドラにパラメータを送る方法を見てみます.

   //                 
  
 function createFunction(obj, strFunc) { 
  
     var args = [];       //  args                  
  
     if (!obj) obj = window; //        obj=window; 
  
     //               
  
     for (var i = 2; i < arguments.length; i++) args.push(arguments[i]); 
  
     //                  
  
     return function() { 
  
         obj[strFunc].apply(obj, args); //                
  
     } 
  
 } 
  
 function class1() { 
  
 } 
  
 class1.prototype = { 
  
     show: function() { 
  
         this.onShow(); 
  
     }, 
  
     onShow: function() { } 
  
 } 
  
 function objOnShow(userName) { 
  
     alert("hello," + userName); 
  
 } 
  
 function test() { 
  
     var obj = new class1(); 
  
     var userName = "test"; 
  
     obj.onShow = createFunction(null, "objOnShow", userName); 
  
     obj.show(); 
  
 } 
 

「イベントメカニズムは一つの関数の名前だけを伝えていますので、パラメータの情報がないので、パラメータを渡すことができません」というのは後の話です.この問題を解決するには、反対の考え方から考えてもいいです.パラメータをどうやって入れるかを考えずに、パラメータなしのイベントハンドラをどうやって構築するかを考えます.このプログラムはパラメータがあるイベントハンドラによって作成され、外層のパッケージです.つまり、createFunction関数です.apply関数をうまく利用して、パラメータを持つ関数を無パラメータ関数にカプセル化します.最後に、カスタムイベントのマルチバインディングをどのように実現するかを見てみます.

   //             
  
 //                 
  
 function createFunction(obj, strFunc) { 
  
     var args = [];       //  args                  
  
     if (!obj) obj = window; //        obj=window; 
  
     //               
  
     for (var i = 2; i < arguments.length; i++) args.push(arguments[i]); 
  
     //                  
  
     return function() { 
  
         obj[strFunc].apply(obj, args); //                
  
     } 
  
 } 
  
 function class1() { 
  
 } 
  
 class1.prototype = { 
  
     show: function() { 
  
         if (this.onShow) { 
  
             for (var i = 0; i < this.onShow.length; i++) { 
  
                 this.onShow[i](); 
  
             } 
  
         } 
  
     }, 
  
     attachOnShow: function(_eHandler) { 
  
         if (!this.onShow) { this.onShow = []; } 
  
         this.onShow.push(_eHandler); 
  
     } 
  
 } 
  
 function objOnShow(userName) { 
  
     alert("hello," + userName); 
  
 } 
  
 function objOnShow2(testName) { 
  
     alert("show:" + testName); 
  
 } 
  
 function test() { 
  
     var obj = new class1(); 
  
     var userName = "your name"; 
  
     obj.attachOnShow(createFunction(null, "objOnShow", userName)); 
  
     obj.attachOnShow(createFunction(null, "objOnShow2", "test message")); 
  
     obj.show(); 
  
 } 
 

私たちは、atachOnShow方法によって実現される基本的な考えは、配列に対するpush操作であることを見ていますが、実際には、イベントの実行が完了した後、イベント処理関数を削除し、次のように単独で実行してもいいです.

   //                 
  
 function createFunction(obj, strFunc) { 
  
     var args = [];       //  args                  
  
     if (!obj) obj = window; //        obj=window; 
  
     //               
  
     for (var i = 2; i < arguments.length; i++) args.push(arguments[i]); 
  
     //                  
  
     return function() { 
  
         obj[strFunc].apply(obj, args); //                
  
     } 
  
 } 
  
 function class1() { 
  
 } 
  
 class1.prototype = { 
  
     show: function() { 
  
         if (this.onShow) { 
  
             for (var i = 0; i < this.onShow.length; i++) { 
  
                 this.onShow[i](); 
  
             } 
  
         } 
  
     }, 
  
     attachOnShow: function(_eHandler) { //      
  
         if (!this.onShow) { this.onShow = []; } 
  
         this.onShow.push(_eHandler); 
  
     }, 
  
     detachOnShow: function(_eHandler) { //      
  
         if (!this.onShow) { this.onShow = []; } 
  
         this.onShow.pop(_eHandler); 
  
     } 
  
 } 
   
  
function objOnShow(userName) {
     alert("hello," + userName);
 }
 function objOnShow2(testName) {
     alert("show:" + testName);
 }
 function test() {
     var obj = new class1();
     var userName = "your name";
     obj.attachOnShow(createFunction(null, "objOnShow", userName));
     obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
     obj.show();
     obj.detachOnShow(createFunction(null, "objOnShow", userName));
     obj.show(); //     ，       
     obj.detachOnShow(createFunction(null, "objOnShow2", "test message"));
     obj.show(); //      ，      
 }
 
 

本論文で述べたように、皆さんのjavascriptプログラムの設計に役に立ちます.