ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解
觀察者模式(發布-訂閱模式)：其定義對象間一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知。
在JavaScript中，一般使用事件模型來替代傳統的觀察者模式。
好處：
(1)可廣泛應用于異步編程中，是一種替代傳遞回調函數的方案。
(2)可取代對象之間硬編碼的通知機制，一個對象不用再顯示地調用另外一個對象的某個接口。兩對象輕松解耦。
DOM事件–觀察者模式典例
需要監控用戶點擊document.body的動作，但是我們沒有辦法預知用戶將在什么時間點擊。
所以，我們訂閱document.body上的click事件，當body節點被點擊時，body節點便向訂閱者發布這個消息！
document.body.addEventListener("click", function() {
console.log(1);
}, false);
// 可以多個訂閱者
document.body.addEventListener("click", function() {
console.log(2);
}, false);
doucment.body.click();
某網站有header頭部、nav導航、消息列表等模塊。這幾個模塊的渲染都需要獲取用戶登陸信息。
(1)一般寫法：
$.ajax({
url: './login',
type: 'post',
contentType: 'application/json',
dataType:'json',
success: function(data) {
if(data.status === "success") {
// 登錄成功，渲染header、nav
header.setInfo(data.headerInfo);
nav.setInfo(data.navInfo);
}
}
});
(2)使用觀察者模式，很輕松解耦！
$.ajax({
...,
success: function(data) {
if(data.status === "success") {
// 登錄成功，發布登陸成功消息
login.trigger("loginsuccess", data);
}
}
});
var header = (function() {
// 監聽消息
login.listen("loginsuccess", function(data){
header.setInfo(data.headerInfo);
});
return {
setInfo: function(data) {
console.log("設置header信息");
}
};
})();
var nav = (function() {
login.listen("loginsuccess", function(data){
nav.setInfo(data.navInfo);
});
return {
setInfo: function(data) {
console.log("設置nav信息");
}
}
})();
總結
以上是生活随笔為你收集整理的ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 给apache安装mod_rewrite
- 下一篇： php超市管理系统论文,超市管理系统的设