【设计模式】单例模式

原创 lingwer111 随笔 JavaScript 178阅读 2017-05-11 12:49:10 举报

前言
单例模式的定义是。保证一个类只有一个实例,并提供一个访问他的全局访问点。
单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如当我们点击一个登陆按钮的时候,页面中会出现一个登陆悬浮窗,而这个登陆悬浮窗是唯一的。无论点击多少次登陆按钮,这个悬浮窗只会被创建一次,那么这时候单例模式就派上用场了。

原理
要实现一个标准的单例模式并不复杂,无非就是创建一个变量来标注当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建过的对象。代码如下
html 代码

上面的按钮无论点击多少次,都只会创建一个悬浮窗。 创建了一个变量div来标记函数。如果是第一次创建,将函数赋值给他,由于返回的函数是个闭包,变量div并不会在函数执行完之后被销毁。而是一直存在内存中。第二次调用的时候判断这个div是否存在,如果存在,就直接返回。

另外,我们可以将上面的管理单例的逻辑从原来的代码中抽离出来,封装在getSingle函数内部。创建对象的方法fn被当成参数动态传入getSingle函数。
javascript 代码

下面来看看getSingle函数应用在登录悬浮窗的实例
html 代码

在这里例子中,我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里,这两个方法可以独立变化互不影响,当他们连接在一起的时候,就完成了创建唯一实例对象的功能。

这种单例模式的用途远远不止创建对象,比如我们通常渲染完页面中的一个列表之后,接下来要给这个列表绑定click事件。如果是用过ajax动态往列表里追加数据,在使用事件代理的前提下。click事件实际上只需在第一次渲染列表的时候被绑定一次,但我们不想去判断当前是否是第一次渲染列表。如果借助于jqeury,我们通常选中给节点绑定one事件。
html 代码

如果利用getSingle函数,也能达到一样的效果,代码如下。
html 代码

可以看到render函数和bindEvent函数都分别执行了3次,但按钮实际上只被绑定了一个事件。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复