jQuery的觀察者模式詳解

更新時(shí)間：2014年12月22日 14:44:28 投稿：hebedich

本文主要是介紹了jQuery中on方法及trigger方法，以及圍繞這個(gè)方法來體驗(yàn)的觀察者模式，是篇非常不錯(cuò)的文章，對(duì)我們理解觀察者模式很有幫助。

在jQuery中，on方法可以為元素綁定事件，trigger方法可以手動(dòng)觸發(fā)事件，圍繞這2個(gè)方法，我們來體驗(yàn)jQuery中的觀察者模式(Observer Pattern)。

■ on方法綁定內(nèi)置事件，自然觸發(fā)

比如，我們給頁(yè)面的body元素綁定一個(gè)click事件，這樣寫。

復(fù)制代碼代碼如下:

 <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事件。也就是說，當(dāng)給頁(yè)面元素綁定內(nèi)置事件后，事件的觸發(fā)是在內(nèi)置事件發(fā)生的那刻。

■ on方法綁定內(nèi)置事件，手動(dòng)觸發(fā)

使用trigger方法，也可以手動(dòng)觸發(fā)元素綁定的內(nèi)置事件。

■ on方法綁定自定義事件，手動(dòng)觸發(fā)

我們知道，click是jquery內(nèi)置的事件，那么，是否可以自定義事件，并手動(dòng)觸發(fā)呢？

復(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)然，自定義事件的名稱可以按照"命名空間.自定義事件名稱"的形式來寫，比如app.someclick，這在大型項(xiàng)目中尤其有用，這樣可以有效避免自定義事件名稱沖突。

如果從"發(fā)布訂閱"這個(gè)角度來看，on方法相當(dāng)于訂閱者、觀察者，trigger方法相當(dāng)于發(fā)布者。

■ 從"異步獲取json數(shù)據(jù)"來體驗(yàn)jQuery觀察者模式

在根目錄下，有一個(gè)data.json的文件。

{
"one" : "Hello",
"two" : "World"
}
現(xiàn)在，通過異步的方式來獲取json數(shù)據(jù)。

復(fù)制代碼代碼如下:

    <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è)全局變量來接收異步獲取的json數(shù)據(jù)。

復(fù)制代碼代碼如下:

    <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還沒有數(shù)據(jù)。

如何解決這個(gè)問題呢？
--如果在$.getJSON方法之外先定義好需要執(zhí)行的方法，然后在$.getJSON方法的回調(diào)函數(shù)里真正觸發(fā)這個(gè)方法，不就解決了嗎？

復(fù)制代碼代碼如下:

    <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觀察者模式專門寫一個(gè)擴(kuò)展方法。

復(fù)制代碼代碼如下:

    <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)用。

復(fù)制代碼代碼如下:

    <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

                );

            });

        });