实现jQuery底层链式编程(二)

来源:互联网 发布:nba英雄网络链接 编辑:程序博客网 时间:2024/05/22 13:56
//jquery使用的就是块级作用域      //特点1.块级作用域的作用就是程序启动时,直接执行了      //特点2.内部的成员变量,外部无法访问      (function(Window,undefined){        // $ 最常用的对象,返回给外界,等于出口,一般大型程序当中 _ 作为私有对象(规范)        function _$(arguments){          //实现代码....          //正则表达式,匹配ID          var idselector = /#\w+/;          //此属性接受所得到的元素          this.dom;          if(idselector.test(arguments[0])){            //如果匹配则成功,则接受dom元素            this.dom = document.getElementById(arguments[0].substring(1));          }else{            throw new Error('arguments it error');          }        }        //在Function类上扩展一个可以实现链式变成的方法        //参数1:链式方法的名字        //参数2:函数        Function.prototype.method = function(methodName,fn){          //_$原型          this.prototype[methodName] = fn;          //链式变成的关键          return this;        }        //在_$上通过原型,增加公共的方法        _$.prototype = {          constructor : _$,          addEvent : function(type,fn){            //console.log('addEvent');            //给得到的元素添加事件            if(window.addEventListener){              this.dom.addEventListener(type,fn);            }else if(window.attachEvent){              this.dom.attachEvent('on'+type,fn);            }            return this;          },          colorStyle : function(key,value){            //console.log('colorStyle');            this.dom.style[key] = value;            return this;          }        }        //window上先注册一个全局变量,与外界产生联系,外界可以访问        window.$ = _$;        //写一个准备方法,在_$绑定一个方法        _$.onReady = function(fn){          //1.实例化出来_$对象,真正的注册到window上          window.$ = function(){            return new _$(arguments);          };          //2.执行传入进来的代码,onReady函数里传入的          fn();          //3.实现链式编程          _$.method('addEvent',function(){          }).method('colorStyle',function(){          });        }      })(window);//window等于程序的入口,传入作用域中      //运行      $.onReady(function(){        var inp = $('#input');        //var domObject = inp.get(0);        //console.log(inp.dom);        //alert(inp.dom);        inp.addEvent('click',function(){          console.log('我执行了');        }).colorStyle('backgroundColor','#ff6699');      });

0 0
原创粉丝点击