1. 簡述
2. 無副作用（No Side Effects）
3. 高階函數(shù)（High-Order Function）
4. 柯里化（Currying）
5. 閉包（Closure）
   -- JavaScript 作用域
   -- 面向?qū)ο箨P(guān)系
   -- this調(diào)用規(guī)則
   -- 配置多樣化的構(gòu)造重載
   -- 更多對象關(guān)系維護——模塊化
   -- 流行的模塊化方案
6. 不可變（Immutable）
7. 惰性計算（Lazy Evaluation）
8. Monad

前言

? ? ? ?函數(shù)提供了一個封閉的、通用性很強的執(zhí)行空間，根據(jù)參數(shù)不同，來締造不同的執(zhí)行結(jié)果。
? ? ? ?通過 JavaScript 作用域 ，我們了解了函數(shù)作用域的限制，我們可以將什么樣的執(zhí)行結(jié)果交給函數(shù)的調(diào)用者。
? ? ? ?通過 面向?qū)ο箨P(guān)系 我們了解到了另一種封裝數(shù)據(jù)的方式——面向?qū)ο笤O(shè)計，可以幫助我們更準(zhǔn)確的定義同一種類型的數(shù)據(jù)模型。
? ? ? ?通過對 this調(diào)用規(guī)則 的了解，我們可以規(guī)避很多在 JavaScript 中設(shè)計函數(shù)或?qū)ο蟮目樱鞔_當(dāng)前的封閉環(huán)境執(zhí)行過程。
? ? ? ?而接下來，我們繼續(xù)回到閉包構(gòu)想：如何進一步延展我們的黑箱設(shè)計。

5.4 配置多樣化的構(gòu)造重載

? ? ? ?對象的設(shè)計往往主要需考慮實例之間的相似性，然而在應(yīng)用對象的過程中，我們又常常要明確每個對象之間的個體獨立性。因此面向?qū)ο蟮脑O(shè)計過程主要囊括以下兩個步驟：

• 抽象提取實例之間的共有屬性、共有行為（方法）；
• 為確保實例獨立性，提供共有屬性不同的配置方式（賦值）；

? ? ? ?通常我們會在構(gòu)造函數(shù)中進行一系列初始化行為，用以配置這個對象的使用方式，入口依然是函數(shù)參數(shù)的傳遞：

class DateUtil{
                 
    constructor(date) {
        // 緩存日期對象
        this.date = typeof date === 'string'? new Date(date): date;
        if(this.date == 'Invalid Date'){
            throw '日期參數(shù)只能是有效格式的字符串或Date對象!';
        }
    }
                 
    // 按照 yyyy-MM-dd HH:mm:ss 格式輸出字符串
    formart(){
        const d = this.date;
        const leftDate = [d.getFullYear(), d.getMonth()+1, d.getDate()];
        const rightDate = [d.getHours(), d.getMinutes(), d.getSeconds()];
        // 檢查是否需要補零的函數(shù)
        const checkFormart = e => (''+e)[1]?(''+e):('0'+e);
        return leftDate.map( checkFormart ).join('-')
                .concat(' ')
                .concat(rightDate.map(checkFormart).join(':'));
    }
}

這是一個簡單的日期工具類，在 constructor 構(gòu)造中我們接收一個 date 參數(shù)作為該對象的默認(rèn)配置，記錄了構(gòu)建對象時需要緩存的時間。又構(gòu)建了一個 formart() 方法用于對于緩存的時間進行格式化字符串輸出。當(dāng)然，之后也許還有很多其他針對緩存數(shù)據(jù) date 的操作，暫且不提。輸出結(jié)果如下：

const d1 = new DateUtil(new Date());
d1.formart(); // 結(jié)果："2018-12-23 12:08:08"

const d2 = new DateUtil('1998-3-12 9:3:21');
d2.formart(); // 結(jié)果："1998-03-12 09:03:21"

? ? ? ?重載是指對于同名方法的不同參數(shù)(類型/數(shù)量)的調(diào)用，用于以相似的行為描述不同結(jié)果。一些強類型語言中提供了重載的嚴(yán)格語法，而在 JavaScript 中，函數(shù)參數(shù)要求非常寬松——你可以傳遞任意數(shù)量的實參，以及聲明任意數(shù)量的形參，即使他們在調(diào)用過程中發(fā)生了參數(shù)過剩或者參數(shù)缺失，也不會出現(xiàn)運行時異常。
? ? ? ?假設(shè)現(xiàn)在又有一個需求：緩存一個是否只操作日期（忽略時間部分）的狀態(tài)。在 Java 中我們可能會這樣設(shè)計這個類的構(gòu)造重載：

