js移除div里面内容(引入外部css文件的方式)

定义

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

特点:

  1. 可以来划分命名空间,从而清除全局变量所带来的风险。
  2. 可以把代码组织的更为一体,便于阅读和维护。
  3. 可以被实例化,且实例化一次。

单例模式使用的场景

比如线程池、全局缓存等。我们所熟知的浏览器的window对象就是一个单例,在JavaScript开发中,对于这种只需要一个的对象,我们的实现往往使用单例。

实现单例模式 (不透明的)

一般我们是这样实现单例的,用一个变量来标志当前的类已经创建过对象,如果下次获取当前类的实例时,直接返回之前创建的对象即可。代码如下:

JavaScript设计模式之单例模式(Singleton Pattern)

我们也可以使用闭包来实现:

JavaScript设计模式之单例模式(Singleton Pattern)

这个单例实现获取对象的方式经常见于新手的写法,这种方式获取对象虽然简单,但是这种实现方式不透明。知道的人可以通过 Singleton.getInstance() 获取对象,不知道的需要研究代码的实现,这样不好。这与我们常见的用 new 关键字来获取对象有出入,实际意义不大。

实现单例模式 (透明的)

JavaScript设计模式之单例模式(Singleton Pattern)

这种单例模式我以前用过一次,但是使用起来很别扭,我也见过别人用这种方式实现过走马灯的效果,因为走马灯在我们的应用中绝大多数只有一个。

这里先说一下为什么感觉不对劲,因为在这个单例的构造函数中一共干了两件事,一个是创建对象并打印实例名字,另一个是保证只有一个实例对象。这样代码量大的化不方便管理,应该尽量做到职责单一。

我们通常会将代码改成下面这个样子:

JavaScript设计模式之单例模式(Singleton Pattern)

这种实现方式我们就比较熟悉了,我们在开发中经常会使用中间类,通过它来实现原类所不具有的特殊功能。有的人把这种实现方式叫做代理,这的确是单例模式的一种应用,稍后将在代理模式进行详解。

说了这么多我们还是在围绕着传统的单例模式实现在进行讲解,那么具有JavaScript特色的单例模式是什么呢。

JavaScript单例模式

在我们的开发中,很多同学可能并不知道单例到底是什么,应该如何使用单例,但是他们所写的代码却刚好满足了单例模式的要求。如要实现一个登陆弹窗,不管那个页面或者在页面的那个地方单击登陆按钮,都会弹出登录窗。一些同学就会写一个全局的对象来实现登陆窗口功能,是的,这样的确可以实现所要求的登陆效果,也符合单例模式的要求,但是这种实现其实是一个巧合,或者一个美丽的错误。由于全局对象,或者说全局变量正好符合单例的能够全局访问,而且是唯一的。但是我们都知道,全局变量是可以被覆盖的,特别是对于初级开发人员来说,刚开始不管定义什么基本都是全局的,这样的好处是方便访问,坏处是一不留意就会引起冲突,特别是在做一个团队合作的大项目时,所以成熟的有经验的开发人员尽量减少全局的声明。

而在开发中我们避免全局变量污染的通常做法如下:

  • 全局命名空间
  • 使用闭包

它们的共同点是都可以定义自己的成员、存储数据。区别是全局命名空间的所有方法和属性都是公共的,而闭包可以实现方法和属性的私有化。

惰性单例模式

说实话,在我下决心学习设计模式之前我并不知道,单例模式还分惰性单例模式,直到我看了曾探大神的《JvaScript设计模式与开发实践》后才知道了还有惰性单例模式,那么什么是惰性单例模式呢?在说惰性单例模式之前,请允许我先说一个我们都知道的lazyload加载图片,它就是惰性加载,只当含有图片资源的dom元素出现在媒体设备的可视区时,图片资源才会被加载,这种加载模式就是惰性加载;还有就是下拉刷新资源也是惰性加载,当你触发下拉刷新事件资源才会被加载等。而惰性单例模式的原理也是这样的,只有当触发创建实例对象时,实例对象才会被创建。这样的实例对象创建方式在开发中很有必要的。

