初步学习 jQuery 核心 API

时间  2019-12-06
标签 初步 学习 jquery 核心 api 栏目 JQuery 繁體版
原文   原文链接

背景

不造轮子的程序员不是好程序员，因此咱们今天尝试造一下轮子。今天的主角是 jQuery ，虽然如今市面上已被 React，Angular，Vue 等挤的容不下它的位置，可是它的简单 API 设计依然优秀，值得学习和体会。html

任务jquery

今天造轮子的目标不是实现功能，而是专一在 API 和架构。你须要完成的东西支持如下功能：git

一、$(selector) 根据选择器构造一个jQuery 对象程序员

二、jQuery 对象是一个类数组，须要支持如下方法：es6

var a = $(selector);
a[0]                                   访问元素
a.length                               元素个数
a.each(function(){ console.log(this)}) 迭代操做

三、链式调用github

var a = $(selector);
a.addClass('hello').click(function(){...});

四、扩展实例方法数组

$.fn.tabs = function(){
  console.log(this);
};

以后就能够这样使用浏览器

$(selector).tabs();

好，开始咱们的任务。架构

我在 jQuery 的官网下载的开发版（没有压缩）代码，版本 3.2.1我记的上一次用的时候好像才 1.8左右 ?。只有一个 js 文件，打开一看，个人天，一万多行代码。。。模块化

代码有点多，咱们先梳理一下结构，找个入口开始看。

jQuery 的总体架构

( function( global, factory ) {
  //省略...
} )( typeof window !== "undefined" ? window : this,
  function( window, noGlobal ) {
    jQuery = function( selector, context ) {
      return new jQuery.fn.init( selector, context );
      //这里用new，省去了构造函数 jQuery() 前面的运算符new，所以咱们能够直接写 jQuery()
    };
    jQuery.fn = jQuery.prototype = {
      jquery: version,
      constructor: jQuery,
      ...
    };
    // 经过覆盖原型的方式，把 jQuery.prototype 覆盖到 jQuery.fn.init.prototype 上
    jQuery.fn.init.prototype = jQuery.fn;
      //...
    jQuery.extend = jQuery.fn.extend = function(){
    ....//
    };
    jQuery.extend( {
      isFunction,
      type,
      isWindow,
      ...
    })
    //jQuery.extend()和jQuery.fn.extend()
    //用于合并多个对象的属性到第一个对象，相似于 es6 的 Object.assign()，不过仍是有区别的
      if ( !noGlobal ) {
        window.jQuery = window.$ = jQuery;
      }
      return jQuery;
  }));

源码分析

当即调用表达式

jQuery 当即调用表达式简化版

(function(window, factory) {
    factory(window)
}(this, function() {
    return function() {
       //jQuery的调用
    }
}))

一上来，是个 当即调用表达式。 解决命名空间与变量污染的问题，全局变量是魔鬼, 匿名函数能够有效的保证在页面上写入 JavaScript，而不会形成全局变量的污染，经过小括号，让其加载的时候当即初始化，这样就造成了一个单例模式的效果从而只会执行一次。

jQuery 的这个当即调用表达式的具体讲解能够参考这里。

jQuery = function( selector, context ) {
   return new jQuery.fn.init( selector, context );
}

//...

window.jQuery = window.$ = jQuery;

jQuery 赋值给了 window.jQuery 和 window.$ 因此咱们在使用 jQuery 的时候 $ 和 jQuery 是等价的。

类数组对象

可是 jQuery() 返回了 new jQuery.fn.init()，为何这样写？一脸懵逼。。。。

图片描述

悲伤先放一边，咱们先看一下这个函数 jQuery.fn.init(selector, context)

init = jQuery.fn.init = function( selector, context, root ) {
        // HANDLE: $(""), $(null), $(undefined), $(false)
        // Handle HTML strings
        // HANDLE: $(html) -> $(array)
        // HANDLE: $(html, props)
        // HANDLE: $(#id)
        // HANDLE: $(expr, $(...))
        // HANDLE: $(expr, context)
        // HANDLE: $(DOMElement)
        // HANDLE: $(function)
        return jQuery.makeArray( selector, this );
    };
init.prototype = jQuery.fn;

这个函数就是对参数 selector 对应的 html、id 和 class 等不一样选择器的处理方式，并返回一个类数组对象。

看到这咱们就能实现咱们今天任务第一个目标以及第二个目标的 1/2 了。? 上代码！

var jQuery = function(selector) {
  return new jQuery.fn.init(selector);
}

init = jQuery.fn.init = function( selector ) {
  var elem = document.querySelectorAll(selector);
  this.length = elem.length;
  this[0] = elem[0];
  for (i = 0; i < elem.length; i++) {
    this[i] = elem[i];
  }
  this.context = document;
  this.selector = selector;
  return this;
}

这里有一个 jQuery 的特色 类数组对象结构。

所谓的类数组对象:

拥有一个 length 属性和若干索引属性的对象

举个例子：

var array = ['name', 'age', 'sex'];

var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

jQuery 能像数组同样操做，经过对象 get 方法或者直接经过下标 0 索引就能转成 DOM 对象。同时还拥有各类自定义方法，自定义属性，看 jquery 对象的优雅的访问方式便可知是如此美妙的对象。

进一步了解类数组对象能够看这篇文章

对象的构建和分离构造器

而后咱们回来看看，让咱们悲伤的代码。。。

jQuery = function( selector, context ) {
   return new jQuery.fn.init( selector, context );
}

之因此这样写，演变过程是这样的：

一、出于实例化 jQuery 对象性能的考虑 jQuery 采用了原型式的结构构建对象 
(jQuery.prototype)

                                  ⬇

