JavaScript 設(shè)計(jì)模式一些筆記

paulli3 發(fā)布于2019-08-22 18:18 / 1443人閱讀

摘要：如果非要重寫(xiě)父類的方法，比較通用的做法是原來(lái)的父類和子類都繼承一個(gè)更通俗的基類，原有的繼承關(guān)系去掉，采用依賴聚合，組合等關(guān)系代替。里氏替換原則通俗的來(lái)講就是子類可以擴(kuò)展父類的功能，但不能改變父類原有的功能。一有限狀態(tài)機(jī)狀態(tài)總數(shù)是有限的。

設(shè)計(jì)模式 抽象類 抽象類的表現(xiàn)

不能被實(shí)例,只能被繼承

最少有一個(gè)抽象方法（多態(tài)的具體體現(xiàn)）

// 汽車抽象類，當(dāng)使用其實(shí)例對(duì)象的方法時(shí)會(huì)拋出錯(cuò)誤
var Car = function() {};
Car.prototype = {
  getPrice: function() {
    return new Error("抽象方法getPrice不能調(diào)用。");
  },
  getSpeed: function() {
    return new Error("抽象方法getSpeed不能調(diào)用。");
  }
};

上面Car類其實(shí)什么都沒(méi)有做,但用原型的方法還會(huì)直接報(bào)錯(cuò),這一特點(diǎn)非常有必要,因?yàn)榭倳?huì)有一些子類去繼承父類，這些父類經(jīng)常會(huì)去定義一些必要的方法，卻沒(méi)有具體的實(shí)現(xiàn).

一旦子類創(chuàng)建了一個(gè)對(duì)象,但是子類沒(méi)有重寫(xiě)父類的方法而被調(diào)用,就會(huì)直接報(bào)錯(cuò),這個(gè)對(duì)大型項(xiàng)目中對(duì)子類的約束是非常有必要的,代碼頁(yè)更加清晰

單一職責(zé)原則

...

里氏替換原則

子類可以實(shí)現(xiàn)父類的抽象方法，但是不能覆蓋父類的非抽象方法
繼承作為面向?qū)ο笕筇匦灾?，在給程序設(shè)計(jì)帶來(lái)巨大便利的同時(shí)，也帶來(lái)了弊端。比如使用繼承會(huì)給程序帶來(lái)侵入性，程序的可移植性降低，增加了對(duì)象間的耦合性，如果一個(gè)類被其他的類所繼承，則當(dāng)這個(gè)類需要修改時(shí)，必須考慮到所有的子類，并且父類修改后，所有涉及到子類的功能都有可能會(huì)產(chǎn)生故障。

function Foo(){
    this.aa="sdf";
}

Foo.prototype.func1 = function(a,b){
    return a-b;
};


function Sub(){

}

Sub.prototype = new Foo();

var demo = new Sub();
console.log("100-50="+demo.func1(100,50));

//運(yùn)行結(jié)果：
//100-50=50


//后來(lái)，我們需要增加一個(gè)新的功能：完成兩數(shù)相加，然后再與100求和，由類B來(lái)負(fù)責(zé)。即類B需要完成兩個(gè)功能：

function Sub1 (){
}

Sub1.prototype = new Foo();


Sub1.prototype.func1 = function(a,b){
    return a+b;
};

Sub1.prototype.func2 = function(a,b){
    return this.func1(a,b)+100;
};

var demo1 = new Sub1();
console.log("100-50="+demo1.func2(100,50))

//運(yùn)行結(jié)果：
//100-50=250