class DateUtil{
    DateUtil(Date date){
        // 只接收日期類型對象的構(gòu)造
    }

    DateUtil(String dateStr){
        // 只接收字符串類型參數(shù)的構(gòu)造
    }

    DateUtil(Date date, boolean ignoreTime){
        // 接收日期類型對象，及是否忽略時間部分的布爾值
    }

    DateUtil(String dateStr, boolean ignoreTime){
        // 接收字符串類型參數(shù)，及是否忽略時間部分的布爾值
    }
}

而在 JavaScript 中，我們的構(gòu)造函數(shù)只有一個，因此我們經(jīng)常這樣設(shè)計不同參數(shù)的可配置對象：接收統(tǒng)一的參數(shù) options 對象，將需要傳遞的參數(shù)作為 options 對象的屬性。在構(gòu)造中斷言屬性的有效性：

class DateUtil{
                 
    constructor(options) {
        // 獲取參數(shù)
        const {date , ignoreTime} = options;
        // 緩存日期對象
        this.date = typeof date === 'string'? new Date(date): date;
        if(this.date == 'Invalid Date'){
            throw '日期參數(shù)只能是有效格式的字符串或Date對象!';
        }
        // 緩存 是否忽略時間 的狀態(tài)
        this.ignoreTime = (ignoreTime === true);
    }
                 
    // 按照 yyyy-MM-dd HH:mm:ss 格式輸出字符串
    formart(){
        const d = this.date;
        // 日期部分?jǐn)?shù)據(jù)集合
        const leftDate = [d.getFullYear(), d.getMonth()+1, d.getDate()];
        
        // 檢查是否需要補零的函數(shù)
        const checkFormart = e => (''+e)[1]?(''+e):('0'+e);
        // 緩存日期部分的格式化字符串
        let result = leftDate.map( checkFormart ).join('-');
        // 根據(jù)是否忽略時間部分做為判斷
        if(!this.ignoreTime){
            // 時間部分?jǐn)?shù)據(jù)集合
            const rightDate = [d.getHours(), d.getMinutes(), d.getSeconds()];
            result = result.concat(' ')
                .concat(rightDate.map(checkFormart).join(':'));
        }
        return result;  
    }
}

而調(diào)用過程就變成了：

const d1 = new DateUtil( {date: new Date()});
d1.formart(); // 結(jié)果: "2018-12-23 12:47:17"

const d2 = new DateUtil( {date: new Date(), ignoreTime: true});
d1.formart(); // 結(jié)果: "2018-12-23"

這樣的設(shè)計過程也符合柯里化標(biāo)準(zhǔn)，接收單一參數(shù)，使得調(diào)用過程變得更加單純。

5.5 更多對象關(guān)系維護——模塊化

? ? ? ?通過將粒度比較小的函數(shù)進行封裝，我們得到的是粒度更大一些的對象模型。而很多時候，我們需要完整的實現(xiàn)一個較為復(fù)雜的功能，就沒法單靠一個對象模型承擔(dān)所有任務(wù)了。我們可能需要構(gòu)建更多的對象模型或者更多的獨立函數(shù)，完成整體業(yè)務(wù)流程的調(diào)動關(guān)系。
? ? ? ?這種復(fù)雜的調(diào)動關(guān)系會形成一個完整的應(yīng)用，很多插件的設(shè)計基準(zhǔn)就來源于此。

立即執(zhí)行函數(shù) (IIFE)

? ? ? ?在 JavaScript 中，通過 匿名函數(shù) 及 函數(shù)表達(dá)式 的組合，我們可以構(gòu)建一個 立即執(zhí)行函數(shù)（IIFE）：

const foo = (function(){
    return 29;
})();

console.log( foo ); // 結(jié)果: 29

變量 foo 得到了匿名函數(shù)執(zhí)行的返回值，因此賦值符右側(cè)部分的函數(shù)并不僅僅是在聲明，而是在聲明之后立即執(zhí)行。立即執(zhí)行函數(shù) (IIFE) 主要的兩個優(yōu)勢是：

• 隔離外部作用域的全局變量，保持函數(shù)內(nèi)部的純凈；
• 立即執(zhí)行產(chǎn)生結(jié)果，減少不必要的重復(fù)聲明；

在 jQuery 的插件設(shè)計中，我們經(jīng)常使用這種設(shè)計方式，常見的如：

<!-- 網(wǎng)頁部分 -->
<input type="text" name="birthday" value="2018-9-2" />

// javascript 插件設(shè)計及依賴部分
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/date-util.js" type="text/javascript"></script>
<script type="text/javascript">
    // 插件用于為 jQuery 對象添加格式化日期值的方法
    (function($){
        $.fn.extend({
            formartDate: function(){
                const v = this.val();
                if( v ){
                    const dutil = new DateUtil({date: v});
                    this.val( dutil.formart() );
                }
            }
        });
    })(jQuery);
