• 经典JS


    用apply把document当作this传入getId函数,帮助“修正”this;

    document.getElementById = (function (func) {
        return function () {
            return func.apply(document, arguments);
        }
    })(document.getElementById);
    
    //调用
    var getId = document.getElementById;
    var div = getId('div2');

    类型判断

    var Type = {};
    
    for (var i = 0, type; type = ['String', 'Array', 'Number'][i++];) {
    
        (function (type) {
            Type['is' + type] = function (obj) {
                return Object.prototype.toString.call(obj) === '[object ' + type + ']';
            }
        })(type);
    
    };

    自定义事件(一):

    var Event = {
        _listeners: {},    
        // 添加
        addEvent: function(type, fn) {
            if (typeof this._listeners[type] === "undefined") {
                this._listeners[type] = [];
            }
            if (typeof fn === "function") {
                this._listeners[type].push(fn);
            }    
            return this;
        },
        // 触发
        fireEvent: function(type) {
            var arrayEvent = this._listeners[type];
            if (arrayEvent instanceof Array) {
                for (var i=0, length=arrayEvent.length; i<length; i+=1) {
                    if (typeof arrayEvent[i] === "function") {
                        arrayEvent[i]({ type: type });    
                    }
                }
            }    
            return this;
        },
        // 删除
        removeEvent: function(type, fn) {
            var arrayEvent = this._listeners[type];
            if (typeof type === "string" && arrayEvent instanceof Array) {
                if (typeof fn === "function") {
                    // 清除当前type类型事件下对应fn方法
                    for (var i=0, length=arrayEvent.length; i<length; i+=1){
                        if (arrayEvent[i] === fn){
                            this._listeners[type].splice(i, 1);
                            break;
                        }
                    }
                } else {
                    // 如果仅仅参数type, 或参数fn邪魔外道,则所有type类型事件清除
                    delete this._listeners[type];
                }
            }
            return this;
        }
    };

    自定义事件(二):

    //自定义事件
    
    var Event=(function () { 
    
        var global=this,
            Event,
            _default='default';
    
        Event=function () { 
            var _listen,
                _trigger,
                _remove,
                _slice=Array.prototype.slice,
                _shift=Array.prototype.shift,
                _unshift=Array.prototype.unshift,
                namespaceCache={},
                _create,
                find,
                each=function (ary,fn) { 
                    var ret;
                    for (var i = 0, l=ary.length; i < l; i++){
                        var n=ary[i];
                        ret=fn.call(n,i,n);
                    }
                    return ret;
                 };
                 //添加监听事件,并缓存
                 _listen = function (key,fn,cache) { 
                     if(!cache[key]){
                         cache[key]=[];
                     }
                     cache[key].push(fn);
                  };
                  //移除监听
                  _remove=function (key,cache,fn) { 
                      if(cache[key]){ //如果存在该监听事件
                          if(fn){ //如果存在回调函数
                              for (var i = cache[key].length; i >=0; i--){
                                 if(cache[key][i]===fn){
                                     cache[key].splice(i,1); //移除此回调函数
                                 }
                              }
                          }else{
                              cache[key]=[]; //清除此事件(为什么存在回调函数时不执行此步骤,奇怪)
                          }
                      }
                   };
    
                   //触发事件
                   _trigger=function () { 
                       var cache = _shift.call(arguments), //第一个参数是cache
                           key = _shift.call(arguments),  //第二个参数是key
                           args = arguments,
                           _self = this,
                           ret,
                           stack= cache[key];
    
                        if(!stack || !stack.length){ //没有回调函数则直接返回
                            return;
                        }
    
                        return each(stack, function () { //执行所有的回调函数
                            return this.apply(_self,args);
                         });
    
                    };
                    //创建事件的实例
                    _create=function (namespace) { 
                        var namespace = namespace || _default;
                        var cache ={},
                            offlineStack=[], //离线事件
                            ret={
                                listen:function (key,fn,last) { 
                                    _listen(key,fn,cache);
                                    if(offlineStack===null){
                                        return;
                                    }
                                    if(last==='last'){
                                        offlineStack.length && offlineStack.pop()(); //如果是最后一个离线事件,触发此离线事件并移除此事件
                                    }else{
                                        each(offlineStack,function(){ //如果是多个离线事件,并遍历触发
                                            this();
                                        });
                                    }
    
                                    offlineStack = null; 清空离线事件
                                 },
                                 //执行一次监听事件
                                 one:function (key,fn,last) { 
                                     _remove(key,cache); //此缓存中移除此事件
                                     this.listen(key,fn,last); //添加此事件
                                  },
                                  remove:function (key,fn) { 
                                      _remove(key,cache,fn);
                                   },
                                   trigger:function () { 
                                       var fn,
                                           args,
                                           _self=this;
    
                                        _unshift.call(arguments,cache); //将cache缓存添加到arguments参数集合中
                                        args=arguments;
                                        fn=function(){
                                            return _trigger.apply(_self,args);
                                        };
    
                                        if(offlineStack){
                                            return offlineStack.push(fn);
                                        }
                                        return fn(); //触发事件
                                    }
    
                            };
    
                            return namespace ?
                                (namespaceCache[namespace] ? namespaceCache[namespace]:
                                    namespaceCache[namespace]= ret ) 
                                        :ret;
                     };
    
                    return {
                        create: _create,
                        one: function (key, fn, last) {
                            var event = this.create();
                            event.one(key, fn, last);
                        },
                        remove: function (key, fn) {
                            var event = this.create();
                            event.remove(key, fn);
                        },
                        listen: function (key, fn, last) {
                            var event = this.create();
                            event.listen(key, fn, last);
                        },
                        trigger: function () {
                            var event = this.create();
                            event.trigger.apply(this,arguments);
                        }
                    };
    
    
         }();
    
         return Event;
    
     })();

    方法绑定:

    Function.prototype.bind = function () {
        var self = this,
        context  = [].shift.call(arguments),
        args     = [].slice.call(arguments);
        
        return function () {
            return self.apply( context, [].concat.call(args, [].slice.call(arguments)) )
        } 
    }

    AOP:

    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;
        }
    }
  • 相关阅读:
    宠物商店项目需求
    使用Ajax新闻系统管理需求分析
    java 面向对象面试题,问答题,构造方法,抽象类,继承,多态,接口,异常总结;
    如何在linux服务器部署Rstudio server,配置ODBC远程访问win 服务器上的SQL server
    R语言网络爬虫学习 基于rvest包
    用蒙特卡洛方法计算派-python和R语言
    R 语言学习日志 1
    kmeans聚类中的坑 基于R shiny 可交互的展示
    分类算法简介 基于R
    R 多线程和多节点并行计算
  • 原文地址:https://www.cnblogs.com/jasonoiu/p/Classic-JS.html
Copyright © 2020-2023  润新知