浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>   

在閱讀本文之前 請閱讀此文 ：https://blog.csdn.net/yisuowushinian/article/details/51934008 或閱讀《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-