JavaScript設計模式:讀書筆記(未完)

該篇隨我讀書的進度持續更新
閱讀書目:《JavaScript設計模式》

1. 2016/3/30
2. 2016/3/31

2016/3/30：

模式是一種可復用的解決方案,可用於解決軟體設計中遇到的常見問題./將解決問題的方法製作成模板,並且這些模板可應用於多種不同的情況.
有效模式的附加要求:適合性,實用性,適用性.

模式的優點:

• 防止局部問題引起大問題,模式讓我們的代碼更有組織性
• 模式通常是通用的解決方式,不管我們開發哪種應用程式,都可以用模式優化我們代碼的結構
• 模式確實可以讓我們避免代碼復用,使代碼更整潔
• 使用模式方便我們與工作伙伴一起工作時進行溝通和交流

優秀的模式有以下的特點

• 解決特殊問題
• 沒有顯而易見的解決方案－間接提供解決問題的方案
• 證明瞭作用與描述相一致
• 描述了一種關係,從正式描述能深入解釋它與代碼關係的系統結構和機制

反模式:

• 描述一種針對某個特定問題的不良解決方案,該方案會導致糟糕的情況發生
• 描述如何擺脫前述的糟糕情況以及如何創造好的解決方案

JavaScript中的反模式示例:

• 在全局上下文中定義大量的變數污染全局命名空間(就是亂使用全局變數)
• 向setTimeout/setInterval傳遞字元串,這會導致出發eval()的內部使用
• 修改Object類的原型
• 內聯形式使用JavaScript,它是不可改變的
• 濫用document.write

設計模式:
確定->包含的類和實例,它們的角色,協作方式,職責分配

1. 創建型設計模式
   處理對象創建機制,以適合給定情況的方式來創建對象.旨在通過控制創建過程來解決減少創建對象的基本方法可能導致的項目複雜性
   Constructor(構造器),Factory(工廠),Abstract(抽象),Prototype(原型),Singleton(單例),Builder(生成器)都屬於創建型設計模式.
2. 結構型設計模式
   找出不同對象之間建立關係的簡單方法,確保系統某一部分發生變化時,系統整個結構不需要同時改變,對於不適合某一特定目的而需要改變的系統部分,模式也能幫助它進行重組.
   Decorator(裝飾者),Facade(外觀),Flyweight(享元),Adapter(適配器),Proxy(代理)都屬於結構型設計模式.
3. 行為設計模式
   專註於改善或簡化系統中不同對象的通信
   Iterator(迭代器),Mediator(中介者),Observer(觀察者),Visitor(訪問者)都屬於行為設計模式.

2016/3/31:

Constructor(構造器)模式:
<經典OOPL中,Constructor是一種在記憶體已分配給該對象的情況下,用於初始化新創建對象的特殊方法.>
JavaScript中,創建新對象有兩種方法:
1. var newObj = {};
2. var newObj = new Object();
以上兩種方法都創建了空對象.
賦值方法有4種:
newObj.some = "hello world";
newObj["some"] = "hello world";
以上兩種相容ECMAScript3
Object.defineProperty(newObj,"some",{value:"hello world"});//mdn鏈接
Object.defineProperties(newObj,{"some":{value:"hello world"},"other":{value:"goodbye"}});//mdn鏈接
以上兩種方法屬於ECMAScript5

基本構造器:

function people(name,age){
    this.name = name;
    this.age = age;
    this.toString = function(){
      return this.name;
    };
  }

問題:toString這樣的函數為每個people構造器創建的新對象而重新分別定義了.

帶原型的構造器:

function people(name,age){
  this.name = name;
  this.age = age;
}
people.prototype.toString = function(){
  return this.name;
}

這樣就可以單一實例在所有people對象之間共用了.

Module(模塊)模式
在JavaScript中,實現模塊的方法:

• 對象字面量表示法(對象表達式)
• Module模式
• AMD模塊
• CommonJS模塊
• ECMAScript Harmony模塊

後三種在後面討論,目前學習前兩種

對象字面量表示法:
對象字面量不需要new來實例化,但不能用於語句開頭,這會導致{被解讀為一個塊的開始.對象外部,新成員賦值可以用myModule.property = "Value";
使用對象字面量有助於封裝和組織代碼.

Module(模塊)模式:
Module模式最初定義為一種在傳統軟體工程中為類提供私有和公有封裝的方法.
而在JavaScript中,Module模式用於進一步模擬類的概念.我們通過該方式,能夠使一個單獨的對象擁有公有/私有方法和變數,使函數名與頁面其他腳本定義的函數衝突可能性降低.
JavaScript中沒有真正意義上的"私有",所以我們使用作用域來模擬該概念

//函數字面量
var myMoudle = {
  myProperty:"property",
  myConfig:{
    language:"cn"
  },
  myFunction:function(){
    return "myFunction";
  }
};

//Module mode
var newMoudle = (function() {
  //private
  var innerVar = "test";

  return {
    //publish
    displayInnerVar = function() {
      return innerVar;
    }

  };
})();

(待續)