JavaScript設計モード---単一例モード詳細【四つの基本形式】

本論文の実例はJavaScript設計モード---単一の例モードを述べています。
単例モードは単量体モードとも呼ばれる。
1,単体モードは名前空間を作成するために用いられ、一連の関連する属性と方法を論理ユニットに組織し、大域変数を低減します。
論理ユニットのコードは単一の変数でアクセスします。
2,3つの特徴：
①このクラスは一例しかない。
②クラスは自分でこの例を作成します。すなわち、クラスの内部に自分のインスタンスオブジェクトを作成します。
③この例示的なインターフェースをシステム全体に公開する
3,単体モードは四つの基本形式があります。
一番簡単な単量体は一回だけ実用化されます。   私は簡単にJsonの対象として覚えています。
（1）基本構造

 var userInfo={//             json  
    name:"    ",
    dept:"  PD",
    code:"  PD001",
    getName:function () {
      return "  "
    }
  };

(2)使用方法はJsonの使用方法と一致しています。点「.」を使ってアクセスします。

alert(userInfo.getName())

名前空間を分割し、関連する属性と方法を組み合わせた簡単な紹介：

 var comm={};//     


  comm.userInfo={//            
    name:"    1  ",
    code:"001"
  }

  comm.funcInfo={//            
    funcName:"    2  ",
    code:"002"
  }

まとめ：オブジェクトの変数値は動的にロードされておらず、オブジェクトは初期化されていないことが分かります。
第二に、局所変数を持つモノマー
要求：ajaxを使ってデータベースからデータをロードするプロセスをシミュレートする。
 （1）簡単にajaxプロセスをシミュレートする。

//    Ajax  
  function Ajax() {};//   
  //                      
  Ajax.request=function (url,fn) {
    //        
    if(true){
      fn("   1","   2")
    }
  }

（2）最も簡単な単量体では、データは動的にデータベースからロードされておらず、具体的なオブジェクトが表示されていません。ここでは、クローズド原理を用いて上記の問題を解決します。

//         ：           ，     
  var userInfo=(function () {
    //（1）                 
    var name="";
    var code="";
    //（2）  ajax         
    Ajax.request("url",function (n,c) {//     ajax         ，           
         name=n;
         code=c;
    })
    //（3）           
    return {
      name:name,
      code:code
    }
  })()

(3)この方式の単体を使用して、実装しなくても単体に直接戻すことができます。

alert(userInfo.name);

まとめ:
（1）メリット
（2）弊害：return単体のデータ量が比較的大きい場合、データベースからデータを取る必要があり、ロードするたびに実行され、プログラムの性能に影響を与えます。この方式はロード毎に直接実行されるため、リターン単体のデータ量が大きいとパフォーマンスに影響を与え、第三の単体モードがある。
第三に、不活性単体で提供されるソリューションは、負荷時に実行されるのではなく、調整方法の場合にのみ単体を実現するものである。
そこで第二種類の基礎の上で修正しました。
（1）アナログajaxはデータベースからデータをロードしても不変です。

 //    Ajax  
  function Ajax() {}
  //               
  Ajax.request=function (url,fn) {
    //        
    if(true){
      fn("   1","   2")
    }
  }

（2）データベースから動的にデータをロードし、実例を表示し、1つの関数（Init（）パッケージを使って単体の関数を生成し、1つのプライベート変数を使って関数（Init（）を返します。

 //         ：           ，     
  var UserInfo=(function () {

    var userInfo="";//    

    function Init() {//                 
      //                 
      var name="";
      var code="";
      //  ajax         
      Ajax.request("url",function (n,c) {
        name=n;
        code=c;
      })
      //  
      return {
        name:name,
        code:code,
      }
    }

    return {//                  
      getInstance:function () {
        if(userInfo){//userInfo="" false
          return userInfo;
        }else {
          userInfo=Init();
          return userInfo;
        }
      }
    }

  })()

(3)使用  UserInfoオブジェクトにアクセスする取得初期化取得対象の関数（get Instance())

  alert(UserInfo.getInstance().name);

まとめ：不活性単量体を使用すると、実際には、単量体を生成する関数を再パッケージ（関数パッケージを使用して）することによって、このクラスで提供される固有のインターフェース（get Instance（）方法）にアクセスし、初期化された単体の関数になります。
第四種、分岐単量体
簡単な使い方：Ajaxをするときは、ブラウザによって異なるXHRが得られます。ブラウザ間の違いを動的な方法にパッケージし、ブラウザ間の違いを解決するのに適しています。）
例えば、次の簡単な例として、コンピュータの解像度が異なる場合には、異なるインターフェースを初期化します。ここはパチンコの表示だけです。
（1）パソコンの解像度を取得する

//        
  var screenWidth=window.screen.width;//width
  var screenHeight=window.screen.height;//height

（2）分岐判定処理を行い、差異を動的方法にカプセル化する

 var portalInfo=(function () {
    //  
   var $1280_1024={info:'1,2,3,5'}//  1
   var $1366_768={info:'4,2,1,2'}//  2

     //             （      ）
     if(screenWidth==1280){
       return $1280_1024;//         
     }else if(screenWidth==1366){
       return $1366_768;//         
     }else {
       throw new Error("            ")
     }
   })();

（3）使用して、最終的な結果を得る

alert(portalInfo.info)//     4,2,1,2              1366*768

まとめてみますと、ブランチ単体には欠点があります。ブランチには、単体1と単体2が作成され、メモリに保存されましたが、一つだけです。計算時間と占有メモリの両方において取捨選択が必要です。
興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「javascript対象向け入門教程」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。