設計モード--構造型設計モード

構造型設計モードは外観モード、アダプターモード、プロキシモード、装飾者モード、ブリッジモード、組合せモード、享元モードがあります.外観モード外観モード:複雑なサブシステムインターフェースのセットに、より高級な統一インターフェースを提供し、このインターフェースを通じて、サブシステムインターフェースへのアクセスを容易にする.外観モードは、ブラウザの互換性のない方法を簡単にして、各ブラウザと互換することができますが、これは外観モードアプリケーションの一部にすぎません.多くのコードバンクでは、外観モードによって複数の機能をカプセル化し、底部の操作方法を簡略化しています.

//          
var A={
    //  id    
    g:function(id){
      return document.getElementById(id);
    },
    //    css  
    css:function(id,key,value){
        document.getElementById(id).style[key]=value;
    },
    //       
    attr:function(id,key,value){
        document.getElementById(id)[key]=value;
    }
}

このコードライブラリを通して、私たちは元素の属性パターンを操作して、A.css(「box」、「background」、「red」)を簡単にします.
複雑なシステムが一連の複雑なインターフェース方法を提供すると、システムの管理が容易になるため、インターフェース方法の使用は極めて複雑である.外観モードを通じて、インタフェースの二次パッケージにその複雑さを隠し、その使用を簡略化する時に、いい実践があります.外観モードはインタフェース方法の外層包装で、上層コードの呼び出しのためです.そのため、外観モードパッケージのインターフェース方法は、インターフェースの具体的な実装を必要とせず、インターフェースの使用規則に従ってのみ使用すればよい場合がある.これはシステムとお客様との間の緩い結合でもあります.はい、システムとお客様の間は構造の変化によって互いに影響しません.
アダプタモードアダプタモード:1つのタイプ(オブジェクト)のインターフェース(方法または属性)を別のインターフェースに変換し、ユーザーのニーズを満たすために、クラス(オブジェクト)間のインターフェースの互換性がない問題をアダプタで解決します.

function ajaxAdapter(){
 return [data.key1,data.key2,data.key3];
}
$.ajax({
    url:"xxx.php",
    success:function(data,status){
        if(data){
            doSomething(ajaxAdapter(data));
        }
    }
});

