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

定义确保一个类只有一个实例,并提供一个全局访问点来访问它。特点:可以来划分命名空间,从而清除全局变量所带来的风险。可以把代码组织的更为一体,便于阅读和维护。可以被实例化,且实例化一次。单例模式使用的场景如线程池、全局缓存等。众所周知的浏览器的窗口对象是单例...

定义

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

特点:

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

单例模式使用的场景

如线程池、全局缓存等。众所周知的浏览器的窗口对象是单例的。在JavaScript开发中,对于这种只需要一个的对象,我们经常使用singleton。

实现单例模式(不透明)

一般来说,我们像这样实现单例,使用一个变量来标记当前类已经创建了一个对象。如果下次我们得到当前类的一个实例,我们可以直接返回之前创建的对象。代码如下:

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

这种通过单例实现获取对象的方法在新手写作中经常见到。虽然简单,但是不透明。知道的可以通过Singleton.getInstance()获取对象,不需要研究代码实现的就不行。这和我们常用的new关键字获取对象不同,实际意义不大。

实现单例模式(透明)

我以前用过一次这种单例模式,但是用起来很别扭。我也见过其他人使用这种方法来实现灯笼的效果,因为在我们的应用程序中只有一个灯笼。

下面说说为什么感觉不对,因为这个singleton构造函数做了两件事,一是创建一个对象并打印实例名,二是保证只有一个实例对象。这么大的代码量,不方便管理,尽量做到责任单一。

我们通常将代码修改成这样:

我们熟悉这种实现方式。我们在开发中经常使用中间类来实现原类没有的特殊功能。有人称这种实现为代理,确实是singleton模式的一种应用。稍后将在代理模式中详细解释。

说了这么多,我们还是围绕传统的单例模式实现来解释,那么什么是具有JavaScript特性的单例模式呢?

JavaScript单例模式

在我们的开发中,很多同学可能不知道什么是singleton,不知道如何使用singleton,但是他们写的代码正好符合singleton模式的要求。如果想实现一个登录弹出,无论在哪个页面,在页面的哪个位置点击登录按钮,都会弹出登录窗口。有的同学会写一个全局对象来实现登录窗口功能。没错,这样确实能达到要求的登录效果,也符合singleton模式的要求,但这种实现其实是一种巧合,或者说是一个美丽的错误。因为全局对象,或者说全局变量,正好符合单例,所以可以全局访问,而且是唯一的。但众所周知,全局变量是可以覆盖的,尤其是初级开发者。一开始不管怎么定义,基本都是全局的。这样做的好处是访问方便,缺点是不注意就会产生冲突,尤其是在做大型团队项目的时候。所以成熟有经验的开发者尽量减少全局语句。

在开发中,我们通常避免如下的全球变量污染:

全局命名空间使用闭包

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

惰性单例模式

说实话,在我下定决心学习设计模式之前,我并不知道。单例模式仍然是一种惰性的单例模式。我是看了JvaScript的《设计模式与开发实践》才知道有惰性的singleton模式,里面探讨了大神。那么什么是惰性单例模式呢?在说懒人单例模式之前,请允许我说一个大家都知道的lazyload加载图片,就是懒人加载。只有当包含图片资源的dom元素出现在媒体设备的可视区域时,才会加载图片资源,这种加载方式就是懒加载。还有下拉刷新资源也是懒加载的。当您触发下拉刷新事件时,资源将被加载。懒惰单例模式的原理是一样的。只有当实例对象的创建被触发时,实例对象才会被创建。这种创建实例对象的方式在开发中是必要的。

就像我们刚刚介绍的用Singleton.getInstance创建实例对象一样,虽然这种方法实现了懒惰的Singleton,但是就像我们开头说的,并不是一个很好的实现方式。这里有一个很好的实现。

面膜层相信大家都很熟悉。它在开发中是通用的,并且易于实现。在每个人的发展中以不同的方式实现。实现这一点的最佳方式是使用单例模式。有些人直接在页面上添加一个div,然后将display设置为none,这样无论我们是否使用***sk layer页面,这个div都会被加载。如果是多页,就是多个div的开销;也有人用js创建一个div,需要的时候添加到正文中,不需要的时候删除。dom的这种频繁操作也消耗了页面的性能;其他的由基于前一个的标识符来判断。当遮罩层首次出现时,它会被添加到页面中。不需要的时候就藏起来。如果没有,则与前一个相加。

