在阅读本文之前 请阅读此文 ：或阅读《JavaScript设计模式与开发实践》第12章 《房子装修——装饰者模式》

在《设计模式》第12章中12.2装饰已有功能对象时给了一个原生JS的示列代码，我根据此扩写的 jquery代码。

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

HTML：

模拟已有绑定事件的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()使用方法见此 

下一次写 AOP（面向切片编程）

-end-