javascript常用設計モード

6812 ワード

1、コンストラクタモード
JavaScriptの対象とfunctionは千丝万缕の関系を持っていることを知っています.どのオブジェクトもnew一つのfunctionを通じて作成されたものと见られます.この過程はコンストラクタモードとして見られます.

  let Myobj = function (){
   name = '  '
       }
  let obj = new Myobj();
  console.log(obj.name)
  //

2、原型モード
上記について言えば、私達はobjのsay方法が欲しいなら、こうしてもいいです.

   let Myobj = function (){
 
   this.say = function () {
     console.log("hello world")
  }
       }
  let obj = new Myobj();
   obj.say()

しかし、他のところでもこのsayHelloを使う必要があると、同じsayHelloを書く必要がありますので、関数は一般的にfunctionに入れません.この時は原型モードを使って作ることができます.

   let Myobj = function (){
   name = '  '
       }
Myobj.prototype.say = function () {
      console.log("hello world")
  }
  let obj = new Myobj();
   obj.say()

このように他のオブジェクトもsayHello関数を呼び出す必要があるなら、このようにしても良いです.

  let Myobj2 = function (){
  }
  Myobj2.prototype.say = Myobj.prototype.say;
  var obj2 = new Myobj2();
  obj2.say()

3、観察者モード
Jqueryにおけるイベントバインディングon()とイベントトリガー()の実現は観察者モードに基づいている.trigger:各マッチする要素にイベントをトリガします.のように、最初のフォームの提出イベントをトリガします.
01まず関数を新規作成します.

var MyObject=function(){
    this.listner=[]; //         
}

02イベントバインディング方法を追加

//    jquery     ，      on，
MyObject.prototype.on=function(eventName,callback){
    this.listner.push({'eventName':eventName,'callback':callback});
}

03イベントバインディングのキャンセル方法を追加しました.

MyObject.prototype.remove=function(eventName){
    var newListner=[];
    this.listner.forEach(function(value,index,arr){
        if(value.eventName!=eventName){
        newListner.push(value)
        }
});
    this.listner=newListner;
}

04トリガイベント方法を追加

MyObject.prototype.trigger=function(eventName){
    this.listner.forEach(function(value,index,arr){
        if(value.eventName==eventName){
            value.callback();
        }
    });
}

以上のコードがあれば、直接jqueryのイベントバインディングとトリガをシミュレートできます.

  var obj=new MyObject();
obj.on('click',function(){
    console.log("my click11111");
});
obj.remove('click');
obj.on('click',function(){
    console.log("my click2222");
});
obj.trigger('click');

テンプレートモード
私達はいくつかの操作がありますが、お茶を飲むこととコーヒーを飲むことと、基本的には三歩が必要です.第一にお湯を沸かし、第二にお茶やコーヒーなどの材料を入れて、第三にお湯を注ぎます.テンプレートの方法とは、アルゴリズムのセットを定義し、不変の部分を親のクラスで定義し、可変の部分はサブクラス自身で定義します.お茶とコーヒーを例に挙げます.

    let Parent = function (){
}
Parent.prototype.drink = function (){
        this.hotwater();
        this.add();
        this.pourwater()
}
Parent.prototype.hotwater = function(){
   console.log('  ')
 }
Parent.prototype.add = function (){
  throw "        "
}
Parent.prototype.pourwater = function (){
  consloe.log('  ')
}

//  
let tea = new Parent();
tea.add = function(){
  console.log('    ')
}
tea.drink();

//   
let coffee = new Parent();
coffee.add = function(){
  console.log('    ')
}
tea.drink();

