资讯专栏INFORMATION COLUMN

JavaScript设计模式与开发实践 - 单例模式

QiShare / 810人阅读

摘要:引言本文摘自设计模式与开发实践在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

引言

</>复制代码

  1. 本文摘自《JavaScript设计模式与开发实践》

在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的window对象等。

模式定义

保证一个类仅有一个实例,并提供一个访问它的全局访问点。

模式实现 接近传统面向对象语言的实现

下面的实现是接近传统面向对象语言中的实现,单例对象从“类”中创建而来。在以类为中心的语言中,这是很自然的做法。比如在Java中,如果需要某个对象,就必须先定义一个类,对象总是从类中创建而来的。

</>复制代码

  1. // 创建div类:CreateDiv
  2. var CreateDiv = function(html) {
  3. this.html = html;
  4. this.init();
  5. };
  6. CreateDiv.prototype.init = function() {
  7. var div = document.createElement("div");
  8. div.innerHTML = this.html;
  9. document.body.appendChild(div);
  10. };
  11. // 代理类:proxySingletonCreateDiv,这里引进代理类,是为了将创建div与单例的实现分离开来,方便扩展
  12. var ProxySingletonCreateDiv = (function() {
  13. var instance;
  14. return function(html) {
  15. if (!instance) {
  16. instance = new CreateDiv(html);
  17. }
  18. return instance;
  19. }
  20. })();
  21. var a = new ProxySingletonCreateDiv("sven1");
  22. var b = new ProxySingletonCreateDiv("sven2");
  23. console.log(a === b); // ture
运用JavaScript特性的实现

JavaScript其实是一门无类(class-free)语言,也正因为如此,生搬单例模式的概念并无意义。在JavaScript中创建对象的方法非常简单,既然我们只需要一个“唯一”的对象,为什么要为它先创建一个“类”呢?这无异于穿棉衣洗澡,传统的单例模式实现在JavaScript中并不适用。

单例模式的核心是确保只有一个实例,并提供全局访问。因此在JavaScript里把全局变量当成单例来使用,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。

在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法:

</>复制代码

  1. var mySingleton = {
  2. property1: "something",
  3. property2: "something else",
  4. method1: function() {
  5. console.log("hello world");
  6. }
  7. };

如果以后要扩展该对象,你可以添加自己的私有成员和方法,然后使用闭包在其内部封装这些变量和函数声明。只暴露你想暴露的public成员和方法,样例代码如下:

</>复制代码

  1. var mySingleton = function() {
  2. /// 这里声明私有变量和方法
  3. var privateVariable = "something private";
  4. function showPrivate() {
  5. console.log(privateVariable);
  6. }
  7. // 公有变量和方法(可以访问私有变量和方法)
  8. return {
  9. publicMethod: function() {
  10. showPrivate();
  11. },
  12. publicVar: "the public can see this!"
  13. };
  14. };
  15. var single = mySingleton();
  16. single.publicMethod(); // 输出 "something private"
  17. console.log(single.publicVar); // 输出 "the public can see this!"

当然,为了节约资源的目的,我们可以只在使用的时候才初始化该单例,实现的方式就是在另一个方法中进行初始化:

</>复制代码

  1. var Singleton = (function() {
  2. var instantiated;
  3. function init() {
  4. // 这里定义单例代码
  5. return {
  6. publicMethod: function() {
  7. console.log("hello world");
  8. },
  9. publicProperty: "test"
  10. };
  11. }
  12. return {
  13. getInstance: function() {
  14. if (!instantiated) {
  15. instantiated = init();
  16. }
  17. return instantiated;
  18. }
  19. };
  20. })();
  21. // 调用公有的方法来获取实例
  22. Singleton.getInstance().publicMethod();
其它实现 方法1

</>复制代码

  1. function Universe() {
  2. // 判断是否存在实例
  3. if (typeof Universe.instance === "object") {
  4. return Universe.instance;
  5. }
  6. // 其它内容
  7. this.start_time = 0;
  8. this.bang = "Big";
  9. // 缓存
  10. Universe.instance = this;
  11. // 隐式返回this
  12. }
  13. // 测试
  14. var uni = new Universe();
  15. var uni2 = new Universe();
  16. console.log(uni === uni2); // true
方法2

</>复制代码

  1. function Universe() {
  2. // 缓存的实例
  3. var instance = this;
  4. // 其它内容
  5. this.start_time = 0;
  6. this.bang = "Big";
  7. // 重写构造函数
  8. Universe = function() {
  9. return instance;
  10. };
  11. }
  12. // 测试
  13. var uni = new Universe();
  14. var uni2 = new Universe();
  15. uni.bang = "123";
  16. console.log(uni === uni2); // true
  17. console.log(uni2.bang); // 123
