高質量Javascript
- Javascript特性：物件導向，無類，原型
- 可維護的程式碼(可讀;一致;可預測;看起來像是同一個人寫的;文件)
- 減少全域性物件，傳參訪問全域性物件
- 單 var 模式，忘記 var 時的副作用(顯式宣告的全域性變數無法用 delete 刪除)
- (不)擴充內建原型
-
switch 模式
- 每個 case 和 switch 對齊(這裡不考慮花括號相關的縮排規則)
- 每個 case 中的程式碼整齊縮排
- 每個 case 都以 break 作為結束
- 避免連續執行多個 case 語句塊(當省略 break 時會發生),如果你堅持認為連續
- 執行多 case 語句塊是最好的方法,請務必補充文件說明,對於其他人來說,這種情況看起來是錯誤的。
- 以 default 結束整個 switch,
- 以確保即便是在找不到匹配項時也會有正常的結果
- 避免隱式型別轉換（推薦使用===和!===）
- typeof null==='object'；instanceof 檢測引用值
- 避免使用 eval()（用 new Function()來代替，它是區域性函式作用域，var 定義的變數不會自動變成全域性變數）
- 使用 parseInt()進行數字轉換，總是指定第二個引數(
parseInt(year, 10)) - 編碼風格（縮排，花括號，左花括號位置，空格）
- 命名規範（建構函式大駝峰 函式和方法小駝峰 變數名小寫下劃線分隔 常量全大寫）
- 註釋jsdoc生成文件，eslint檢查，相互評審
直接量和建構函式
1.物件直接量，JSON,正規表示式直接量
1.強制new,避免使用其他的內建建構函式:String()、Number()、Boolean()以及不同種類的
Error()構造器,that=this
函式
- 函式特性：是一等物件，可以有屬性和方法，宣告提前，提供區域性變數作用域
- 回撥模式：作用域，監聽（addEventListener），超時(setTimeout)
- IIFE,Memoization
- 柯里化
物件建立模式
-
名稱空間方式
-
優點:
- 避免了自身程式碼的命名衝突,
- 避免了同一個頁面上自身程式碼和第三方程式碼的衝突
-
缺點
- 程式碼量稍有增加;在每個函式和變數前加上這個名稱空間物件的字首,會增加程式碼量,增大檔案大小
- 該全域性例項可以被隨時修改
- 命名的深度巢狀會減慢屬性值的查詢
-
-
模組模式（名稱空間模式+IIFE+私有和特權成員模式+依賴宣告模式）
MYAPP.utilities.module = (function (app, global) { return (function(){})() }(MYAPP, this)) -
沙箱模式
Sandbox.modules = {}; Sandbox.modules.dom = function (box) {}; Sandbox('dom', 'event', function (box) { Sandbox('ajax', function(box) { }); }); -
鏈式呼叫模式
- 優點：節省程式碼量，易讀性
-
缺點：呼叫這樣寫的程式碼會更困難
myobj.method1("hello").method2().method3("world").method4();
-
程式碼複用模式
-
類式繼承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 和瀏覽器中的模式
-
減少DOM訪問操作次數
- 避免在環境中訪問 DOM
- 將 DOM 引用賦給本地變數,然後操作本地變數
- 當可能的時候使用 selectors API
- 遍歷 HTML collections 時快取 length
-
事件處理:隔離應用邏輯,不要分發event物件
var MyApplication={ handleClick(event){ this.showPopup(event.clientX,event.clientY) }, showPopup:function(x,y){ } } b.addEventListener('click', function(event){ MyApplication.handleClick(event) }, false); -
事件委託
Y.delegate('click', myHandler, "#click-wrap", "button"); -
載入策略
- script 元素放到頁面的尾部
- HTTP 分塊
- 動態<script>元素
- 延遲載入
- 按需載入
- 預載入 JavaScript
- UI鬆耦合
- 瀏覽器嗅探：特性判斷
Design Patterns in Javascript ES6 github
- 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
重構
重構目的：改進軟體設計，使軟體更容易理解，幫助找到bug，提高產出。
重構法則：事不過三，三則重構。新增功能/修補錯誤/複審程式碼時重構，重構不如重寫簡單、專案的最後期限，應該避免重構。
糟糕程式碼:
- 重複程式碼
- 過長函式
- 過大的類
- 過長引數列
- 發散式變化
- 霰彈式修改
- 依戀情結
- 資料泥團
- 基本型別偏執
- switch驚悚現身
- 平行繼承體系
- 冗贅類
- 誇誇其談的未來星
- 令人迷惑的暫時欄位
- 過度耦合的訊息鏈
- 中間人
- 狎暱關係
- 異曲同工的類
- 不完美的庫類
- 純資料類
- 被拒絕的遺贈
- 過多的註釋
- 沒有測試
重構建議：
-
重新組織函式
- 提煉函式
- 行內函數
- 內聯臨時變數
- 以查詢取代臨時變數
- 引入解釋性變數
- 分解臨時變數
- 移除對引數的賦值
- 以函式物件取代函式
- 替換演算法
-
在物件之間搬移特性
- 搬移函式
- 搬移欄位
- 提煉類
- 將類內聯化
- 隱藏“委託關係”
- 移除中間人
- 引入外加函式
- 引入本地擴充套件
-
重新組織資料
- 自封裝欄位
- 以物件取代資料值
- 將值物件改為引用物件
- 將引用物件改為值物件
- 以物件取代資料
- 複製“被監視資料”
- 將單向關聯改為雙向關聯
- 將雙向關聯改為單向關聯
- 以字面常量取代魔法數
- 封裝欄位
- 封裝集合
- 以資料類取代記錄
- 以類取代型別碼
- 以子類取代型別碼
- 以狀態物件取代型別碼
- 以欄位取代子類
-
簡化條件表示式
- 分解條件表示式
- 合併條件表示式
- 合併重複的條件片段
- 移除控制標記
- 以衛語句取代巢狀條件表示式
- 以多型取代條件表示式
- 引入Null物件
- 引入斷言
-
簡化函式呼叫
- 函式改名
- 新增引數
- 移除引數
- 將查詢函式和修改函式分離
- 令函式攜帶引數
- 以明確函式取代引數
- 保持物件完整
- 以函式取代引數
- 引入引數物件
- 移除設值函式
- 隱藏函式
- 以工廠函式取代建構函式
- 封裝向下轉型
- 以異常取代錯誤碼
- 以測試取代異常
-
處理概括關係
- 欄位上移
- 函式上移
- 建構函式本體上移
- 函式下移
- 欄位下移
- 提煉子類
- 提煉超類
- 提煉介面
- 摺疊繼承體系
- 塑造模板函式
- 以委託取代繼承
- 以繼承取代委託
-
大型重構
- 梳理並分解繼承體系
- 將過程化設計轉化為物件設計
- 將領域和表述/顯示分離
- 提煉繼承體系
編碼經驗
參考資料
《Javascript設計模式》
《編寫可維護的Javascript》
《重構——改善既有程式碼的設計》
《程式碼大全2》
Design-Patterns-in-Javascript