従来の設計モードでは、アダプターモードは、しばしば2つのタイプのインターフェースを適応させることが互換性のない問題であるが、JavaScriptでは、アダプターの応用範囲がより広い.例えば、2つのコードライブラリを適応させ、前後のエンドデータを適応させるなど.JavaScriptにおけるアダプターの応用は、オブジェクト間でより多くの応用が可能であるため、通常はオブジェクトを分割して再包装します.これにより、適応対象の内部構造を理解したいです.これも外観モードとの違いです.もちろん、アダプタモードはオブジェクト間の結合度を解決します.パッケージのアダプターコードはリソースオーバーヘッドを増加しました.もちろんこれは微々たるものです.
プロキシモードプロキシモード:1つのオブジェクトは直接に他のオブジェクトを参照することができないので、プロキシオブジェクトを介してこの2つのオブジェクトの間で仲介の役割を果たす必要があります.var Count=(function(){var img=new Image];return function(param){var str=>http://www.count.com/a.jpgfor(var i in param){str+=i+}+param[i];img.src=str;)();Count({num:10}プロキシモードは、システム間の結合度およびシステムリソースのオーバヘッドが大きい問題を解決し、プロキシオブジェクトを介してプロキシオブジェクトに保護され、外部の影響を受けないようにプロキシオブジェクトを拡張することができる.エージェントオブジェクトを介して、あるインタラクションまたはある需要による大量のシステムオーバーヘッドを解決することもできる.プロキシモードが処理システムにおいても、オブジェクト間の結合度の問題も、システムリソースオーバーヘッド問題を解決するためにも、彼は複雑なプロキシオブジェクトを構築し、システムの複雑さを増加させながら、一定のシステムオーバーヘッドを増加させる.もちろん、このようなオーバーヘッドは、しばしば受け入れられる.
装飾者モード装飾者モード:元のオブジェクトを変えない上に、包装の拡張を行うことによって、元のオブジェクトはユーザーのより複雑なニーズを満たすことができます.

var decorator=function(input,fn){
    var input=document.getElementById(input);
    if(typeof input.οnclick==='function'){
        var oldClickFn=input.onclick;
        input.οnclick=function(){
        oldClickFn();
        fn();
    }else{
        input.οnclick=fn;
    }
}

解原の機能がなくなった上で機能拡張モードに対して、これは元の機能に対する一種の強化と開拓です.もちろん、元のオブジェクトに対して拡張するモードはアダプターモードがあります.アダプターを拡張する時は対象内部構造を再構築することが多いので、自分自身の構造を知ることが必要です.一方、装飾者は対象の開拓に対して良性開拓であり、具体的な実現を知る必要はなく、外部で一回のパッケージ展開を行っています.これはまた元の機能の完全性に対する保護です.
ブリッジモードブリッジモード:システムが複数の次元に沿って変化しながら、その複雑さを増加させず、デカップリングに達した.

//     
//    
function Speed(x,y){
 this.x=x;this.y=y;
}
Speed.prototype.run=function(){
  console.log('    ');
}
//    
functon Color(cl){
    this.color=cl;
}
Color.prototype.draw=function(){
    console.log('    ');
}
//    
function Shape(sp){
  this.shape=sp;
}

そこで私たちは球類を作りたいです.運動もできて、着色もできます.

function Ball(x,y,c){
 this.speed=new speed(x,y);
 this.color=new Color(c);
}
Ball.prototype.init=function(){
  this.speed.run();
  this.color.draw();
}

ブリッジモードの最も主要な特徴は、抽象層との分離を実現し、両部分が独立して変化できるようにすることである.このことからブリッジモードは主に構造間の構造であることがわかる.前に学んだ抽象的な工場モデルと建設者モデルの主要な業務は創立にあります.ブリッジモードによって実現された結合によって、実現層と抽象層を別々に処理し、需要の変化が対象内部の修正をもたらすことを回避し、対象向けの開発及び修正に対するクローズ原則を体現しています.
組み合わせモードモード:部分-全体モードで、オブジェクトをツリー構造に組み合わせて、「部分-全体」の階層構造を表します.結合モードは、ユーザが単一のオブジェクトと合成オブジェクトの使用に対して一貫性を持つようにする.

var Container=function(id,parent){
News.call(this);
this.id=id;
this.parent=parent;
this.init();
}
inheritPrototype(Container,News);
Container.prototype.init=function(){
 this.element=document.createElement('ul');\
 this.element.id=this.id;
 this.element.className="new"
};
Container.prototype.add=function(child){
    this.children.push(child);
    this.element.appendChild(child.getElement());
    return this;
}
Container.prototype.getElement=function(){
 return this.element;
}
Container.prototype.show=function(){
  this.parent.appendChild(this.element);
}

組合せモードは,明瞭な組成構造を提供することができる.グループの対象類は同じ親類を継承することによって統一的な方法を持たせることによって、私達が統一的に管理して使うこともできます.もちろんこの時、単体のメンバーとグループのメンバーの行動表現は比較的に一致しています.これはデータに対する階層的な処理でもある.はっきりしていて、データの管理と使用に便利です.もちろん、組み合わせパターンは、需要を実現する上で、より多くの選択方法をもたらしてくれます.単体オブジェクトの実現は簡単で、単一ですが、その組み合わせによって、より多くの使用形態をもたらしてくれます.
享元モード享元モード:共有技術を用いて大量の細粒度の対象を効果的にサポートし、対象間に同じ内容があるので余計な出費を避ける.

var Flyweight=function(){
    var created=[];
    function create(){
         var dom=document.createElement('div');
         document.getElementById('container').appendChild(dom);
         created.push(dom);
         return dom;
    }
    return {
         getDiv:function(){
            if(created.length<5){
                return create();
            }else{
              var div=created.shift();
              created.push(div);
              return div;
            }
        }
    }
}

享元モードの応用目的は、プログラムの実行効率とシステムの性能を向上させることである.したがって、大規模なシステム開発では、アプリケーションは比較的広く、効率の1%は、時には質的な変更が発生することができますが、プログラム中のデータの重複を避けることができます.システム内には大量のオブジェクトが存在し、大量のメモリ占有を引き起こす場合がありますので、享元モードを適用してメモリ消費を低減する必要があります.でも、応用する時は必ず内部状態と外部状態を確認してください.そうすると、より合理的に分離を抽出できます.
したがって、構造型設計モードは、クラスまたはオブジェクトをより大きく、より複雑な構造に結合する方法に注目し、設計を簡略化する.