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

今天繼續(xù)來學習 《JavaScript 設計模式》的第二篇 創(chuàng)建型設計模式 的 剩余兩個章節(jié)。

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

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

第二篇 創(chuàng)建型設計模式

創(chuàng)建型設計模式是一類處理對象創(chuàng)建的設計模式。

通過某種方式控制對象的創(chuàng)建來避免基本對象創(chuàng)建時可能導致設計上的問題或增加設計上的復雜度。

第 8?章 一個人的寂寞——單例模式

單例模式（Singleton）：又被成為單體模式，是只允許實例化一次的對象類。有時我們也用一個對象來規(guī)劃一個命名空間，井井有條地管理對象上的屬性與方法。

實際上這里的單例模式的內(nèi)容，就是我們第一章學的把對象集合起來用。

8.1、滑動特效（P61）

這里作者又化身小白了。為了實現(xiàn)滑動特效的方法，又定義了很多屬性和函數(shù)。

function getE(id) {

return document.getElementBy(id);

}

function css(id, key, value) {

// 簡單樣式屬性設置

getE(id).style[key] = value;

}

function attr(id, key, value) {

// 簡單樣式屬性設置

getE(id)[key] = value;

}

這樣就又在頁面中添加了很多變量了。我們可以用單例模式解決。

8.2、命名空間的管理員（P62）

類似 JQuery，就是使用了單例模式。它的變量都放到了 JQuery 命名空間下。

命名空間就是人們常說的 namespace。它是語義化的空間，因為每個人直接定義的方法、屬性名可能是一樣的，所以會重復，但是可以放到各自的命名空間下， 以點語法訪問，這樣就能解決重復的問題。比如 小張的命名空間： xiaozhang 命名空間。

上面的改成這樣的就可以。

var d1n910 = {

getE: function (id) {

return document.getElementBy(id);

}

css: function (id, key, value) {

// 簡單樣式屬性設置

this.getE(id).style[key] = value;

}

attr: function(id, key, value) {

// 簡單樣式屬性設置

this.getE(id)[key] =?value;

}

}

上面注意了，內(nèi)部使用對象的方法時，前面要加 this。

8.3、模塊分明（P63）

模塊分明的意思時，命名空間下還可以定義各個模塊，對應功能放到對應模塊內(nèi)。

比如 baidu 的命名空間是 baidu，那么一些元素相關的方法，放到 dom 對象屬性下， 事件相關的方法放到 event 對象屬性下

baidu.dom.addClass

baidu.event.stopPropagation

8.4、創(chuàng)建一個小型代碼庫（P63）

所以以后我們寫自己的小型方法庫的時候也可以用單例模式來規(guī)范我們i自己代碼庫的各個模塊。

例子：

var A = {

Util: {

um1: function(){},

um2: function(){}

},

Ajax: {

post: function() {},

get: function()?{}

}

}

使用方式

A.Ajax.post()

8.5、無法修改的靜態(tài)變量（P64）

我們還可以利用單例模式 + 閉包實現(xiàn)靜態(tài)變量，即只能夠訪問不能夠修改的變量。這里的靜態(tài)變量名要全大寫，是因為所有編程語言中靜態(tài)變量都要大寫，你不大寫，被綁上去燒的棍子等著你。

這些我們在之前的例子中也提到過。

var Conf = (function () {

var conf = {

MAX_NUM: 100,

MIN_NUM: 0

}

return {

get: function(name) {

return conf[name] || null

}

}

})()

Conf.get('MAX_NUM') // 100

這個單例可以放到全局空間作為靜態(tài)變量單例供其他人使用。

8.6、惰性單例（P65）

單例在創(chuàng)建后，就會在內(nèi)存中一直存在我們的靜態(tài)變量。

惰性單例就是希望在頁面實際使用了單例以后，才在內(nèi)存中創(chuàng)建變量。

// 惰性載入單例

var Conf = (function () {

// 單例實例引用

var _instance = null;

function Conf()?{

return {

MAX_NUM: 100,

MIN_NUM: 0

}

}

return function() {

if (!_instance) {

_instance = Conf();

}

// 返回單例

return?_instance;

}

})()

Conf().MAX_NUM // 100

本章 End

蛋糕于2021/02/16在福永