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

就如同我们刚开始介绍的用 Singleton.getInstance 创建实例对象一样，虽然这种方式实现了惰性单例，但是正如我们刚开始说的那样这并不是一个好的实现方式。下面就来介绍一个好的实现方式。
遮罩层相信大家对它都不陌生。它在开发中比较常见，实现起来也比较简单。在每个人的开发中实现的方式不尽相同。这个最好的实现方式还是用单例模式。有的人实现直接在页面中加入一个div然后设置display为none，这样不管我们是否使用遮罩层页面都会加载这个div，如果是多个页面就是多个div的开销；也有的人使用js创建一个div，当需要时就用将其加入到body中，如果不需要就删除，这样频繁地操作dom对页面的性能也是一种消耗；还有的人是在前一种的基础上用一个标识符来判断，当遮罩层是第一次出现就向页面添加，不需要时隐藏，如果不是就是用前一次的添加的。
我们发现在开发中并不会单独使用遮罩层，遮罩层和弹出窗是经常结合在一起使用，前面我们提到过登陆弹窗使用单例模式实现也是最适合的。那么我们是不是要将上面的代码拷贝一份呢？当然我们还有好的实现方式，那就是将上面单例中代码变化的部分和不变的部分，分离开来。
在上面的实现中将单例模式的惰性实现部分提取出来，实现了惰性实现代码的复用，其中使用apply改变改变了fn内的this指向，使用 || 预算简化代码的书写。
ES6中的单例模式ES6创建对象
ES6中创建对象时引入了class和constructor用来创建对象。下面我们来使用ES6的语法实例化苹果公司
ES6中创建单例模式
苹果这么伟大的公司明显有且只有一个, 就是乔爷爷创建的那个, 哪能容别人进行复制？所以appleCompany应该是一个单例, 现在我们使用ES6的语法将constructor改写为单例模式的构造器。
ES6的静态方法优化代码
ES6中提供了为class提供了static关键字定义静态方法，我们可以将constructor中判断是否实例化的逻辑放入一个静态方法getInstance中，调用该静态方法获取实例，constructor中只包需含实例化所需的代码，这样能增强代码的可读性、结构更加优化。
实现登陆弹框
登陆弹框在项目中是一个比较经典的单例模式，因为对于大部分网站不需要用户必须登陆才能浏览，所以登陆操作的弹框可以在用户点击登陆按钮后再进行创建。而且登陆框永远只有一个，不会出现多个登陆弹框的情况，也就意味着再次点击登陆按钮后返回的永远是一个登录框的实例。
现在来梳理一下我登陆弹框的流程，在来进行代码的实现：
给顶部导航模块的登陆按钮注册点击事件登陆按钮点击后JS动态创建遮罩层和登陆弹框遮罩层和登陆弹框插入到页面中给登陆框中的关闭按钮注册事件, 用于关闭遮罩层和弹框上面的登陆框的实现中，我们只创建了一个Login的类, 但是却实现了一个并不简单的登陆功能。在第一次点击登陆按钮的时候，我们调用Login.getInstance()实例化了一个登陆框，且在之后的点击中，并没有重新创建新的登陆框，只是移除掉了”display: none”这个样式来显示登陆框，节省了内存开销。
总结
单例模式虽然简单，但是在项目中的应用场景却是相当多的。单例模式的核心是确保只有一个实例，并提供全局访问。就像我们只需要一个浏览器的window对象, jQuery的$对象而不再需要第二个。由于JavaScript代码书写方式十分灵活, 这也导致了如果没有严格的规范的情况下，大型的项目中JavaScript不利于多人协同开发，使用单例模式进行命名空间，管理模块是一个很好的开发习惯，能够有效的解决协同开发变量冲突的问题。灵活使用单例模式，也能够减少不必要的内存开销，提高用于体验。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：