本文实例讲述了JS 设计模式之:单例模式定义与实现方法。分享给大家供大家参考,具体如下:良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式。今天先从最简单的一个入手:单例模式。文中的示例代码会使用 ES6 语法,尽量简化不必要的细节概念单例模式(Singleton)属于创建型的设计模式,它限制我们只能创建单一对象或者某个类的单一实例。通常情况下,使用该模式是为了控制整个应用程序的状态。在日常的开发中,我们遇到的单例模式可能有:Vuex 中的 Store,Vue 的根实例,任何导出单个对象的 ES6 模块等。Vuex 中的 StoreVue 的根实例任何导出单个对象的 ES6 模块字面量写法最简单的单例其实就像下面这样:
const cat = {

name: 'mi',

age: 4
}
const cat = {

name: 'mi',

age: 4
}了解 const 语法的小伙伴都知道,这只喵是不能被重新赋值的,但是它里面的属性其实是可变的。const如果想要一个不可变的单例对象:
const cat = {

name: 'mi',

age: 4
}

Object.freeze(cat);
const cat = {

name: 'mi',

age: 4
}

Object.freeze(cat);这样就不能新增或修改这只喵上的任何属性,它变成了 冰冻喵~冰冻喵如果是在模块中使用,上面的写法并不会污染全局作用域,但是直接生成一个固定的对象缺少了一些灵活性。常用写法相对而言,使用类或工厂方法来实现单例更加常用。假设我们有一个叫作 Logger 的类,它具有和 Console 相同的 API。LoggerConsole类单例类的单例写法非常常用,如果我们想要这么使用它:
const logger = new Logger();
logger.log('msg');

// 这里大概写了 1000 行代码

const logger2 = new Logger();
logger.log('new msg');

logger === logger2; // true
const logger = new Logger();
logger.log('msg');

// 这里大概写了 1000 行代码

const logger2 = new Logger();
logger.log('new msg');

logger === logger2; // true即尽管 new 了多次 Logger,它返回的都是同一个实例。newLogger下面直接看最实用的实现方式:
class Logger {

constructor () {

if (!Logger._singleton) {

Logger._singleton = this;

}

return Logger._singleton;

}



log (...args) {

console.log(...args);

}
}

export default Logger;
class Logger {

constructor () {

if (!Logger._singleton) {

Logger._singleton = this;

}

return Logger._singleton;

}



log (...args) {

console.log(...args);

}
}

export default Logger;上面的方式将单例对象存储在了构造器上,这样的话不管 new Logger 多少次,返回的都是同一个 Logger 实例了。new Logger这里有一个细节需要注意,即 new 关键字后面的构造函数如果显式返回一个对象,new 表达式就会返回该对象。newnew具体可参见 《你不知道的 JavaScript (上卷)》中的 new 绑定 相关章节。new 绑定工厂单例如果不喜欢用 new 关键字,可以使用工厂方法返回单例对象。
let logger = null

class Logger {

log (...args) {

console.log(...args);

}
}

function createLogger() {

if (!logger) {

logger = new Logger();

}

return logger;
}

export default createLogger;
let logger = null

class Logger {

log (...args) {

console.log(...args);

}
}

function createLogger() {

if (!logger) {

logger = new Logger();

}

return logger;
}

export default createLogger;上面的代码相当于在模块内部缓存了 logger 实例,然后导出了一个工厂方法。这种写法在模块化代码中比较常见,工厂方法也可以接收参数用来初始化单例对象。今天的内容比较好理解,其中的单例写法也是笔者常用的方法。下一篇我们再具体讲讲工厂模式的应用~参考内容

《JavaScript 设计模式》

《JavaScript 面向对象编程指南》

《你不知道的 JavaScript (上卷)》

Working with Singletons in JavaScript
《JavaScript 设计模式》《JavaScript 面向对象编程指南》《你不知道的 JavaScript (上卷)》Working with Singletons in JavaScriptWorking with Singletons in JavaScript感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。