我们发现在开发中并不是单独使用蒙版层,蒙版层和弹出窗口经常是一起使用的。正如我们前面提到的,使用singleton模式来登陆弹出窗口也是最合适的。那么我们应该***上面的代码吗?当然,我们还有一个很好的实现方法,就是把上面单个例子中代码的改变部分和未改变部分分开。

在上面的实现中,提取了singleton模式的懒惰实现部分,重用了懒惰实现代码。在fn中用apply来改变这个方向,用|| budget来简化代码编写。

es6中的单例模式

ES6创建对象

在ES6中引入了类和构造函数来创建对象。让我们通过使用ES6的语法来实例化Apple。

单例模式是在es6中创建的

苹果这么伟大的公司,显然只有一家,就是乔爷爷创立的那家。别人怎么***?所以appleCompany应该是独生子。现在,我们使用ES6语法将构造函数重写为singleton模式的构造函数。

ES6的静态方法优化代码

ES6提供了一个静态方法,为class提供静态关键字定义。我们可以把构造函数中判断是否实例化的逻辑放到静态方法getInstance中,调用静态方法得到实例。构造函数只需要包含实例化所需的代码,可以增强代码的可读性,优化结构。

实现落地弹匣

登陆框是项目中经典的singleton模式,因为大部分网站不需要用户登录浏览,所以用户点击登陆按钮后就可以创建登陆框。而且永远只有一个登录框,不会有多个登录框,也就是说再次点击登录按钮后总会返回一个登录框的实例。

现在我们来梳理一下我登录**盒的流程,然后实现代码:

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

在上面登录框的实现中,我们只创建了一个登录类,但是我们实现了一个不简单的登录功能。第一次点击登录按钮时,我们调用Login.getInstance()实例化了一个登录框,在随后的点击中,我们没有重新创建新的登录框,只是删除了它”显示:无”这种样式显示登录框,节省了内存开销。

摘要

虽然singleton模式很简单,但是项目中的应用场景还是不少的。singleton模式的核心是确保只有一个实例,并提供全局访问。就像我们只需要一个浏览器的window对象和jQuery的$ object一样,我们不需要第二个。由于JavaScript代码编写方式非常灵活,这也导致了如果没有严格的规范,大型项目中的JavaScript不利于多人协同开发。使用singleton模式命名空,管理模块是一个很好的开发习惯,可以有效解决协同开发中的变量冲突问题。使用灵活的单例模式还可以减少不必要的内存开销,改善体验。

本文来自水中明月投稿,不代表舒华文档立场,如若转载,请注明出处:https://www.chinashuhua.cn/24/601104.html

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
() 0
上一篇 06-21
下一篇 06-21

相关推荐

  • 网络推广方式有哪些,最常用的四种高效推广方式

    随着互联网渠道的时代变迁,很多以前有用的推广渠道慢慢退出了舞台。2010年之前,搜索引擎、论坛、门户博客、SNS都是特别大的流量端口。那时候的互联网人群还是精英主导,任何人没事都不会瞎搜东西。此外,许多人不会去网上找信息来寻找供求关系。然而,时代迫使人们在学习上

    2023-07-28 20:27:01
    212 0
  • 线上抽奖方式有哪些 吸粉最好的8种抽奖方法

    餐厅常见的抽奖形式有哪些?不难发现,娱乐至死的精神在90后、90后消费者的骨子里透着,而各种有趣的“中奖”形式恰恰迎合了消费者的喜好,给了餐厅一种美食之外的娱乐体验,既能增强餐厅的吸引力,提高顾客满意度,又能提升餐厅的知名度和营业额。那么我可以总结以下八种常见

    2023-07-28 01:34:01
    1027 0
  • 微信社群裂变的方式有哪些 带你玩转微信社群裂变

    一、建群拉人1.第一轮通知后,首先要成立“XX教育家长福利节活动群”,挂群。裂变机器人。2.然后每个老师一次性把已经通知的家长直接拉进群里。(关注微信群规则)注:每个老师分配指标,设计奖惩机制。所有的沟通和小组工作必须在一天内完成。完成不会超过2天。做这种活动一定要

    2023-07-27 20:37:01
    140 0
  • 线上抽奖方式有哪些(新颖的线上抽奖方式)

    编辑导读:因为公共领域流量越来越难获取,很多企业都把重心从流量转移到了存量上。管理好自己的存量客户,可以实现新老客户的爆发式增长。比如直播间抽奖,就是一种很好的运营方式,可以激活直播间的存量用户,盘活直播间。笔者对此进行分析,与大家分享。2021年,流量红利将

    2023-07-27 15:24:01
    385 0

评论列表

联系我们

在线咨询: QQ交谈

邮件:admin@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信