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

今天继续来学习 《JavaScript 设计模式》的第二篇 创建型设计模式 的 剩余两个章节。

这是一个连续的读书笔记，所以如果你之前的内容没有看的话，可以去看看。

这里再次感谢 《Javascript 设计模式》及其作者 张荣铭，专栏内容是在它的基础上生成的。

第二篇 创建型设计模式

创建型设计模式是一类处理对象创建的设计模式。

通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。

第 8 章 一个人的寂寞——单例模式

单例模式（Singleton）：又被成为单体模式，是只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间，井井有条地管理对象上的属性与方法。

实际上这里的单例模式的内容，就是我们第一章学的把对象集合起来用。

8.1、滑动特效（P61）

这里作者又化身小白了。为了实现滑动特效的方法，又定义了很多属性和函数。

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;

}

}

上面注意了，内部使用对象的方法时，前面要加 this。

8.3、模块分明（P63）

模块分明的意思时，命名空间下还可以定义各个模块，对应功能放到对应模块内。

比如 baidu 的命名空间是 baidu，那么一些元素相关的方法，放到 dom 对象属性下， 事件相关的方法放到 event 对象属性下

baidu.dom.addClass

baidu.event.stopPropagation

8.4、创建一个小型代码库（P63）

所以以后我们写自己的小型方法库的时候也可以用单例模式来规范我们i自己代码库的各个模块。

例子：

var A = {

Util: {

um1: function(){},

um2: function(){}

},

Ajax: {

post: function() {},

get: function() {}

}

}

使用方式

A.Ajax.post()

8.5、无法修改的静态变量（P64）

我们还可以利用单例模式 + 闭包实现静态变量，即只能够访问不能够修改的变量。这里的静态变量名要全大写，是因为所有编程语言中静态变量都要大写，你不大写，被绑上去烧的棍子等着你。

这些我们在之前的例子中也提到过。

var Conf = (function () {

var conf = {

MAX_NUM: 100,

MIN_NUM: 0

}

return {

get: function(name) {

return conf[name] || null

}

}

})()

Conf.get('MAX_NUM') // 100

这个单例可以放到全局空间作为静态变量单例供其他人使用。

8.6、惰性单例（P65）

单例在创建后，就会在内存中一直存在我们的静态变量。

惰性单例就是希望在页面实际使用了单例以后，才在内存中创建变量。

// 惰性载入单例

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在福永