dom 的事件模式就是觀察者模式

/** 觀察者模式又叫發(fā)布者-訂閱者模式* 我發(fā)布一則消息，消息就在那里；你若訂閱，我便發(fā)送。 *//** js和dom之間的實現就是一種觀察者模式；* 所有的dom元素都發(fā)布了事件，然后觀察誰訂閱了這個事件；* 例：div訂閱了click事件 */ document.getElementById("banner").onclick = function () {alert("div is clicked!"); };

?

原生實現

/** js 觀察者模式 又稱 訂閱/發(fā)布模式* 通過創(chuàng)建“可觀察”對象，當發(fā)生一個感興趣的事件時可將該事件通告給* 所有觀察者，從而形成松耦合 */ var pubsub = (function () {var q = {},topics = {},subUid = -1;// 發(fā)布方法q.publish = function (topic, args) {if (!topics[topic]) {return false;}var subscribers = topics[topic],len = subscribers ? subscribers.length : 0;while (len--) {subscribers[len].func(topic, args);}return true;};// 訂閱方法q.subscribe = function (topic, func) {if (!topics[topic]) {topics[topic] = [];}var token = (++subUid).toString();topics[topic].push({token: token,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][i].token === token) {topics[m].splice(i, 1);return token;}}}}return false;};return q; })();pubsub.subscribe("broadcast", function (topic, data) {console.log(topic + " : " + data); // broadcast : hello world });pubsub.publish("broadcast", "hello world");

?

jQuery版本

// jquery 版本 (function ($) {var o = $({});// 訂閱既是事件綁定（觀察者）$.subscribe = function () {o.on.apply(o, arguments); // on };$.unsubscribe = function () {o.off.apply(o, arguments);};// 發(fā)布既是事件觸發(fā)$.publish = function () {o.trigger.apply(o, arguments); // trigger }; } (jQuery));$.subscribe("j-bro", function (e, data) {console.log(data); // jquery broadcast });$.publish("j-bro", "jquery broadcast"); $.publish("j-bro", "jquery broadcast again");

?

轉載于:https://www.cnblogs.com/xiankui/p/3964301.html

總結

以上是生活随笔為你收集整理的javascript设计模式之观察者模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。