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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM