本文阐述了js设计模式的代理模式和订阅发布模式。分享给大家参考，如下：

为什么要把两种模式放在一起？因为这篇文章比较长。

我觉得写博客的首要目的是整理自己的知识点，然后优化自己的个人知识体系。知识变成了个人知识，因为它可以用自己的话表达同样的意思。

本文是设计模式系列文章的第二篇，第一篇是：

1、代理模式，刚学的虚拟代理和缓存代理，具体案例

1)虚拟代理

//业务代码var my image=(function(){ var img node=document . create element(' img ')；document . body . appendchild(IMgnode)；返回{ setSrc:函数(src){ console . log(1111)；imgNode.src=src} }})();//设计模式代码var proxy image=(function(){ var img=new image()；//此img仅用于判断图片是否加载。加载后，修改图片链接img . onload=function(){ console . log(this)；myimage . setsrc(this . src)；};返回{ setSrc:函数(src){ console . log(22)；myimage . setsrc(' http://img . lanrentuku.com/img/Alli mg/1212/5-121204193 q9-50 . gif ')；img.src=src} }})();这个例子不错，拿来主义。解释一下我自己的理解：上面的业务代码实现了在dom树中插入一个图片dom，代理模式是新建一个img元素，通过判断onload来判断加载是否完成，然后替换原来的链接。

2)以下是缓存代理：

脚本//缓存代理//计算乘法var mult=function(){ var a=1；for (var i=0，ilen=arguments.length我爱你；i=1) { a=a *参数[I]；}返回a；};//代理函数var proxy func=函数(fn){ var cache={ }；//cache对象返回函数(){//使用闭包varargs=array . prototype . join . call(arguments)；if(缓存中的参数){ return cache[args]；//使用cache proxy } return cache[args]=fn . apply(this，args)；}};var proxy mut=proxy func(mult)；console . log(proxymut(1，2，3，4))；//24c onsole . log(proxymut(1，2，3，4))；//缓存24/脚本的运行结果：

它是用闭包来缓存原始的计算数据。

2.订阅发布模式

script var Event=(function(){ var list={ }，监听，触发，移除；//添加订阅对象listen=function(key，fn){ if(！list[key]){ list[key]=[]；}列表[键]。push(fn)；};//触发器订阅内容触发器=function(){ var key=array . prototype . shift . call(arguments)，fns=list[key]；if(！fns | | fns . length===0){ return false；} for(var i=0，fn；fn=fns[I]；){ fn.apply(这个，参数)；} };//删除订阅内容remove=function (key，fn){ var fns=list[key]；if(！fns){ return false；} if(！fn){ fns(fns . length=0)；} else { for(var I=fns . length-1；I=0；I-){ var _ fn=fns[I]；if(_fn===fn) { fns.splice(i，1)；} } } };return { listen: listen，trigger: trigger，remove : remove } })(；//测试代码如下：event.listen ('color '，function(size){ console . log(' size为： ' size)；//打印出42}的大小)；Event.trigger('color '，42)；/脚本运行结果：

本质上，上述发布订阅只是对数组的添加、删除和修改。在缓存下添加、删除和检查。

本文结束。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun来测试上述代码的运行效果。

有关JavaScript的更多信息，请查看本网站的专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》和《JavaScript数学运算用法总结》

希望本文对JavaScript编程有所帮助。