- 簡述
- 無副作用（No Side Effects）
- 高階函數(shù)（High-Order Function）
- 柯里化（Currying）
- 閉包（Closure）
-- JavaScript 作用域
-- 面向?qū)ο箨P(guān)系
-- this調(diào)用規(guī)則
-- 配置多樣化的構(gòu)造重載
-- 更多對象關(guān)系維護(hù)——模塊化
-- 流行的模塊化方案- 不可變（Immutable）
- 惰性計(jì)算（Lazy Evaluation）
- Monad
前言
? ? ? ?函數(shù)提供了一個封閉的、通用性很強(qiáng)的執(zhí)行空間菜秦，根據(jù)參數(shù)不同甜害，來締造不同的執(zhí)行結(jié)果。
? ? ? ?通過 JavaScript 作用域 球昨，我們了解了函數(shù)作用域的限制尔店，我們可以將什么樣的執(zhí)行結(jié)果交給函數(shù)的調(diào)用者。
? ? ? ?通過 面向?qū)ο箨P(guān)系 我們了解到了另一種封裝數(shù)據(jù)的方式——面向?qū)ο笤O(shè)計(jì)褪尝，可以幫助我們更準(zhǔn)確的定義同一種類型的數(shù)據(jù)模型闹获。
? ? ? ?通過對 this調(diào)用規(guī)則 的了解期犬，我們可以規(guī)避很多在 JavaScript 中設(shè)計(jì)函數(shù)或?qū)ο蟮目雍友疲鞔_當(dāng)前的封閉環(huán)境執(zhí)行過程。
? ? ? ?而接下來龟虎，我們繼續(xù)回到閉包構(gòu)想：如何進(jìn)一步延展我們的黑箱設(shè)計(jì)璃谨。
5.4 配置多樣化的構(gòu)造重載
? ? ? ?對象的設(shè)計(jì)往往主要需考慮實(shí)例之間的相似性，然而在應(yīng)用對象的過程中，我們又常常要明確每個對象之間的個體獨(dú)立性佳吞。因此面向?qū)ο蟮脑O(shè)計(jì)過程主要囊括以下兩個步驟：
- 抽象提取實(shí)例之間的共有屬性拱雏、共有行為（方法）；
- 為確保實(shí)例獨(dú)立性底扳，提供共有屬性不同的配置方式（賦值）铸抑；
? ? ? ?通常我們會在構(gòu)造函數(shù)中進(jìn)行一系列初始化行為，用以配置這個對象的使用方式衷模，入口依然是函數(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()];
// 檢查是否需要補(bǔ)零的函數(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() 方法用于對于緩存的時間進(jìn)行格式化字符串輸出刁憋。當(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é)果镊叁。一些強(qiáng)類型語言中提供了重載的嚴(yán)格語法尘颓，而在 JavaScript 中，函數(shù)參數(shù)要求非常寬松——你可以傳遞任意數(shù)量的實(shí)參晦譬，以及聲明任意數(shù)量的形參泥耀，即使他們在調(diào)用過程中發(fā)生了參數(shù)過剩或者參數(shù)缺失，也不會出現(xiàn)運(yùn)行時異常蛔添。
? ? ? ?假設(shè)現(xiàn)在又有一個需求：緩存一個是否只操作日期（忽略時間部分）的狀態(tài)痰催。在 Java 中我們可能會這樣設(shè)計(jì)這個類的構(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è)計(jì)不同參數(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()];
// 檢查是否需要補(bǔ)零的函數(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è)計(jì)過程也符合柯里化標(biāo)準(zhǔn)，接收單一參數(shù)足绅，使得調(diào)用過程變得更加單純捷绑。
5.5 更多對象關(guān)系維護(hù)——模塊化
? ? ? ?通過將粒度比較小的函數(shù)進(jìn)行封裝，我們得到的是粒度更大一些的對象模型氢妈。而很多時候粹污，我們需要完整的實(shí)現(xiàn)一個較為復(fù)雜的功能，就沒法單靠一個對象模型承擔(dān)所有任務(wù)了首量。我們可能需要構(gòu)建更多的對象模型或者更多的獨(dú)立函數(shù)壮吩，完成整體業(yè)務(wù)流程的調(diào)動關(guān)系进苍。
? ? ? ?這種復(fù)雜的調(diào)動關(guān)系會形成一個完整的應(yīng)用，很多插件的設(shè)計(jì)基準(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ì)中滤奈，我們經(jīng)常使用這種設(shè)計(jì)方式，常見的如：
<!-- 網(wǎng)頁部分 -->
<input type="text" name="birthday" value="2018-9-2" />
// javascript 插件設(shè)計(jì)及依賴部分
<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)用部分撩满，輸入框失去焦點(diǎn)時嘗試格式化值
$(':text[name="birthday"]').on('blur', function(e){
$(this).formartDate();
});
在這個簡單插件的設(shè)計(jì)過程中蜒程，我們通過 IIFE 函數(shù)確保了插件作用域中的 $ 變量一定是指 jQuery 對象，而不必?fù)?dān)心全局環(huán)境或者其他的插件引用會覆蓋 $ 的值伺帘。并且調(diào)用了前邊例子中的日期工具昭躺，用以對輸入框的值進(jìn)行格式化。
緩存執(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;
}
// 獨(dú)立的 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;
// 計(jì)算最大列數(shù)
const colsWidth = data.reduce( (prev, curr) => Math.max(Array.isArray(prev)? prev.length: prev, curr.length) );
// 計(jì)算列寬百分比, 動態(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 實(shí)例,傳入配置項(xiàng)
const t = new Table({el: this, data});
// 調(diào)用渲染方法
t.rander();
// 返回當(dāng)前的 Table 實(shí)例以便后續(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變成了一個表格的樣式)：
而當(dāng)我們需要動態(tài)更新表格時脚猾，便可以使用變量 box1 進(jìn)行重新渲染葱峡，而不需要再次指定該元素是哪個 div 元素：
// 為原始的 arr1 添加新數(shù)據(jù)
arr1.push(['q', 'r', 's', 't', 'u', 'v', 'w']);
// 重新將 arr1 數(shù)據(jù)渲染至 box1 指向的頁面元素
box1.rander(arr1);
渲染結(jié)果:
所謂模塊化，即是指在解決復(fù)雜問題時龙助，由上自下的將問題進(jìn)行拆解砰奕，例如一些插件設(shè)計(jì)的目的即是為了提高可重用性。我們可以將若干功能拆解成為功能獨(dú)立的小模塊提鸟，互相嵌套引用军援。閉包則是拆解過程中常用的技巧。在更為復(fù)雜的模塊設(shè)計(jì)中称勋，一個閉包中涉及到的對象胸哥、函數(shù)調(diào)用關(guān)系會更為復(fù)雜的多，示例中僅僅希望以最簡單的形式表達(dá)一些調(diào)用關(guān)系铣缠。