ポリシーモード
ポリシーパターンは多くのアルゴリズムを定義し、各アルゴリズムは直接に相互に置き換えられます.実装プロセスは、一般的に、1つのポリシークラスが各アルゴリズムを定義する必要があり、クライアント要求を受け入れるクラスが、クライアント要求のタイプに応じてポリシークラスの関連アルゴリズムを呼び出す必要があります.
例えば、フォーム検証では、typeがtextのinputであるかどうかを検証する必要があります.長さが所与の値を超えるかどうかなどです.今策略のモードがあって、簡単な検証jsを書きます.
01ポリシークラスを定義して、各アルゴリズムを定義します.

  
var Validation={
    required:function(elementObj,showContext,showErrorElementObj){
        if(elementObj.value.trim()==""){
            showErrorElementObj.innerHTML=showContext;
        }
    },
    maxLength:function(elementObj,showContext,showErrorElementObj,maxLength){
        if(elementObj.value.trim().length>maxLength){
            showErrorElementObj.innerHTML=showContext;
        }
    }
}

required検証が空であるかどうか、maxLeng検証長がオーバーしているかどうか、element Objは検証が必要なDOMオブジェクトであり、showConttenttは検証エラー後の提示語であり、showElement Objはエラーメッセージ表示のDOMオブジェクトであり、maxLengthは最大長である.
02取引先の要求を受け入れるクラス:

var validationContext=function(validateType,elementObj,showContext,showErrorElementObj,12){
                
    Validation[validateType](elementObj,showContext,showErrorElementObj,12);
}

このうちvalidateTypeは検証されるタイプであり、このタイプによってポリシークラスで関連アルゴリズムを選択します.
03上のポリシーモードの使用を開始します.

  
//html


            

//js
document.getElementById('validation').addEventListener('click',function(){
    var input=document.getElementById('test');
    var div=document.getElementById('showRequiredError');
                
    validationContext('required',input,'  ',div);
    validationContext('maxLength',input,'    ',div,3);
});

装饰模式

装饰模式就是在不改变原有对象自身的基础上，为该对象增加新的功能。因为JavaScript的语言特性，可以很方便的实现装饰模式。

比如如果我们想统计项目中现有函数的运行时间，该怎么做？难道在每个函数开始运行的地方得到时间，然后在运行结束的时候也得到一个时间，两者相减吗？要是突然我不想要这个计算时间的代码，难道再去一个函数一个函数的删除代码吗？

这个问题我们可以利用JavaScript的原型对象来实现。

函数都继承一个原型对象Function.prototype对象，现在我们扩展这个对象。

Function.prototype.before=function(){
    this.startTime=new Date();
    return this;  //return this，        
}
            
Function.prototype.after=function(){
    this();
    this.endTime=new Date();
    return this.endTime-this.startTime;  //return    
}
            
var test=function(){
                
    console.log("aaa");
}
            
console.log(test.before().after());

職責チェーンパターン
職責チェーンパターンとは、要求を処理できるアプリケーションに出会うまで、チェーンに沿って最初から最後までの実行を要求することである.プロトタイプチェーン内の変数の検索過程は、この職責チェーンモードになりたいです.

Object.prototype.sex="female";
            
var MyFun=function(){
    this.name="Scott"
}
MyFun.prototype.age=11;
var fun=new MyFun();
            
console.log(fun.name);//"Scott"
console.log(fun.age);//11     fun      MyFun.prototype    
console.log(fun.sex);//"female"     fun      MyFun.prototype      ， Object.prototype

これはプロトタイプチェーンに沿って変数を探す過程を職責チェーンパターンでシミュレーションします.この職責チェーンに加入したのは3階建てです.変数var findVeriance=3を探しに来ました.どの階ですか

var firstLevel=function(variance){
    this.myVariance=1;
    if(this.myVariance==variance){
        console.log(" first level    ");
    }else{
        secondLevel(variance);
    }
}
            
var secondLevel=function(variance){
    this.myVariance=2;
    if(this.myVariance==variance){
        console.log(" second level    ");
    }else{
        thirdLevel(variance);
    }
}
            
var thirdLevel=function(variance){
    this.myVariance=3;
    if(this.myVariance==variance){
        console.log(" third level    ");
    }else{
        console.log("           ");
    }
                
}
            
var findVariance=3;
firstLevel(findVariance);

JavaScriptのNodeインターフェース