解析jQuery的链式编程

最新推荐文章于 2022-01-23 13:20:23 发布

恒奇恒毅

最新推荐文章于 2022-01-23 13:20:23 发布

阅读量1.1k

点赞数

分类专栏：网页开发

网页开发专栏收录该内容

94 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <script type=text/javascript charset=utf-8 src="../commons/jquery.js" ></script>
</head>
<body>
  <input id="inp" type="button" value="点击我" />


  <script type=text/javascript charset=utf-8>

    // 模拟jquery底层链式编程
    /*
    // 块级作用域
    //特点1 程序启动的时候里面的代码直接执行了
    //alert('我执行了');
    //特点2 内部的成员变量外部无法去访问（除了不加var修饰的变量）
    //a = 10 ;
    (function(window , undefined){
     // $ 最常用的对象返回给外界大型程序开发一般使用'_'作为私用的对象(规范)
     function _$(arguments){
      //实现代码...
      // 正则表达式匹配id选择器
      var idselector = /#\w+/ ;
      this.dom ;  // 此属性接受所得到的元素
      // 如果匹配成功则接受dom元素   arguments[0] = '#inp'
      if(idselector.test(arguments[0])){
       this.dom = document.getElementById(arguments[0].substring(1));
      } else {
       throw new Error(' arguments is error !');
      }
     };

     // 在Function类上扩展一个可以实现链式编程的方法
     Function.prototype.method = function(methodName , fn){
      this.prototype[methodName] = fn ;
      return this ; //链式编程的关键
     }

     // 在_$的原型对象上加一些公共的方法
     _$.prototype = {
      constructor : _$ ,
      addEvent:function(type,fn){
       // 给你的得到的元素注册事件
       if(window.addEventListener){// FF
        this.dom.addEventListener(type , fn);
       } else if (window.attachEvent){// IE
        this.dom.attachEvent('on'+type , fn);
       }
       return this ;
      },
      setStyle:function(prop , val){
       this.dom.style[prop] = val ;
       return this ;
      }
     };


      // window 上先注册一个全局变量与外界产生关系
     window.$ = _$ ;
     // 写一个准备的方法
     _$.onReady = function(fn){
      // 1 实例化出来_$对象真正的注册到window上
      window.$ = function(){
       return new _$(arguments);
      };
      // 2 执行传入进来的代码
      fn();
      // 3 实现链式编程
      _$.method('addEvent',function(){
       // nothing to do
      }).method('setStyle',function(){
       // nothing to do
      });

     };

    })(window); // 程序的入口 window传入作用域中
    */




    $.onReady(function(){
     var inp = $('#inp');
     //alert(inp.dom.nodeName);
     //alert($('#inp'));
     inp.addEvent('click',function(){
      alert('我被点击了!');
     }).setStyle('backgroundColor' , 'red');
    });