就如同我们刚开始介绍的用 Singleton.getInstance 创建实例对象一样,虽然这种方式实现了惰性单例,但是正如我们刚开始说的那样这并不是一个好的实现方式。下面就来介绍一个好的实现方式。

遮罩层相信大家对它都不陌生。它在开发中比较常见,实现起来也比较简单。在每个人的开发中实现的方式不尽相同。这个最好的实现方式还是用单例模式。有的人实现直接在页面中加入一个div然后设置display为none,这样不管我们是否使用遮罩层页面都会加载这个div,如果是多个页面就是多个div的开销;也有的人使用js创建一个div,当需要时就用将其加入到body中,如果不需要就删除,这样频繁地操作dom对页面的性能也是一种消耗;还有的人是在前一种的基础上用一个标识符来判断,当遮罩层是第一次出现就向页面添加,不需要时隐藏,如果不是就是用前一次的添加的。

JavaScript设计模式之单例模式(Singleton Pattern)

我们发现在开发中并不会单独使用遮罩层,遮罩层和弹出窗是经常结合在一起使用,前面我们提到过登陆弹窗使用单例模式实现也是最适合的。那么我们是不是要将上面的代码拷贝一份呢?当然我们还有好的实现方式,那就是将上面单例中代码变化的部分和不变的部分,分离开来。

JavaScript设计模式之单例模式(Singleton Pattern)

在上面的实现中将单例模式的惰性实现部分提取出来,实现了惰性实现代码的复用,其中使用apply改变改变了fn内的this指向,使用 || 预算简化代码的书写。

ES6中的单例模式

ES6创建对象

ES6中创建对象时引入了class和constructor用来创建对象。下面我们来使用ES6的语法实例化苹果公司

JavaScript设计模式之单例模式(Singleton Pattern)

ES6中创建单例模式

苹果这么伟大的公司明显有且只有一个, 就是乔爷爷创建的那个, 哪能容别人进行复制?所以appleCompany应该是一个单例, 现在我们使用ES6的语法将constructor改写为单例模式的构造器。

JavaScript设计模式之单例模式(Singleton Pattern)

ES6的静态方法优化代码

ES6中提供了为class提供了static关键字定义静态方法, 我们可以将constructor中判断是否实例化的逻辑放入一个静态方法getInstance中,调用该静态方法获取实例, constructor中只包需含实例化所需的代码,这样能增强代码的可读性、结构更加优化。

JavaScript设计模式之单例模式(Singleton Pattern)

实现登陆弹框

登陆弹框在项目中是一个比较经典的单例模式,因为对于大部分网站不需要用户必须登陆才能浏览,所以登陆操作的弹框可以在用户点击登陆按钮后再进行创建。而且登陆框永远只有一个,不会出现多个登陆弹框的情况,也就意味着再次点击登陆按钮后返回的永远是一个登录框的实例。

现在来梳理一下我登陆弹框的流程,在来进行代码的实现:

  1. 给顶部导航模块的登陆按钮注册点击事件
  2. 登陆按钮点击后JS动态创建
  3. 遮罩层和登陆弹框遮罩层和登陆弹框插入到页面中
  4. 给登陆框中的关闭按钮注册事件, 用于关闭遮罩层和弹框

JavaScript设计模式之单例模式(Singleton Pattern)

上面的登陆框的实现中,我们只创建了一个Login的类, 但是却实现了一个并不简单的登陆功能。在第一次点击登陆按钮的时候,我们调用Login.getInstance()实例化了一个登陆框,且在之后的点击中,并没有重新创建新的登陆框,只是移除掉了”display: none”这个样式来显示登陆框,节省了内存开销。


总结

单例模式虽然简单,但是在项目中的应用场景却是相当多的。单例模式的核心是确保只有一个实例, 并提供全局访问。就像我们只需要一个浏览器的window对象, jQuery的$对象而不再需要第二个。 由于JavaScript代码书写方式十分灵活, 这也导致了如果没有严格的规范的情况下,大型的项目中JavaScript不利于多人协同开发, 使用单例模式进行命名空间,管理模块是一个很好的开发习惯,能够有效的解决协同开发变量冲突的问题。灵活使用单例模式,也能够减少不必要的内存开销,提高用于体验。

(0)
小多多的头像小多多创始人

相关推荐

发表回复

登录后才能评论