JQuery中所涉及的设计模式

近日开始研究JQuery源码, 主要通过阅读《JavaScript高级程序设计》和张容铭大神的《JavaScript设计模式》与收集网络上的知识进行学习。

其中,JQuery涉及的设计模式大致为:

Composite pattern(组合模式)

Composite pattern 描述了一组对象,可以使用与处理对象的单个实例同样的方式来进行处理。

Adapter pattern (适配器模式)

Adapter pattern 将对象或类的接口转变为特定的系统兼容的接口。

Facade pattern (外观模式)

Facade pattern 为更大的(可能更复杂)的代码提供一个更简单的接口。

Observer pattern (观察者模式)

Observer pattern 是系统中的对象可订阅其他对象的地方,并在感兴趣的事件发生时获得通知。

Iterator pattern (迭代器模式)

I terator pattern (允许我们遍历集合的所有元素的对象)顺序访问聚合对象的元素,无需公开其基本形式。

延迟初始化

它能延迟昂贵的过程,直到它的第一个实例需要时。

Proxy pattern (代理模式)

有些时候,我们有必要控制对象后面的访问权限和上下文,这就是Proxy pattern 有用的地方。

Builder pattern (生成器模式)

Builder pattern使我们能够仅通过制定对象的类型和内容就可以创建复杂的对象,而无需显式创建或表示该对象。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Media(中介者)模式</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <h2>Media(中介者)模式</h2> <p>行为设计模式。公开一个统一的接口,系统的不同部分可以通过该接口进行通信。</p> <p>确保组件的交互是通过这个中心点来处理,而不是通过显示地引用彼此。</p> <p>这种模式可以帮助我们解耦系统并提高组件的可重用性</p> <hr> <script> // 1 基本实现 var mediator = (function (){ // 存储可被广播或监听的topic var topics = {}; // 订阅一个topic,提供一个回调函数,一旦topic被广播就执行该回调 var subscribe = function (topic, fn){ if(!topics[topic]){ topics[topic] = []; } topics[topic].push({context: this, callback: fn}); return this; }; // 发布/广播事件到程序的剩余部分 var publish = function (topic){ var args; if(!topics[topic]){ return false; } // call 和 apply 方法都是用来调用“不属于自身的方法”,apply第二参数必须是数组 // 下面的代码相当于 arguments.slice,但是arguments本身没有 slice方法 // slice 方法是用来截取数组 // arguments 是实参“数组” args = Array.prototype.slice.call(arguments, 1); for(var i = 0, l = topics[topic].length; i < l; i++){ var subscription = topics[topic][i]; subscription.callback.apply(subscription.context, args); // subscription.callback(arguments[1]); } return this; }; return { publish: publish, subscribe: subscribe, installTo: function (obj){ obj.subscribe = subscribe; obj.publish = publish; } } })(); </script> <h3>简单实现</h3> <form id="chatForm"> <label for="fromBox">Your Name:</label> <input id="fromBox" type="text"> <br> <label for="toBox">Send to:</label> <input id="toBox" type="text"> <br> <label for="chatBox">Message:</label> <input id="chatBox" type="text"> <button action="submit">Chat</button> </form> <div id="chatResult"></div> <script type="text/javascript"> $("#chatForm").on("submit", function (e){ e.preventDefault(); // 从UI上获取chat的数据 var text = $("#chatBox").val(), from = $("#fromBox").val(), to = $("#toBox").val(); // 将数据发布到newMessage主题上 mediator.publish("newMessage", {message: text, from: from, to: to}); }); // 将新信息附加到聊天记录结果上 function displayChat(data){ var date = new Date(), msg = data.from + " said \""+data.message+"\" to "+ data.to; $("#chatResult").prepend(""+msg+" ("+date.toLocaleTimeString()+")"); } // 记录消息日志 function logChat(data){ if(window.console){ console.log(data); } } // 通过mediator订阅提交的newMessage主题 mediator.subscribe("newMessage", displayChat); mediator.subscribe("newMessage", logChat); </script> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值