设计模式 --深入理解javascript
/* 一、单例模式 */ var Universe; (function () { var instance; Universe = function Universe() { if (instance) { return instance; } instance = this; }; }()); /* 二、构造函数模式 */ function VM() { this.name = "123"; } VM.prototype.Method = function () { } var vm = new VM(); /* 三、建造者模式 --- 回调 一个复杂对象由多个部分对象构成,应对部分对象发生变化,组合后算法结构不变的情况 */ // 回调:回调函数的处理,不关心数据来源,如ajax里的succes function GetBeer(id, callback) { //复杂对象 = GetBeer ,算法结构不变 asyncRequest('get', URL, function (resp) { //部分对象callback,算法变化 callback(resp, responseText); }); } var el = document.querySelector('#test'); el.addEventListener('click', GetBeerByIdBridge, false); function GetBeerByIdBridge(e) { GetBeer(this.id, function (beer) { }); } /* 四、工厂模式 */ //创建对象时,无需指定创建对象的具体类 var productManager = {}; productManager.createProductA = function () { }; productManager.createProductB = function () { } productManager.factory = function (type) { return new productManager[type](); } productManager.factory("createProductA"); /* 五、装饰者模式 */ // 为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函数对象 // 优点是把类(函数)的核心职责和装饰功能区分开了 var tree = {}; tree.decorate = function () { } tree.getDecorate = function (funcName) { tree[funcName].prototype = this;//指定当前方法的原型 return new tree[funcName]; } tree.Blue = function () { this.decorate = function () { this.Blue.prototype.decorate();//先执行原型的decorate 即:tree.decorate(); } } tree.Red = function () { this.decorate = function () { this.Red.prototype.decorate();//先执行原型的decorate 即:tree.Bule.decorate(); } } tree = tree.getDecorate("Bule");//将Bule赋值给tree,父级原型tree.Decorate可用 tree = tree.getDecorate("Red");//将Red赋值给tree,父级原型tree.Bule.Decorate可用 tree.decorate(); /* 六、外观模式 */ // 把一些复杂操作封装起来,并创建一个简单的接口用于调用 /* 使用条件 首先,设计阶段:三层架构之间建立外观Facade。 其次,开发阶段:子系统越来越复杂,增加外观Facade可以提供一个简单的接口,减少他们之间的依赖。 第三,老系统过于复杂,无法再进行修改,让新系统与外观facade交互。 */ var moduleEvent = { stop: function (e) { e.preventDefault(); e.stopPropagation(); } } /* 七、代理模式 1.远程代理,也就是为了一个对象在不同的地址空间提供局部代表,这样可以隐藏一个对象存在于不同地址空间的事实,就像web service里的代理类一样。 2.虚拟代理,根据需要创建开销很大的对象,通过它来存放实例化需要很长时间的真实对象,比如浏览器的渲染的时候先显示问题,而图片可以慢慢显示(就是通过虚拟代理代替了真实的图片,此时虚拟代理保存了真实图片的路径和尺寸。 3.安全代理,用来控制真实对象访问时的权限,一般用于对象应该有不同的访问权限。 4.智能指引,只当调用真实的对象时,代理处理另外一些事情。例如C#里的垃圾回收,使用对象的时候会有引用次数,如果对象没有引用了,GC就可以回收它了 */ var girl = function (naem) { } var sneder = function () { this.send = function () { } } var proxy = function () { this.send = function () { (new sender()).send(); } } /* 八、观察者模式 -- 发布订阅模式 多个观察者观察一个主题对象,主题对象发生变化,通知所有观察者 */ var pubsub = {}; (function (q) { var topics = {}, subUid = -1; //订阅方法 q.subscribe = function (topic,func) { if (!topics[topic]) { topics[topic] = []; } var token = (++subUid).toString(); topics[topic].push({ token: koken, func: func }); return token; } //取消订阅 q.unSubscribe = function (token) { for (var m in topics) { if (topics[m]) { for (var i = 0, j = topics[m].length; i < j;i++) { if (topics[m].token==token) { topics[m].splice(i, 1); return token; } } } } return false; } //发布方法 q.publish = function (topic,args) { if (!topics[topic]) { return false; } setTimeout(function () { var subscribers = topics[topic], len = subscribers ? subscribers.length : 0; while (len--) { subscribers[len].func(topic, args); } }, 0); } }(pubsub));