二、jQuery 为了初始化对象实例更方便，采用了无 new 化，初始化对象时，能够不写 new 操做符
(return new jQuery...)

                                  ⬇

三、jQuery 为了不出现 return jQuery 无限递归本身，这种死循环的问题，采起的手段是把原型上的一个 init 方法做为构造器

                                  ⬇

四、最后，就成了这样了。
return new jQuery.fn.init()

这样确实解决了循环递归的问题，可是又问题来了，init 是 jQuery 原型上做为构造器的一个方法，那么其 this 就不是 jQuery了，因此 this 就彻底引用不到 jQuery 的原型了，因此这里经过 new 把 init 方法与 jQuery 给分离成2个独立的构造器。

而后 jQuery 又经过下面的语句，将两个独立的构造器关联起来了。

jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jQuery.fn;

这样整个结构就串起来了，不得不佩服做者的设计思路，别具匠心。

上面说的若是没看懂，能够参考这两篇文章：

jQuery 源码解析 - 对象的构建

jQuery 源码解析 - 分离构造器

静态与实例方法共享设计

咱们要实现目标2中的 each 迭代操做，就要说一下 jQuery 的另外一个特性 静态与实例方法共享

$(".box").each()   //做为实例方法存在 遍历一个jQuery对象的，是为jQuery内部服务的
$.each()           //做为静态方法存在 能够迭代任何集合

咱们要写两个方法嘛？看看 jQuery 怎么作的？

jQuery.prototype = {
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    }
}

实例方法取于静态方法，这里是静态与实例方法共享设计，静态方法挂在jQuery构造器上，原型方法通过下面的两句代码就挂载到 init 的原型上了，也就是对象的实例方法上了。

jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototype = jQuery.fn;

那么剩下的问题就是怎么实现静态方法 jQuery.each

这个静态方法是在

jQuery.extend({
   each: function( obj, callback ) {
     var length, i = 0;
        if ( isArrayLike( obj ) ) {
            length = obj.length;
            for ( ; i < length; i++ ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        }
        return obj;
    }
})

咱们实现 each，代码以下：

var jQuery = function(selector) {
  return new jQuery.fn.init(selector);
}

jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  length:0,
  get: function( num ) {
    return this[ num ];
  },
  each: function( callback ) {
    return jQuery.each( this, callback );
  }
}

init = jQuery.fn.init = function( selector ) {
  var elem = document.querySelectorAll(selector);
  this.length = elem.length;
  this[0] = elem[0];
  for (i = 0; i < elem.length; i++) {
    this[i] = elem[i];
  }
  this.context = document;
  this.selector = selector;
  return this;
}

init.prototype = jQuery.fn;


jQuery.extend = jQuery.fn.extend = function() {
  var options, copy,
      target = arguments[0] || {},
      i = 1,
      length = arguments.length;

  //只有一个参数，就是对jQuery自身的扩展处理
  //extend,fn.extend
  if (i === length) {
      target = this; //调用的上下文对象jQuery/或者实例
      i--;
  }
  for (; i < length; i++) {
      //从i开始取参数,不为空开始遍历
      if ((options = arguments[i]) != null) {
          for (name in options) {
              copy = options[name];
              //覆盖拷贝
              target[name] = copy;
          }
      }
  }
  return target;
}

jQuery.extend( {
  each: function( obj, callback ) {
    var length, i = 0;
    for ( i in obj ) {
      if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
        break;
      }
    }
    return obj;
  }
});

插件接口的设计

既然出现 extend 了，咱们就先实现第四个小目标 扩展实例方法 tabs

jQuery 中

jQuery.extend = jQuery.fn.extend = function() {
}

虽然指向了同一个函数，可是它们的 this 指向是不一样。

fn 与 jQuery 实际上是2个不一样的对象，在以前有讲解：jQuery.extend 调用的时候，this是指向 jQuery 对象的( jQuery 是函数，也是对象！)，因此这里扩展在 jQuery 上。而jQuery.fn.extend 调用的时候，this 指向 fn 对象，jQuery.fn 和 jQuery.prototype指向同一对象，扩展 fn 就是扩展 jQuery.prototype 原型对象。这里增长的是原型方法，也就是对象方法了。因此jQuery的API中提供了以上2个扩展函数。

咱们这样扩展实例方法便可。

jQuery.fn.extend({
  tabs: function() {
    console.log('扩展实例方法：tabs');
  }
});

jQuery 抽出了全部可复用的特性，分离出单一模块，经过组合的用法，无论在设计思路与实现手法上 jQuery 都是很是高明的。由于 jQuery 的设计中最喜欢的作的一件事，就是抽出共同的特性使之模块化，固然也是更贴近 S.O.L.I.D 五大原则的单一职责SRP了，遵照单一职责的好处是可让咱们很容易地来维护这个对象，好比，当一个对象封装了不少职责的时候，一旦一个职责须要修改，势必会影响该对象的其它职责代码。经过解耦可让每一个职责更加有弹性地变化。

方法链式调用的实现

经过简单扩展原型方法并经过 return this 的形式来实现跨浏览器的链式调用。
因此咱们若是须要链式的处理，只须要在方法内部返回当前的这个实例对象 this 就能够了，由于返回当前实例的 this，从而又能够访问本身的原型了，这样的就节省代码量，提升代码的效率，代码看起来更优雅。

详细解说请点击 方法链式调用的实现

最终的代码演示

参考

文章的不少内容参考的慕课网的 jQuery源码解析 系列，感兴趣的小伙伴，能够看一下整个系列。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程