方法3

</>复制代码

  1. function Universe() {
  2. // 缓存实例
  3. var instance;
  4. // 重新构造函数
  5. Universe = function Universe() {
  6. return instance;
  7. };
  8. // 后期处理原型属性
  9. Universe.prototype = this;
  10. // 实例
  11. instance = new Universe();
  12. // 重设构造函数指针
  13. instance.constructor = Universe;
  14. // 其它功能
  15. instance.start_time = 0;
  16. instance.bang = "Big";
  17. return instance;
  18. }
  19. // 测试
  20. var uni = new Universe();
  21. var uni2 = new Universe();
  22. console.log(uni === uni2); // true
  23. // 添加原型属性
  24. Universe.prototype.nothing = true;
  25. var uni = new Universe();
  26. Universe.prototype.everything = true;
  27. var uni2 = new Universe();
  28. console.log(uni.nothing); // true
  29. console.log(uni2.nothing); // true
  30. console.log(uni.everything); // true
  31. console.log(uni2.everything); // true
  32. console.log(uni.constructor === Universe); // true
方式4

</>复制代码

  1. var Universe;
  2. (function () {
  3. var instance;
  4. Universe = function Universe() {
  5. if (instance) {
  6. return instance;
  7. }
  8. instance = this;
  9. // 其它内容
  10. this.start_time = 0;
  11. this.bang = "Big";
  12. };
  13. }());
  14. //测试代码
  15. var a = new Universe();
  16. var b = new Universe();
  17. alert(a === b); // true
  18. a.bang = "123";
  19. alert(b.bang); // 123

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89807.html

相关文章

  • JavaScript设计模式开发实践系列之单例模式

    摘要:本系列为设计模式与开发实践作者曾探学习总结,如想深入了解,请支持作者原版单例模式实现单例模式单例模式的定义是保证一个类仅有一个实例,并提供一个访问它的全局访问点。 本系列为《JavaScript设计模式与开发实践》(作者:曾探)学习总结,如想深入了解,请支持作者原版 单例模式 实现单例模式 单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式是一种常用的模式...

    Airy 评论0 收藏0
  • JavaScript设计模式开发实践 | 04 - 单例模式

    摘要:观察构造函数的代码,该构造函数实际上负责了两件事情第一是创建对象和执行初始化方法,第二是保证只有一个对象。惰性单例在实际开发中非常有用,是单例模式的重点。 单例模式 单例模式的定义是: 保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器的window对象等。例如,当我们点击登录按钮时,页面会弹出一...

    awkj 评论0 收藏0
  • javascript设计模式开发实践全书深度解析(一)之单例模式

    摘要:所以程序在引入文件的时候用了单例模式,一个文件实例化一次,这种做法无疑是好的,但是也容易引起。在我们平时的开发过程中,可以借鉴这两种方式去缓存变量,节点等。 这一章作者讲了一个例子,就是在用单例模式生成一个dom节点,还要做到只有访问的时候才创建,后续访问直接用前面创建的。那么实际开发中我们会用到这个模式吗?现在我们基本都是用vue,react,angular开发,不太会直接去操作do...

    xioqua 评论0 收藏0
  • JavaScript设计模式开发实践》读书笔记

    摘要:订阅模式的一个典型的应用就是后面会写一篇相关的读书笔记。享元模式享元模式的核心思想是对象复用,减少对象数量,减少内存开销。适配器模式对目标函数进行数据参数转化,使其符合目标函数所需要的格式。 设计模式 单例模式 JS的单例模式有别于传统面向对象语言的单例模式,js作为一门无类的语言。使用全局变量的模式来实现单例模式思想。js里面的单例又分为普通单例和惰性单例,惰性单例指的是只有这个实例...

    Panda 评论0 收藏0
  • JavaScript 设计模式(一):单例模式

    摘要:停更许久,近期计划更新设计模式系列。单例模式是创建型设计模式的一种。虽然它不是正规的单例模式,但不可否认确实具备类单例模式的特点。适用场景单例模式的特点,意图解决维护一个全局实例对象。 停更许久,近期计划更新:设计模式系列。 showImg(https://segmentfault.com/img/bVbt7uw?w=800&h=600); 单例模式:限制类实例化次数只能一次,一个类只...

    xialong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<