DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery的觀察者模式詳解
jQuery的觀察者模式詳解
編輯:JQuery特效代碼     

在jQuery中,on方法可以為元素綁定事件,trigger方法可以手動觸發事件,圍繞這2個方法,我們來體驗jQuery中的觀察者模式(Observer Pattern)。

■ on方法綁定內置事件,自然觸發

比如,我們給頁面的body元素綁定一個click事件,這樣寫。

代碼如下:
 <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('被點擊了~~');
            });
        });     
    </script>
</head>
<body>
    <h1>hello</h1>
</body>

以上,我們只有點擊body,才能觸發click事件。也就是說,當給頁面元素綁定內置事件後,事件的觸發是在內置事件發生的那刻。

■ on方法綁定內置事件,手動觸發

使用trigger方法,也可以手動觸發元素綁定的內置事件。

     <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('body').on('click', function () {
                console.log('被點擊了~~');
            });
            $('body').trigger('click');
        });     
    </script>
以上,無需點擊body,在頁面加載完畢,body自動觸發了click事件。

■ on方法綁定自定義事件,手動觸發

我們知道,click是jquery內置的事件,那麼,是否可以自定義事件,並手動觸發呢?

代碼如下:
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('body').on('someclick', function () {
                console.log('被點擊了~~');
            });
            $('body').trigger('someclick');
        });     
    </script>

以上,我們自定義了一個someclick事件,得到的結果和上面一樣。

於是,我們發現:我們可以為元素綁定自定義事件,並且用trigger方法觸發該事件。

當然,自定義事件的名稱可以按照"命名空間.自定義事件名稱"的形式來寫,比如app.someclick,這在大型項目中尤其有用,這樣可以有效避免自定義事件名稱沖突。

如果從"發布訂閱"這個角度來看,on方法相當於訂閱者、觀察者,trigger方法相當於發布者。

■ 從"異步獲取json數據"來體驗jQuery觀察者模式

在根目錄下,有一個data.json的文件。

{
    "one" : "Hello",
    "two" : "World"
}
現在,通過異步的方式來獲取json數據。

代碼如下:
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.getJSON('data.json', function(data) {
                console.log(data);
            });
        });     
    </script>

 

如果用一個全局變量來接收異步獲取的json數據。

代碼如下:
    <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>

這次,我們得到的結果卻是undefined,這是為什麼?
--因為,當$.getJSON方法還在獲取數據的時候,就已經執行console.log(data),而此時data還沒有數據。

如何解決這個問題呢?
--如果在$.getJSON方法之外先定義好需要執行的方法,然後在$.getJSON方法的回調函數裡真正觸發這個方法,不就解決了嗎?

代碼如下:
    <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); //相當於發布
            });
            $(document).on('app.myevent', function(e, results) { //相當於訂閱
                console.log(results);
            });
        });     
    </script>

以上,on方法就像一個訂閱者,它訂閱了自定義事件app.myevent;而trigger方法就像一個發布者,它發布事件和參數後,才真正讓訂閱者方法得以執行。

■ jQuery觀察者模式的擴展方法

為此,我們還可以為jQuery觀察者模式專門寫一個擴展方法。

代碼如下:
    <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 = $({});//自定義事件對象
            $.each({
                trigger: 'publish',
                on: 'subscribe',
                off: 'unsubscribe'
            }, function(key, val) {
                jQuery[val] = function() {
                    o[key].apply(o, arguments);
                };
            });
        })(jQuery);
    </script>

以上,定義了全局的publish和subscribe方法,我們在任何時候都可以調用。

代碼如下:
    <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
                );
            });
        });

總結:jQuery的觀察者模式,實際上是讓on方法綁定的自定義事件先不執行,直到使用trigger方法來觸發事件。使用jQuery的觀察者模式的好處是:一次發布,多次訂閱。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved