FE.BASE-前端設計模式、編碼與重構筆記

seasonley發表於2019-05-10
前端設計模式筆記

高質量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 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物件
    • 引入斷言

  • 簡化函式呼叫

    • 函式改名
    • 新增引數
    • 移除引數
    • 將查詢函式和修改函式分離
    • 令函式攜帶引數
    • 以明確函式取代引數
    • 保持物件完整
    • 以函式取代引數
    • 引入引數物件
    • 移除設值函式
    • 隱藏函式
    • 以工廠函式取代建構函式
    • 封裝向下轉型
    • 以異常取代錯誤碼
    • 以測試取代異常

  • 處理概括關係

    • 欄位上移
    • 函式上移
    • 建構函式本體上移
    • 函式下移
    • 欄位下移
    • 提煉子類
    • 提煉超類
    • 提煉介面
    • 摺疊繼承體系
    • 塑造模板函式
    • 以委託取代繼承
    • 以繼承取代委託

  • 大型重構

    • 梳理並分解繼承體系
    • 將過程化設計轉化為物件設計
    • 將領域和表述/顯示分離
    • 提煉繼承體系

編碼經驗

程式碼大全2摘錄（軟體構建核對表）

參考資料

《Javascript設計模式》
《編寫可維護的Javascript》
《重構——改善既有程式碼的設計》
《程式碼大全2》
Design-Patterns-in-Javascript

相關文章