我們發(fā)現(xiàn)原本運(yùn)行正常的相減功能發(fā)生了錯(cuò)誤。原因就是類Sub1在給方法起名時(shí)無(wú)意中重寫(xiě)了父類的方法，造成所有運(yùn)行相減功能的代碼全部調(diào)用了類Sub1重寫(xiě)后的方法，造成原本運(yùn)行正常的功能出現(xiàn)了錯(cuò)誤。在本例中，引用基類Foo完成的功能，換成子類Sub1之后，發(fā)生了異常。在實(shí)際編程中，我們常常會(huì)通過(guò)重寫(xiě)父類的方法來(lái)完成新的功能，這樣寫(xiě)起來(lái)雖然簡(jiǎn)單，但是整個(gè)繼承體系的可復(fù)用性會(huì)比較差，特別是運(yùn)用多態(tài)比較頻繁時(shí)，程序運(yùn)行出錯(cuò)的幾率非常大。如果非要重寫(xiě)父類的方法，比較通用的做法是：原來(lái)的父類和子類都繼承一個(gè)更通俗的基類，原有的繼承關(guān)系去掉，采用依賴、聚合，組合等關(guān)系代替。里氏替換原則通俗的來(lái)講就是：子類可以擴(kuò)展父類的功能，但不能改變父類原有的功能。它包含以下4層含義：
子類可以實(shí)現(xiàn)父類的抽象方法，但不能覆蓋父類的非抽象方法。
子類中可以增加自己特有的方法。
當(dāng)子類的方法重載父類的方法時(shí)，方法的前置條件（即方法的形參）要比父類方法的輸入?yún)?shù)更寬松。
當(dāng)子類的方法實(shí)現(xiàn)父類的抽象方法時(shí)，方法的后置條件（即方法的返回值）要比父類更嚴(yán)格。
看上去很不可思議，因?yàn)槲覀儠?huì)發(fā)現(xiàn)在自己編程中常常會(huì)違反里氏替換原則，程序照樣跑的好好的。所以大家都會(huì)產(chǎn)生這樣的疑問(wèn)，假如我非要不遵循里氏替換原則會(huì)有什么后果？
后果就是：你寫(xiě)的代碼出問(wèn)題的幾率將會(huì)大大增加。
參考文檔:http://blog.csdn.net/zhengzhb...

開(kāi)閉原則

function Foo(){

}

Foo.prototype.getPerson = function(name){
    if(name==="tom"){
        return {
            name:"tom",
            age:"20"
        }
    }else if(name==="jack"){
        return {
            name:"tom",
            age:"20",
            sex:"boy"
        }
    }
}

console.log(new Foo().getPerson("tom"));

//這個(gè)時(shí)候 如果我要獲取名為lily這個(gè)人的屬性,就需要更改getPerson,這樣所有調(diào)用該接口的對(duì)象都會(huì)受到影響,這個(gè)時(shí)候我們?nèi)绾蝸?lái)重構(gòu)

function Foo(){

}

Foo.prototype.personInfo = function(){};//寫(xiě)一個(gè)抽象方法

Foo.prototype.getPerson = function(){
    return this.personInfo();
};


var a = new Foo();
a.personInfo=function(){
    return {
        name:"lily",
        age:20,
        sex:"girl"
    }
};

console.log(a.getPerson());

狀態(tài)模式

狀態(tài)模式（State）允許一個(gè)對(duì)象在其內(nèi)部狀態(tài)改變的時(shí)候改變它的行為，對(duì)象看起來(lái)似乎修改了它的類。狀態(tài)模式的使用場(chǎng)景也特別明確，有如下兩點(diǎn)：
一個(gè)對(duì)象的行為取決于它的狀態(tài)，并且它必須在運(yùn)行時(shí)刻根據(jù)狀態(tài)改變它的行為。（有些對(duì)象通常會(huì)有好幾個(gè)狀態(tài)，在每個(gè)狀態(tài)都只可以做當(dāng)前狀態(tài)才可以做的事情，而不能做其它狀態(tài)能做的事兒）
一個(gè)操作中含有大量的分支語(yǔ)句，而且這些分支語(yǔ)句依賴于該對(duì)象的狀態(tài)。狀態(tài)通常為一個(gè)或多個(gè)枚舉常量的表示。

一、有限狀態(tài)機(jī)

狀態(tài)總數(shù)（state）是有限的。
任一時(shí)刻，只處在一種狀態(tài)之中。
某種條件下，會(huì)從一種狀態(tài)轉(zhuǎn)變（transition）到另一種狀態(tài)。

// 狀態(tài)機(jī)
var FSM = {
  off: {
    buttonWasPressed: function() {
      console.log("關(guān)燈");
      this.button.innerHTML = "下一次按我是開(kāi)燈";   // 這是Light上的屬性！?。?      this.currState = FSM.on;            // 這是Light上的屬性?。。?    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("開(kāi)燈");
      this.button.innerHTML = "下一次按我是關(guān)燈";
      this.currState = FSM.off;
    }
  },
};
 
var Light = function() {
  this.currState = FSM.off;  // 設(shè)置當(dāng)前狀態(tài)
  this.button = null;
};
 
Light.prototype.init = function() {
  var button = document.createElement("button");
  self = this;
 
  button.innerHTML = "已關(guān)燈";
  this.button = document.body.appendChild(button);
  this.button.onclick = function() {
    // 請(qǐng)求委托給FSM狀態(tài)機(jī)
    self.currState.buttonWasPressed.call(self);
  }
 
}
 
var light = new Light();
light.init();