</script>

// 插件應(yīng)用部分，輸入框失去焦點時嘗試格式化值
$(':text[name="birthday"]').on('blur', function(e){
    $(this).formartDate();
});

在這個簡單插件的設(shè)計過程中，我們通過 IIFE 函數(shù)確保了插件作用域中的 $ 變量一定是指 jQuery 對象，而不必?fù)?dān)心全局環(huán)境或者其他的插件引用會覆蓋 $ 的值。并且調(diào)用了前邊例子中的日期工具，用以對輸入框的值進行格式化。

緩存執(zhí)行結(jié)果

? ? ? ?閉包最大的作用，便是緩存函數(shù)中的執(zhí)行結(jié)果，以便調(diào)用方多次引用，提高執(zhí)行效率。我們將上述插件做一個改造，構(gòu)建一個將 <div> 標(biāo)簽渲染成為一個表格的插件，代碼如下：

<!-- index.html 部分 -->
<div id="box-1"></div>

/** b-table.css 部分 **/
div{
    box-sizing: border-box;
}

.b-table{
    width: 500px;
    border: 1px solid #eee;
}

.b-table .row{
    height: 30px;
    line-height: 30px;
}

.b-table .row:nth-child(even){
    background-color: antiquewhite;
}

.b-table .row .cols{
    display: inline-block;
    float: left;
    text-align: center;
}

// 獨立的 jQuery 插件 build-table.js
(function($) {
    
    class Table{
        constructor({el, data}) {
            this.el = el;
            this.data = data;
            // 為當(dāng)前調(diào)用者添加插件定義的類樣式
            this.el.addClass('b-table');
        }
        
        rander(newData){
            // rander() 也可以接收新的數(shù)據(jù)重新渲染
            const data = newData || this.data;
            // 計算最大列數(shù)
            const colsWidth = data.reduce( (prev, curr) => Math.max(Array.isArray(prev)? prev.length: prev, curr.length) );
            // 計算列寬百分比, 動態(tài)調(diào)整樣式
            const colsWidthPercent = (100 / colsWidth) + '%';
            // 生成用于渲染的 html 文本
            const tableHtml = data.map( r => `<div class="row">${r.map( c => '<div class="cols" style="width:'+colsWidthPercent+';">'+c+'</div>' ).join('')}</div>`);
            // 為緩存的 el 元素渲染內(nèi)容
            this.el.html(tableHtml);
        }
    }
    
    // 為 jQuery 對象添加插件方法
    $.fn.extend({
        buildTable: function(data) {
            // 創(chuàng)建 Table 實例,傳入配置項
            const t = new Table({el: this, data});
            // 調(diào)用渲染方法
            t.rander();
            // 返回當(dāng)前的 Table 實例以便后續(xù)調(diào)用
            return t;
        }
    });
    
})(jQuery);

最后是執(zhí)行部分：

// index.html 中的js部分
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/build-table.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    // 構(gòu)建一個二維表數(shù)據(jù)用以渲染表格      
    const arr1 = [
        ['a', 'b', 'c', 'd'],
        ['e', 'f', 'g', 'h'],
        ['i', 'j', 'k'],
        ['l', 'm', 'n', 'o', 'p'],
    ];
    
    // 渲染后, 變量 box1 獲取了插件閉包中返回的緩存數(shù)據(jù)
    const box1 = $('#box-1').buildTable(arr1);
</script>

渲染效果(將一個div變成了一個表格的樣式)：

image

而當(dāng)我們需要動態(tài)更新表格時，便可以使用變量 box1 進行重新渲染，而不需要再次指定該元素是哪個 div 元素：

// 為原始的 arr1 添加新數(shù)據(jù)
arr1.push(['q', 'r', 's', 't', 'u', 'v', 'w']);
// 重新將 arr1 數(shù)據(jù)渲染至 box1 指向的頁面元素
box1.rander(arr1);

渲染結(jié)果:

image

所謂模塊化，即是指在解決復(fù)雜問題時，由上自下的將問題進行拆解，例如一些插件設(shè)計的目的即是為了提高可重用性。我們可以將若干功能拆解成為功能獨立的小模塊，互相嵌套引用。閉包則是拆解過程中常用的技巧。在更為復(fù)雜的模塊設(shè)計中，一個閉包中涉及到的對象、函數(shù)調(diào)用關(guān)系會更為復(fù)雜的多，示例中僅僅希望以最簡單的形式表達(dá)一些調(diào)用關(guān)系。