三河市城乡建设局网站,cms网站模板套用教程,wordpress 模版开发,橙 建网站JavaScript单例模式 1 什么是单例模式2 实现一个基础的单例模式3 透明的单例模式4 用代理实现单例模式5 JavaScript 中的单例模式6 惰性单例 1 什么是单例模式
保证一个类只有一个实例#xff0c;并提供一个访问它的全局访问点#xff0c;这就是单例模式。
单例模式是一种常… JavaScript单例模式 1 什么是单例模式2 实现一个基础的单例模式3 透明的单例模式4 用代理实现单例模式5 JavaScript 中的单例模式6 惰性单例 1 什么是单例模式
保证一个类只有一个实例并提供一个访问它的全局访问点这就是单例模式。
单例模式是一种常用的模式有一些对象我们往往只需要一个比如window对象、全局缓存等。
2 实现一个基础的单例模式
根据单例模式的特点在实现单例模式时我们要保证某个类只能创建一个实例对象那么实现的基本思路就是用一个变量标识当前是都已经为某个类创建过对象如果是在下一次获取该类的实例时直接返回之前创建的对象否则创建一个新对象示例代码如下
// 定义一个构造函数MyExample定义属性name与instance
function MyExample(name) {this.name name;this.instance null;
}
// 在原型上定义getName方法
MyExample.prototype.getName function () {console.log(this.name);
};
// 为构造函数定义getInstance方法用来获取类的实例
MyExample.getInstance function (name) {// 标识是否创建了实例如果没有赋值为新的实例如果已经创建返回原来的实例if (!this.instance) {this.instance new MyExample(name);}return this.instance;
};// 为MyExample类创建实例看似创建两个实例实际上都是同一个实例
var e1 MyExample.getInstance(example1);
var e2 MyExample.getInstance(example2);console.log(e1 e2); // true我们通过MyExample.getInstance来获取 MyExample类的唯一对象这种方式相对简单但有一个问题就是增加了这个类的“不透明性”MyExample类的使用者必须知道这是一个单例类跟以往通过new XXX的方式来获取对象不同。
3 透明的单例模式
在上一步中由于该类的“不透明性”用户在使用时会有一些困难因此在本节中实现一个“透明”的单例类让用户在使用这个类创建对象时可以和使用其他普通类一样。
接下来实现一个单例类CreateDiv这个类的作用是在页面创建唯一的div节点代码如下
var CreateDiv (function () {var instance; // 标识是否创建过实例// 创建CreateDiv类var CreateDiv function (html) {// 如果已经创建过实例返回当前实例if (instance) {return instance;}// 如果没有创建实例。创建一个div元素并返回this.init();this.html html;return (instance this);};// 定义init方法目的是创建一个div元素元素内容由我们自己定义CreateDiv.prototype.init function () {var div document.createElement(div);div.innerHTML this.html;document.body.appendChild(div);};return CreateDiv;
})();var e1 new CreateDiv(example1);
var e2 new CreateDiv(example2);console.log(e1 e2); // true虽然现在完成了一个透明的单例类的编写但它同样有一些缺点为了把instance封装起来使用了自执行的匿名函数和闭包并且让这个匿名函数返回真正的构造方法复杂度高可读性也变差了。
4 用代理实现单例模式
在上面的例子中假设我们某天需要利用这个类在页面中创建千千万万的div即要让这个类从单例类变成一个普通的可产生多个实例的类那我们必须得改写CreateDiv构造函数这种修改会给我们带来不必要的烦恼因此我们通过引入代理类的方式来解决这个问题
首先在CreateDiv构造函数中把负责管理单例的代码提出来使它成为一个普通的创建div的类
var CreateDiv function (html) {this.html html;this.init();
};CreateDiv.prototype.init function () {var div document.createElement(div);div.innerHTML this.html;document.body.appendChild(div);
};接下来引入代理类proxySingletonCreateDiv
var ProxySingletonCreateDiv (function () {var instance;return function (html) {if (!instance) {instance new CreateDiv(html);}return instance;};
})();var e1 new ProxySingletonCreateDiv(example1);
var e2 new ProxySingletonCreateDiv(example2);console.log(e1 e2); // true上面的例子通过引入代理类的方式完成了一个单例模式的改写与之前不同的是现在把负责管理单例的逻辑移到了代理类proxySingletonCreateDiv中。这样一来CreateDiv就变成了一个普通的类它跟 proxySingletonCreateDiv组合起来可以达到单例模式的效果。
5 JavaScript 中的单例模式
前面提到的几种单例模式的实现更多的是接近传统面向对象语言中的实现单例对象从“类”中创建而来在以类为中心的语言中这是很自然的做法。比如在Java中如果需要某个对象就必须先定义一个类对象总是从类中创建而来的。
但JavaScript其实是一门无类语言创建对象的方法非常简单既然我们只需要一个“唯一”的对象为什么要为它先创建一个“类”呢传统的单例模式实现在JavaScript中并不适用。
单例模式的核心是确保只有一个实例并提供全局访问。
全局变量不是单例模式但在JavaScript开发中我们经常会把全局变量当成单例来使用。例如
var a {}; 当用这种方式创建对象a时对象a确实是独一无二的。如果a变量被声明在全局作用域下我们可以在代码中的任何位置使用这个变量这样就满足了单例模式的两个条件。但是全局变量存在很多问题它很容易造成命名空间污染。
我们可以采用以下几种方式降低全局变量带来的命名污染
1、使用命名空间适当地使用命名空间并不会杜绝全局变量但可以减少全局变量的数量最简单的方法依然是用对象字面量的方式
var namespace1 {a: function () {alert(1);},b: function () {alert(2);},
};2、使用闭包封装私有变量这种方法把一些变量封装在闭包的内部只暴露一些接口跟外界通信
var user (function () {var __name sven,__age 29;return {getUserInfo: function () {return __name - __age;},};
})();我们用下划线来约定私有变量__name和__age它们被封装在闭包产生的作用域中外部是访问不到这两个变量的这就避免了对全局的命令污染。
6 惰性单例
惰性单例指的是在需要的时候才创建对象实例。
惰性单例是单例模式的重点实例对象instance总是在我们调用MyExample.getInstance的时候才被创建而不是在页面加载好的时候就创建示例代码如下
MyExample.getInstance (function () {var instance null;return function (name) {if (!instance) {instance new MyExample(name);}return instance;};
})();
