手撕jquery之core.js分析

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手撕jquery之core.js分析相关的知识,希望对你有一定的参考价值。

上一次从入口文件中,我们清晰的看到了整个工程的组成,接下来就开始逐一攻破。

1.常量和常用原生方法的声明

首先core.js引入的模块,可以罗列一下:

    "./var/arr",
    "./var/document",
    "./var/getProto",
    "./var/slice",
    "./var/concat",
    "./var/push",
    "./var/indexOf",
    "./var/class2type",
    "./var/toString",
    "./var/hasOwn",
    "./var/fnToString",
    "./var/ObjectFunctionString",
    "./var/support",
    "./var/isWindow",
    "./core/DOMEval"

   这里我们看到了一个非常好的编程习惯,在javascript中,很多变量和方法使用起来都比较冗余,而且很容易不小心就被改动,因此,可以将这些基础变量和方法单独维护成一个文件。

  首先可以看arr文件:

define( function() {
    "use strict";

    return [];
} );

 

  非常简单的返回一个数组直接量(空数组)。这有什么用呢?你可以再看下slice,concat,indexof,push文件:

define( [
    "./arr"
], function( arr ) {
    "use strict";

    return arr.concat;
} );

  你会恍然大悟,原来提供这个直接量,是用来返回它的类方法的。有人可能会说,这不是绕道而行么?数组可以直接调用concat方法,因为concat是数组的原型方法,所有数组都可以继承。

  这里不得不说JavaScript的灵活性带来的一个容易出错的地方,覆盖原型方法。不管你是否注意,但不能保证别人不会写出如下代码:

let arr = [];
arr.concat = function(){...};

 

  一旦别人不小心写出了上面的代码,你会发现你想要的方法变质了。

  为了使用原汁原味的原生api,经常出现如下写法:

//也可使用apply方法
Array.prototype.concat.call(); [].concat.call();

   这样就可以使用原生的方法,并且可以绑定方法执行的上下文(call方法说明)

   其他的几个模块大同小异,可以看工程中的注释来了解(工程地址欢迎来看

2.基本结构

  接下来把整个jquery对象的生产流程过一下:

//首先声明一个jQuery函数(其实就是一个对象的构造函数)
var jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);
}

//其次定义一个扩展方法
jQuery.extend = jQuery.fn.extend = function () {
...
};

//扩展jquery对象
jQuery.extend({
...
});
//这样一波下来,jquery成了有血有肉的骚年了

 














以上是关于手撕jquery之core.js分析的主要内容,如果未能解决你的问题,请参考以下文章

手撕源码之HashMap

手撕源码之HashMap

java面试之手撕代码

手撕代码之反转单链表

web前端开发JQuery常用实例代码片段(50个)

[ 数据结构 -- 手撕排序算法第七篇 ] 堆及其堆排序