FE.BASE-前端設計模式筆記

摘要： 高質量Javascript Javascript特性：面向物件，無類，原型 可維護的程式碼(可讀;一致;可預測;看起來像是同一個人寫的;文件) 減少全域性物件，傳參訪問全域性物件 單 var 模式，忘記 var 時的副作用(顯式宣告的全域性變數無法用 de...

高質量Javascript

1. Javascript特性：面向物件，無類，原型
2. 可維護的程式碼(可讀;一致;可預測;看起來像是同一個人寫的;文件)
3. 減少全域性物件，傳參訪問全域性物件
4. 單 var 模式，忘記 var 時的副作用(顯式宣告的全域性變數無法用 delete 刪除)
5. (不)擴充內建原型

6. switch 模式

   • 每個 case 和 switch 對齊(這裡不考慮花括號相關的縮排規則)
   • 每個 case 中的程式碼整齊縮排
   • 每個 case 都以 break 作為結束
   • 避免連續執行多個 case 語句塊(當省略 break 時會發生),如果你堅持認為連續
   • 執行多 case 語句塊是最好的方法,請務必補充文件說明,對於其他人來說,這種情況看起來是錯誤的。
   • 以 default 結束整個 switch,
   • 以確保即便是在找不到匹配項時也會有正常的結果
7. 避免隱式型別轉換（推薦使用===和!===）
8. typeof null==='object'；instanceof 檢測引用值
9. 避免使用 eval()（用 new Function()來代替，它是區域性函式作用域，var 定義的變數不會自動變成全域性變數）
10. 使用 parseInt()進行數字轉換，總是指定第二個引數(parseInt(year, 10) )
11. 編碼風格（縮排，花括號，左花括號位置，空格）
12. 命名規範（建構函式大駝峰 函式和方法小駝峰 變數名小寫下劃線分隔 常量全大寫）
13. 註釋jsdoc生成文件，eslint檢查，相互評審

直接量和建構函式

1.物件直接量，JSON,正則表示式直接量

1.強制new,避免使用其他的內建建構函式:String()、Number()、Boolean()以及不同種類的

Error()構造器,that=this

函式

1. 函式特性：是一等物件，可以有屬性和方法，宣告提前，提供區域性變數作用域
2. 回撥模式：作用域，監聽（addEventListener），超時(setTimeout)
3. IIFE,Memoization
4. 柯里化

物件建立模式

1. 名稱空間方式

   • 優點:

     - 避免了自身程式碼的命名衝突,
     - 避免了同一個頁面上自身程式碼和第三方程式碼的衝突

   • 缺點

     - 程式碼量稍有增加;在每個函式和變數前加上這個名稱空間物件的字首,會增加程式碼量,增大檔案大小
     - 該全域性例項可以被隨時修改
     - 命名的深度巢狀會減慢屬性值的查詢

2. 模組模式（名稱空間模式+IIFE+私有和特權成員模式+依賴宣告模式）

   MYAPP.utilities.module = (function (app, global) {
   return (function(){})()
   }(MYAPP, this))

3. 沙箱模式

   Sandbox.modules = {};
   Sandbox.modules.dom = function (box) {};
   Sandbox('dom', 'event', function (box) {
   Sandbox('ajax', function(box) {
   });
   });

4. 鏈式呼叫模式

   • 優點：節省程式碼量，易讀性

   • 缺點：呼叫這樣寫的程式碼會更困難

     myobj.method1("hello").method2().method3("world").method4();

5. 程式碼複用模式

   • 類式繼承1：預設模式

     缺點：既繼承了(父物件)“自己的屬性”,也繼承了原型中的屬性。大部分情況下你可能並不需要“自己的屬性”,因為它們更可能是為例項物件新增的,並不用於複用。

     function inherit(C, P) {
     C.prototype = new P();
     }

   • 類式繼承2:借用建構函式

     缺點：無法繼承原型

     function Child(a, c, b, d) {
     Parent.apply(this, arguments);
     }

   • 類式繼承3:借用並設定原型(1,2的缺點修復，接近java)

     缺點：父建構函式被呼叫了兩次,所以不是很高效

     function Child(a, c, b, d) {
     Parent.apply(this, arguments);
     }
     Child.prototype = new Parent();

   • 類式繼承4:共享原型

     缺點：修改原型影響所有的繼承

     function inherit(C, P) {
     C.prototype = P.prototype;
     }

   • 類式繼承5:臨時建構函式

     function inherit(C, P) {
     var F = function () {};
     F.prototype = P.prototype;
     C.prototype = new F();
     }

   • 原型繼承(現代繼承模式)

     var child = Object.create(parent);

   • 借用方法

     //call() example
      notmyobj.doStuff.call(myobj, param1, p2, p3);
      // apply() example
      notmyobj.doStuff.apply(myobj, [param1, p2, p3]);

設計模式

單例

var obj = {
myprop: 'my value'
};

工廠模式

var corolla = CarMaker.factory('Compact');
var solstice = CarMaker.factory('Convertible');
var cherokee = CarMaker.factory('SUV');
corolla.drive(); // "Vroom, I have 4 doors"
solstice.drive(); // "Vroom, I have 2 doors"
cherokee.drive(); // "Vroom, I have 17 doors"

迭代器

var element;
while (element = agg.next()) {
// do something with the element ...
console.log(element);
}

裝飾器

var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('cdn'); // format using CDN
sale.getPrice(); // "CDN$ 105.00"

策略模式

var data = {
first_name: "Super",
last_name: "Man",
age: "unknown",
username: "o_O"
};
validator.config = {
first_name: 'isNonEmpty',
age: 'isNumber',
username: 'isAlphaNum'
};
validator.validate(data);
if (validator.hasErrors()) {
console.log(validator.messages.join("\n"));
}

外觀模式

var myevent = {
// ...
stop: function (e) {
// others
if (typeof e.preventDefault === "function")
e.preventDefault();
if (typeof e.stopPropagation === "function")
e.stopPropagation();
// IE
if (typeof e.returnValue === "boolean") 
e.returnValue = false;
if (typeof e.cancelBubble === "boolean") 
e.cancelBubble = true;
}
// ...
};

代理模式

scroll_per_second=throttle(scroll,1000)

中介者

counter=function(){
var i=0;
return function(){
return ++i;
}
}
counter()

觀察者模式

paper.subscribe(joe.drinkCoffee);
paper.subscribe(joe.sundayPreNap, 'monthly');
paper.daily();
paper.monthly();

DOM 和瀏覽器中的模式

1. 減少DOM訪問操作次數

   • 避免在環境中訪問 DOM
   • 將 DOM 引用賦給本地變數,然後操作本地變數
   • 當可能的時候使用 selectors API
   • 遍歷 HTML collections 時快取 length

2. 事件處理:隔離應用邏輯,不要分發event物件

   var MyApplication={
   handleClick(event){
   this.showPopup(event.clientX,event.clientY)
   },
   showPopup:function(x,y){
   }
   }
   b.addEventListener('click', function(event){
   MyApplication.handleClick(event)
   }, false);

3. 事件委託

   Y.delegate('click', myHandler, "#click-wrap", "button");

4. 載入策略

   • script 元素放到頁面的尾部
   • HTTP 分塊
   • 動態<script>元素
   • 延遲載入
   • 按需載入
   • 預載入 JavaScript
5. UI鬆耦合
6. 瀏覽器嗅探：特性判斷

Design Patterns in Javascript ES6github

• Adapter
• Builder
• Bridge
• Chaining
• Command
• Composite
• Composite Iterator
• Compound (Use some design patterns together to solve a problem)
• Decorator
• Facade
• Factory
• Iterator
• Lazy
• Module
• Module Revealed
• Multi-Inheritance ES6
• MVC
• Namespace
• Nullify
• Observer
• Prototype
• Proxy
• Singleton
• State
• Strategy
• Template
• Try-Finally

參考資料