採用裝飾者模式實現函數點擊前的操做

相似於這樣的點擊選中

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

栗子：

    學會了固然要會用栗子

    

<ul class="recommend">
  <li><i class="fa fa-music fa-fw"></i>本地音樂</li>
  <li><i class="fa fa-download fa-fw"></i>下載管理</li>
  <li><i class="fa fa-mixcloud fa-fw"></i>個人音樂雲盤</li>
  <li><i class="fa fa-user-md fa-fw"></i>個人歌手</li>
  <li><i class="fa fa-ravelry fa-fw"></i>個人電臺</li>
</ul>

每次點擊li都要選中添加效果   離開的時候選中效果消失 離開的時候指的是點擊其它li元素

var liDom = document.querySelectorAll('.recommend li'),cashDom = '';

Function.prototype.before = function (beforeFn) {
  var _self= this;
  return function () {
       beforeFn.apply(this,arguments);
       return _self.apply(this,arguments)
  };
};

Function.prototype.after = function (afterFn) {
    var _self=  this;
    return function () {
        var ret =  _self.apply(this,arguments);
        afterFn.apply(this,arguments);
        return ret
    }
};

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