首页 > 代码库 > JS 设计模式
JS 设计模式
1、单例模式：产生一个类的唯一实例
例如：我们在页面中添加遮罩层，每次只能有一个遮罩层存在，因此为单例模式。
在创建遮罩层之前判断是否已经存在，若没有存在，则创建。
这里使用闭包，将是mask变量封装在createMask内。
var createMask=function(){ var mask; return function(){ return mask||mask=document.body.appendChild(document.createElement(‘div‘)); }}()
2、工厂模式：产生多个相似的实例
这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题（前者也成为工厂经典方式,后者称之为混合工厂方式），不推荐使用这种模式。
var lev=function(){ return "play"; }; function Parent(){ var Child = new Object(); //在内部构造对象并返回 Child.name="xiaoming"; Child.age="20"; Child.lev=lev; return Child; }; var x = Parent(); alert(x.name); alert(x.lev());
3、观察者模式：
观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 我们平时接触的dom事件. 就是js和dom之间实现的一种观察者模式。它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。（使用回调函数实现）
观察者模式可以很好的实现2个模块之间的解耦。
例如实现自定义事件，使用的就是观察者模式。
详细的内容可见博客：http://www.cnblogs.com/telnetzhang/p/5817033.html
4、代理模式
代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作。
我们来举一个简单的例子，假如dudu要送酸奶小妹玫瑰花，却不知道她的联系方式或者不好意思，想委托大叔去送这些玫瑰，那大叔就是个代理那我们如何来做呢？
// 先声明美女对象var girl = function (name) { this.name = name;};// 这是duduvar dudu = function (girl) { this.girl = girl; this.sendGift = function (gift) { alert("Hi " + girl.name + ", dudu送你一个礼物：" + gift); }};// 大叔是代理var proxyTom = function (girl) { this.girl = girl; this.sendGift = function (gift) { (new dudu(girl)).sendGift(gift); // 替dudu送花咯 }};
调用方式就非常简单了：
var proxy = new proxyTom(new girl("酸奶小妹"));proxy.sendGift("999朵玫瑰");
实际的编程中， 因为性能问题使用代理模式的机会是非常多的。比如频繁的访问dom节点, 频繁的请求远程资源. 可以把操作先存到一个缓冲区, 然后自己选择真正的触发时机。
JS 设计模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。