正常操作，正常分析，大家好，我是D1n910。

今天繼續(xù)來學習 《JavaScript 設計模式》的第三篇 結構型設計模式

這是一個連續(xù)的讀書筆記，所以如果你之前的內(nèi)容沒有看的話，可以去看看。

這里再次感謝 《Javascript 設計模式》及其作者 張榮銘，專欄內(nèi)容是在它的基礎上生成的。

其實學到現(xiàn)在，會發(fā)現(xiàn)自己已經(jīng)用到過這里面很多種設計模式了，這些都是上學上課、平時學習以及看之前大佬的代碼耳濡目染的。

所以會有比較多的熟悉感，大家看到對應的模式的話，可以多思考一下平常自己是怎么用的，具體場景是怎么使用的。

第三篇 結構型設計模式

結構型設計模式關注于如何將類或者對象組合成更大、更復雜的結構，以簡化設計。

第 10 章 水管彎彎 —— 適配器模式（P73）

適配器模式（Adapter）：將一個類（對象）的接口（方法或者屬性）轉(zhuǎn)換成另一個接口，以滿足用戶需求，使類（對象）之間的接口的不兼容問題通過適配器得以解決。

（聽起來有點像外觀模式）

10.1、引入 JQuery（P73）

公司里有自己使用的內(nèi)部框架 A，想要引入鼎鼎有名的框架 JQuery。

考慮之前用 A 寫的代碼是不是要重新用 JQuery 寫一遍，比如：

A(function () {

A('button').on('click', function(e) {

// do something……

});

})

其實只需要寫適配器就行。

10.2、生活中的適配器（P73）

以充電器為例子，不同地區(qū)的電壓不同，所以通用的充電插頭也不同，插座的插孔數(shù)也不同，地區(qū)A的兩孔充電插頭想要使用地區(qū)B的三孔插座，會用到適配器轉(zhuǎn)換插座。

這里的適配器也是同樣的道理。

10.3、JQuery 適配器（P74）

比如上面的框架 A 的公司框架，因為用法太像 Jquery 了，所以可以直接這么適配好。

window.A = A = Jquery

10.4、適配異形框架（P74）

在這里適配的概念就是把我們的代碼里的內(nèi)容轉(zhuǎn)成我們要用到的框架的。

比如假如?A 框架沒有和 Jquery 使用方式一致，而是像下面這樣的內(nèi)容。

?var A = A || {};

A.g = function(id) {

return typeof id === 'string' ? document.getElementById(id) : id

}

// 為元素綁定事件（外觀模式）

A.on = function(id, type, fn) {

var dom = this.g(id)

// 對于支持 DOM2 級事件處理程序 addEventListener 方法的瀏覽器

if (dom.addEventListener) {

dom.addEventListener(type, fn, false);

// 對于不支持 addEventListener 方法但支持 attachEvent 方法的瀏覽器

} else if (dom.attachEvent) {

dom.attachEvent('on' + type, fn);

} else {

dom['on'+ type] = fn

}

}

// 用法

A.on(window, 'load', function () {

A.on('mybutton', 'click', function () {})

})

那么改成 Jquery，就是原來的用法還是照樣用，但是方法本身改成 Jquery 了。

A.g = function(id) {

return typeof id === 'string' ? $('#' + id) : $(id);

}

A.on?= function(id, type, fn) {

var?dom = this.g(id)

dom.on(type, fn)

}

這樣我們這種異形的情況下的適配器就寫好了。

所以不是到了萬不得已的情況下，我們就不要引入不太相似的框架。這樣方便適配。

10.5、參數(shù)適配器（P75）

適配器還有很多別的用途，比如我們原來的方法可能是這么寫的。

function dosomething(id, name, age, time, like, weiboId, bilibiliId, baiduId) {

// do something

}

使用這個方法我們要傳入大量的參數(shù)時還要記住參數(shù)的前后順序，是比較麻煩的，我們可以改成對象傳參的使用的方式。

function dosomethingAdapter(obj) {

dosomething(obj.id, obj.name, obj.age, obj.time, obj.like, obj.weiboId,?obj.bilibiliId,?obj.baiduId);

}

當然了，我們也可以適配一下需要默認值的情況。(當然了，當然了，新的 ES6 有更好的方式)

function dosomethingAdapter(obj) {

obj =?obj || {}

var defaultObj = {

id: '',

name: '',

age: '',

time: '',

like:?'',

weiboId:?'',

bilibiliId:?'',

baiduId:?''

}

for (var i in defaultObj) {

obj[i] = obj[i] || defaultObj[i]

}

dosomething(obj.id, obj.name, obj.age, obj.time, obj.like, obj.weiboId,?obj.bilibiliId,?obj.baiduId);

}

很多插件對于參數(shù)配置都是這么做的。

10.6、數(shù)據(jù)適配（P76）

我們也可以對于數(shù)據(jù)做專門的適配器。

比如像下面這一組數(shù)據(jù)

?var arr =?['JavaScript', 'book', '前端編程語言', '8月1日']

這種數(shù)據(jù)結構語義不好，我們就可以像下面這樣得到可用性強的對象形式。

function arrToObjAdapter(arr) {

return {

name: arr[0],

type: arr[1],

title: arr[2],

data: arr[3]

}

}

arrToObjAdapter(arr); // {name: "JavaScript", type: "book", title: "前端編程語言", data: "8月1日"}

（感覺emmm，好像過于簡單了，不過養(yǎng)成這種弄成對象的結構總是好的）

10.7、服務器端數(shù)據(jù)適配（P77）

這個就更令人xxdd了。

實際上就是后端同學非要改接口返回的數(shù)據(jù)格式，嵌套格式怎么辦，最好就不要跟著把我們原來的方法也進行修改了。而應該通過一個適配器轉(zhuǎn)換成原函數(shù)要的數(shù)據(jù)。

本章節(jié) End

學習進度（10/40）

本來想看看第11章的代理模式是啥的，覺得好像很簡單的樣子，確實很簡單，但是作者這描述出來的內(nèi)容，讓我理解不能，所以下面會跳過第11章，等我睡一覺清醒后再看一遍，看看能不能看懂！

D1n910 于 2020年02月19日20:20 在 福永