JavaScript観察者のモード原理と使い方の実例について詳しく説明します。

6136 ワード

JavaScript 観察者モード

本論文の実例はJavaScript観察者のモード原理と使い方を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
観察者モード
観察者モードはまた公開購読モードと呼ばれ、複数の観察者にあるテーマオブジェクトを同時に傍受させるペアの関係を定義しています。このテーマオブジェクトの状態が変化すると、すべての観察者に通知し、自動的に自分を更新することができます。
*2つのキャラクターに分かれています。（1）観察者（2）観察者
*観察者モードの目的：プログラムの内在的な変化を観察し、変化があるときに知ることができ、対応する反応ができます。
今私達は需要を通してこのモデルを勉強します。購読者と新聞社の関係をシミュレーションします。
この過程で：実際の操作は（押しモード、取りモード）に分けられます。
（1）押し送り-->長連結技術
（2）モードを取る-->タイミングよく楽屋に行って取得する
コードを使って下記のように実現します。
（1）発表類


//   
function BusinessOne(name){
  this.name=name;
  //     
  this.subscribers=new Array();
}

（2）投稿者の投稿メッセージを拡張する方法（プッシュモード）


//           (   )
BusinessOne.prototype.delive=function (news) {
  var self=this;
  //           
  this.subscribers.forEach(function (fn) {
    //            
         fn(news,self);
  })
}

(3)共通購読の関数を拡張し、購読をキャンセルする関数
購読の関数:


Function.prototype.subscribe=function (publisher) {
  var that=this;
  //some      i                
  //          true  some  true
  var alreadyExists=publisher.subscribers.some(function (el) {
    if(el==that){
      //           
      return ;
    }
  });
  //          
  if(!alreadyExists){
    publisher.subscribers.push(that);
  }
  return this;
}

キャンセルの関数:


Function.prototype.unsubscribe =function (publisher) {
  var that = this;
  publisher.subscribers=publisher.subscribers.filter(function (el) {//                           
    if(el!==that){
      return el;
    }
  });
  return this;
}

(4)リリースの作成例


//        
var b1 = new BusinessOne("CCTV");
var b2 = new BusinessOne("       ");

（5）リリース部分
（5.1）外観モードの使用--各ブラウザに対するイベントバインディング互換性の問題


function addEventFacade(el,type,fn) {
  if(window.addEventListener){
    //firefox
    el.addEventListener(type,fn);
  }else if(window.attachEvent){
    //   IE
    el.attachEvent("on"+type,fn);
  }else {
    el["on"+type] = fn;
  }
}

（5.2）メインアプリケーション関数の作成


var inint=function () {
  //     
  var pageOne=function (news) {
    document.getElementById("info").value="    ： "+"["+arguments[1].name+"]     --->"+news
  };
  //  1
  pageOne.subscribe(b1).subscribe(b2);
  addEventFacade(document.getElementById("cctv"),"click",function () {
    b1.delive(document.getElementById("cctvText").value);
  })
  //  2
  addEventFacade(document.getElementById("gfb"),"click",function () {
    b2.delive(document.getElementById("gfbText").value);
  })
}

最後に、購読者インターフェース


<body onload="inint()">
<div id="div01"></div>
<script type="text/javascript" src="observer.js"></script>
<input type="button" value="CCTV  " id="cctv">
<input type="text" id="cctvText">
<br><br><br>
<input type="button" value="       " id="gfb">
<input type="text" id="gfbText">
<br><br><br>
<textarea id="info" cols="60" rows="20"></textarea>
<script src="Js/        /     /lib.js"></script>
<script src="Js/        /     /     .js"></script>
</body>

効果:
（1）cctvモジュールの

（2）gfbの効果は：

補足：上述したforEach方法とfilter方法コードは：


  Function.prototype.method = function(name, fn) {
   this.prototype[name] = fn;
   return this;
  };
  if (!Array.prototype.forEach) { 
   Array.method('forEach', function(fn, thisObj) {
    var scope = thisObj || window;
    for ( var i = 0;len < this.length; ++i ) {
      //            ,          this    
      fn.call(scope, this[i], i, this);
    }
   });
  }
  //Array   
  if (!Array.prototype.filter ) {
   Array.method('filter', function(fn, thisObj) {
    var scope = thisObj || window;
    var a = [];
    for ( var i = 0;i < this.length; ++i ) {
       //      ,    ,    
       if ( !fn.call(scope, this[i], i, this) ) {//                           
          continue;
       }
       a.push(this[i]);
    }
    //      
    return a;
   });
  }

まとめ:

1.簡単な放送通信をサポートし、すべての傍受者に自動的に通知する。
2.ページを読み込むと、観察対象は観察者と動的な関連がありやすく、柔軟性を増す。
3.観察対象と観察者との間の抽象的な結合関係は、個々の拡張と再利用が可能である。
関心のある友達はオンラインHTML/CSS/JavaScript先端コードを使ってデバッグ実行ツールを実行できます。http://tools.jb51.net/code/WebCodeRunは上記のコードの運行効果をテストします。
さらに、JavaScriptに関する内容については、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」、「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。

Linux環境下でXFSファイルシステムを使用する