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

高質量Javascript

  1. Javascript特性:面向對象,無類,原型
  2. 可維護的代碼(可讀;一致;可預測;看起來像是同一我的寫的;文檔)
  3. 減小全局對象,傳參訪問全局對象
  4. 單 var 模式,忘記 var 時的反作用(顯式聲明的全局變量沒法用 delete 刪除)
  5. (不)擴充內置原型
  6. switch 模式java

    • 每一個 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=thisgit

函數

  1. 函數特性:是一等對象,能夠有屬性和方法,聲明提早,提供局部變量做用域
  2. 回調模式:做用域,監聽(addEventListener),超時(setTimeout)
  3. IIFE,Memoization
  4. 柯里化

對象建立模式

  1. 命名空間方式github

    • 優勢:ajax

      • 避免了自身代碼的命名衝突,
      • 避免了同一個頁面上自身代碼和第三方代碼的衝突
    • 缺點正則表達式

      • 代碼量稍有增長;在每一個函數和變量前加上這個命名空間對象的前綴,會增長代碼量,增大文件大小
      • 該全局實例能夠被隨時修改
      • 命名的深度嵌套會減慢屬性值的查詢
  2. 模塊模式(命名空間模式+IIFE+私有和特權成員模式+依賴聲明模式)算法

    MYAPP.utilities.module = (function (app, global) {
    return (function(){})()
    }(MYAPP, this))
  3. 沙箱模式segmentfault

    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

相關文章
相關標籤/搜索