采用装饰者模式实现函数点击前的操作

类似于这样的点击选中

Function.prototype.before &＃61; function( beforefn ){
var __self &＃61; this; // 保存原函数的引用
return function(){ // 返回包含了原函数和新函数的"代理"函数
beforefn.apply( this, arguments ); // 执行新函数&＃xff0c;修正 this
return __self.apply( this, arguments ); // 执行原函数
}
};
Function.prototype.after &＃61; function( afterfn ){
var __self &＃61; this;
return function(){
var ret &＃61; __self.apply( this, arguments );
afterfn.apply( this, arguments );
return ret;
}
};
var func &＃61; function(){
console.log( 2 );
};
func &＃61; func.before(function(){
console.log( 1 );
}).after(function(){
console.log( 3 );
});
func();

栗子&＃xff1a;

    学会了当然要会用栗子

• 本地音乐
• 下载管理
• 我的音乐云盘
• 我的歌手
• 我的电台

每次点击li都要选中添加效果   离开的时候选中效果消失 离开的时候指的是点击其它li元素

var liDom &＃61; document.querySelectorAll(&＃39;.recommend li&＃39;),cashDom &＃61; &＃39;&＃39;;

Function.prototype.before &＃61; function (beforeFn) {var _self&＃61; this;return function () {beforeFn.apply(this,arguments);return _self.apply(this,arguments)};
};Function.prototype.after &＃61; function (afterFn) {var _self&＃61; this;return function () {var ret &＃61; _self.apply(this,arguments);afterFn.apply(this,arguments);return ret}
};

var fn &＃61; function (dom) {return funtion(){dom.classList.add(&＃39;chooseActive&＃39;); cashDom &＃61; dom;}
};
Array.prototype.slice.apply(liDom).map(function (dom,index) {dom.addEventListener(&＃39;click&＃39;,function(){fn(dom);fn.before(function () { cashDom.classList.remove(&＃39;chooseActive&＃39;); }); })
})