jQuery的觀察者模式詳解
在jQuery中，on方法可以為元素綁定事件，trigger方法可以手動(dòng)觸發(fā)事件，圍繞這2個(gè)方法，我們來(lái)體驗(yàn)jQuery中的觀察者模式(Observer Pattern)。
■ on方法綁定內(nèi)置事件，自然觸發(fā)
比如，我們給頁(yè)面的body元素綁定一個(gè)click事件，這樣寫(xiě)。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('被點(diǎn)擊了~~');
});
});
</script>
</head>
<body>
<h1>hello</h1>
</body>
以上，我們只有點(diǎn)擊body，才能觸發(fā)click事件。也就是說(shuō)，當(dāng)給頁(yè)面元素綁定內(nèi)置事件后，事件的觸發(fā)是在內(nèi)置事件發(fā)生的那刻。
■ on方法綁定內(nèi)置事件，手動(dòng)觸發(fā)
使用trigger方法，也可以手動(dòng)觸發(fā)元素綁定的內(nèi)置事件。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('被點(diǎn)擊了~~');
});
$('body').trigger('click');
});
</script>
以上，無(wú)需點(diǎn)擊body，在頁(yè)面加載完畢，body自動(dòng)觸發(fā)了click事件。
■ on方法綁定自定義事件，手動(dòng)觸發(fā)
我們知道，click是jquery內(nèi)置的事件，那么，是否可以自定義事件，并手動(dòng)觸發(fā)呢？
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('someclick', function () {
console.log('被點(diǎn)擊了~~');
});
$('body').trigger('someclick');
});
</script>
以上，我們自定義了一個(gè)someclick事件，得到的結(jié)果和上面一樣。
于是，我們發(fā)現(xiàn)：我們可以為元素綁定自定義事件，并且用trigger方法觸發(fā)該事件。
當(dāng)然，自定義事件的名稱可以按照"命名空間.自定義事件名稱"的形式來(lái)寫(xiě)，比如app.someclick，這在大型項(xiàng)目中尤其有用，這樣可以有效避免自定義事件名稱沖突。
如果從"發(fā)布訂閱"這個(gè)角度來(lái)看，on方法相當(dāng)于訂閱者、觀察者，trigger方法相當(dāng)于發(fā)布者。
■ 從"異步獲取json數(shù)據(jù)"來(lái)體驗(yàn)jQuery觀察者模式
在根目錄下，有一個(gè)data.json的文件。
{
"one" : "Hello",
"two" : "World"
}
現(xiàn)在，通過(guò)異步的方式來(lái)獲取json數(shù)據(jù)。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(data) {
console.log(data);
});
});
</script>
如果用一個(gè)全局變量來(lái)接收異步獲取的json數(shù)據(jù)。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
var data;
$.getJSON('data.json', function(results) {
data = results;
});
console.log(data);
});
</script>
這次，我們得到的結(jié)果卻是undefined，這是為什么？
--因?yàn)?，?dāng)$.getJSON方法還在獲取數(shù)據(jù)的時(shí)候，就已經(jīng)執(zhí)行console.log(data)，而此時(shí)data還沒(méi)有數(shù)據(jù)。
如何解決這個(gè)問(wèn)題呢？
--如果在$.getJSON方法之外先定義好需要執(zhí)行的方法，然后在$.getJSON方法的回調(diào)函數(shù)里真正觸發(fā)這個(gè)方法，不就解決了嗎？
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(results) {
$(document).trigger('app.myevent', results); //相當(dāng)于發(fā)布
});
$(document).on('app.myevent', function(e, results) { //相當(dāng)于訂閱
console.log(results);
});
});
</script>
以上，on方法就像一個(gè)訂閱者，它訂閱了自定義事件app.myevent；而trigger方法就像一個(gè)發(fā)布者，它發(fā)布事件和參數(shù)后，才真正讓訂閱者方法得以執(zhí)行。
■ jQuery觀察者模式的擴(kuò)展方法
為此，我們還可以為jQuery觀察者模式專門(mén)寫(xiě)一個(gè)擴(kuò)展方法。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function (results) {
$.publish('app.myevent', results);
});
$.subscribe('app.myevent', function(e, results) {
console.log(results);
});
});
(function($) {
var o = $({});//自定義事件對(duì)象
$.each({
trigger: 'publish',
on: 'subscribe',
off: 'unsubscribe'
}, function(key, val) {
jQuery[val] = function() {
o[key].apply(o, arguments);
};
});
})(jQuery);
</script>
以上，定義了全局的publish和subscribe方法，我們?cè)谌魏螘r(shí)候都可以調(diào)用。
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function (results) {
$.publish('app.myevent', results);
});
$.subscribe('app.myevent', function(e, results) {
$('body').html(
results.one
);
});
});
總結(jié)：jQuery的觀察者模式，實(shí)際上是讓on方法綁定的自定義事件先不執(zhí)行，直到使用trigger方法來(lái)觸發(fā)事件。使用jQuery的觀察者模式的好處是：一次發(fā)布，多次訂閱。
相關(guān)文章
jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法
這篇文章主要介紹了jquery計(jì)算鼠標(biāo)和指定元素之間距離的方法,涉及jQuery針對(duì)頁(yè)面位置屬性與鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Jquery Ajax方法傳值到action的方法,需要的朋友可以參考下2014-05-05
鼠標(biāo)經(jīng)過(guò)出現(xiàn)氣泡框的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇鼠標(biāo)經(jīng)過(guò)出現(xiàn)氣泡框的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
好長(zhǎng)一段時(shí)間沒(méi)有寫(xiě)js代碼了，也好長(zhǎng)時(shí)間沒(méi)有寫(xiě)文章了,下午閑來(lái)無(wú)事寫(xiě)了一個(gè) 基于jQuery的表單驗(yàn)證插件。首先申明這個(gè)插件問(wèn)題比較多，不過(guò)覺(jué)得這個(gè)東西很有必要。后期持續(xù)跟新中，先把自己寫(xiě)的插件原型拿出來(lái)曬曬！2010-10-10
JQuery實(shí)現(xiàn)表格中相同單元格合并示例代碼
一定要注意如果從list的開(kāi)始元素循環(huán)下去，remove掉一個(gè)元素后，有些元素就找不到了或者說(shuō)不是要找的那個(gè)元素，感興趣的各位可以研究下哈2013-06-06
EasyUI創(chuàng)建人員樹(shù)的實(shí)例代碼
最近做項(xiàng)目做一個(gè)樹(shù)狀的下拉列表，下面小編把easyUI創(chuàng)建人員樹(shù)的實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)，需要的朋友參考下吧2017-09-09
jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
這篇文章主要介紹了jQuery Validate表單驗(yàn)證入門(mén)知識(shí)，該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫(xiě)用戶自定義方法的 API，感興趣的小伙伴們可以參考一下2015-12-12
jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法,涉及jQuery針對(duì)頁(yè)面元素的循環(huán)遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