个人网站搭建模拟感想,wordpress登陆后查看,网站友链查询源码,wordpress 作者文章数量单例模式 – 传统面向对象与JavaScript 的对比实现 文章目录 单例模式 -- 传统面向对象与JavaScript 的对比实现传统的面向对象的实现定义实现思路初级实现缺点 透明的单例模式实现目的#xff08;实现效果#xff09;实现缺点 用代理实现单例模式优点 JavaScript 中的单例模…单例模式 – 传统面向对象与JavaScript 的对比实现 文章目录 单例模式 -- 传统面向对象与JavaScript 的对比实现传统的面向对象的实现定义实现思路初级实现缺点 透明的单例模式实现目的实现效果实现缺点 用代理实现单例模式优点 JavaScript 中的单例模式实现实现一全局变量不推荐缺点 实现二惰性单例实现要点JavaScript 的 最终实现 应用场景 传统的面向对象的实现
定义
单例模式的定义是: 保证一个类仅有一个实例并提供一个访问它的全局访问点。
实现思路
用一个变量来标志当前是否已经为某个类创建过对象如果是则在下一次获取该类的实例时直接返回之前创建的对象。
初级实现 var Singleton function (name) {this.name name; this.instance null;};Singleton.prototype.getName function () {alert(this.name);};Singleton.getInstance function (name) {if (!this.instance) {this.instance new Singleton(name);}return this.instance;};const a Singleton.getInstance(sven1); const b Singleton.getInstance(sven2);alert(a b); // true缺点
类的不透明性
通过 Singleton.getInstance 来获取 Singleton 类的唯一对象这种方式相对简单但有 一个问题就是增加了这个类的“不透明性”Singleton 类的使用者必须知道这是一个单例类 跟以往通过 new XXX 的方式来获取对象不同这里偏要使用 Singleton.getInstance 来获取对象。 透明的单例模式实现
目的实现效果
我们现在的目标是实现一个“透明”的单例类用户从这个类中创建对象的时候可以像使 用其他任何普通类一样。 实现 const Singleton (function (name) {let instance;function createDiv(name) {if (instance) {return instance;}this.name name;this.init();return instance this;}createDiv.prototype.init function () {const div document.createElement(div);div.innerHTML this.name;document.body.appendChild(div);}return createDiv;})();const a new Singleton(sven1);const b new Singleton(sven2); 缺点
为了把 instance 封装起来我们使用了自执行的匿名函数和闭包并且让这个匿名函数返回真正的 Singleton 构造方法这增加了一些程序的复杂度阅读起来也不是很舒服。不符合单一职责不利于维护。构造函数实际上负责了两件事情。第一是创建对象和执行初始化 init 方法第二是保证只有一个对象。 用代理实现单例模式 const CreateDiv function (name) {this.name name;this.init();}CreateDiv.prototype.init function () {const div document.createElement(div);div.innerHTML this.name;document.body.appendChild(div);};const ProxySingletonCreateDiv (function () {let instance;return function (name) {if (!instance) {instance new CreateDiv(name);}return instance;}})();const a new ProxySingletonCreateDiv(seven1);const b new ProxySingletonCreateDiv(seven2);alert(a b);优点
跟之前不同的是现在我们把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv 中。这样一来CreateDiv 就变成了 一个普通的类它跟 proxySingletonCreateDiv 组合起来可以达到单例模式的效果。 JavaScript 中的单例模式实现
以上提到的几种单例模式的实现更多的是接近传统面向对象语言中的实现单例对象从 “类”中创建而来。在以类为中心的语言中这是很自然的做法。比如在 Java 中如果需要某个对象就必须先定义一个类对象总是从类中创建而来的。 但 JavaScript 其实是一门无类(class-free)语言
单例模式的核心是确保只有一个实例并提供全局访问。 实现一全局变量不推荐
如果 a 变量被声明在全局作用域下 则我们可以在代码中的任何位置使用这个变量全局变量提供给全局访问是理所当然的。这样就 满足了单例模式的两个条件。
缺点
全局变量存在很多问题它很容易造成命名空间污染 实现二惰性单例
惰性单例指的是在需要的时候才创建对象实例 如 上面初级实现中 instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建而不是在页面加载好 的时候就创建
实现要点
使用惰性单例需要的时候才创建把不变的部分隔离出来。先不考虑创建一个 div 和创建一个 iframe 有多少差异抽离管理单例的逻辑这个逻辑始终是一样的: 用一个变量来标志是否创建过对象如果是则在下次直接返回这个已经创建好的对象:
JavaScript 的 最终实现 var getSingle function (fn) {var result;return function () {return result || (result fn.apply(this, arguments));}};var createSingleIframe getSingle(function () {var iframe document.createElement(iframe);document.body.appendChild(iframe);return iframe; 6});document.getElementById(loginBtn).onclick function () {var loginLayer createSingleIframe();loginLayer.src http://baidu.com;};把创建实例对象的职责和管理单例的职责分别放置在两个方法里这两 个方法可以独立变化而互不影响当它们连接在一起的时候就完成了创建唯一实例对象的功能。 应用场景
线程池、全局缓存、浏览器中的 window 对象等创建单一实例 参考文献 JavaScript 设计模式与开发实践 by 曾探
