jQuery裝飾者模式綁定DOM事件

在閱讀本文以前 請閱讀此文 ：http://www.javashuo.com/article/p-uobqletc-h.html或閱讀《JavaScript設計模式與開發實踐》第12章 《房子裝修——裝飾者模式》

在《設計模式》第12章中12.2裝飾已有功能對象時給了一個原生JS的示列代碼，我根據此擴寫的 jquery代碼。

首先引入jQuery文件。我引入的3.2.1版本。

HTML：

<input id="test" type="text">

模擬已有綁定事件的JS代碼：

$("input").on("click", function () {
            console.log("我也是第一次綁定")
        }).on("change", function () {
            console.log($(this).val())
        })

 

裝飾器JS代碼

//裝飾者模式：在不改變原對象的基礎上，對其進行擴展 （方法或者屬性）
        /**
         * 
         * @param {string} selecter -jquery 選擇器 
         * @param {object} _event  -事件對象 ()
         * @param {Boolean} isPrev - 是否在已存在事件前插入事件
         */
        var decorator = function (selecter, _event, isPrev) {
            var _target = $(selecter),
                _eventsObj = $._data(_target[0], 'events'); //獲取JQ事件對象信息，注意：1.8以後要寫 $._data(原生DOM,要獲取的數據名稱)

            console.log(_eventsObj);

            if (_eventsObj && _eventsObj[_event.type] && typeof _eventsObj[_event.type][0].handler == "function") {

                _eventsObj[_event.type][isPrev ? 'unshift' : 'push'](_event)

            } else {
                _target.on(_event.type, _event.handler);
            }

            return _target; //返回jqDOM對象
        };

        decorator("#test", {
            type: 'click',
            handler: function () {
                console.log("裝飾一下");
            }
        });

        decorator("#test", {
            type: 'click',
            handler: function () {
                console.log("老子無論，老子要第一個顯示")
            }
        }, true);

 

其中$._data()使用方法見此 https://www.cnblogs.com/signheart/p/6598491.html

下一次寫 AOP（面向切片編程）

-end-