【手撕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成了有血有肉的骚年了

 

转载于:https://www.cnblogs.com/dzg-melody/p/8035649.html