體驗(yàn)javascript之美-第十一課-jquery源碼分析

王晗發(fā)布于2019-08-20 16:12 / 485人閱讀

摘要：可以直接在這里查看至于的開源就不多說了。官網(wǎng)一個庫的官網(wǎng)永遠(yuǎn)是了解它最新進(jìn)展和學(xué)習(xí)資料的首選網(wǎng)站。比如下面我們就拿舉例分析下它的源碼。不解釋，你可以直接拿過去改吧改吧用在你自己的庫里。

上節(jié)課我們說了寫一個庫的準(zhǔn)備，但是這節(jié)課并不是寫庫為什么，有句話叫你沒吃過豬肉還沒看過豬走。所以我們先看看別人的庫是怎么寫的。在我們擁有了足夠扎實(shí)的基礎(chǔ)之后我們要做的不是閉門造車，而是去閱讀一些知名的庫，為什么？一個庫從成百上千個庫里面脫穎而出，被廣大的開發(fā)者所接受使用，一定是在一些方面有很優(yōu)秀的方面，比如架構(gòu)，比如易用等，同時一些成熟的方法和代碼可以借鑒學(xué)習(xí)，比如架構(gòu)安全的代碼，比如如何判斷類型等等。不要閉門造成，首先是使用別人的東西，然后是閱讀別人的代碼體會優(yōu)秀的部分，然后是優(yōu)秀部分如何為我所用，到最后完全自主的創(chuàng)新。

1.可以借鑒的資源

1)github

Github不僅僅是你儲存代碼的地方，更是你學(xué)習(xí)別人開源代碼的好地方，還是那你了解語言發(fā)展趨勢和方向的好地方。比如你想了解如今js發(fā)展熱度。
可以直接在這里查看：https://github.com/showcases/front-end-javascript-frameworks
至于var的開源就不多說了。

2）官網(wǎng)

一個庫的官網(wǎng)永遠(yuǎn)是了解它最新進(jìn)展和學(xué)習(xí)資料的首選網(wǎng)站。比如jquery.

下面我們就拿jquery舉例分析下它的源碼。

2.深入閱讀jquery源碼

? jquery至少解決了兩個問題，1兼容性2易用性，我們使用jquery 1.11.2,為什么用這個版本，因?yàn)檫@個版本沒有太多的新技術(shù)，比如引入大量的模塊，

學(xué)習(xí)一個新東西不應(yīng)該增加開發(fā)者的負(fù)擔(dān)，舉個例子。我只想學(xué)習(xí)jquery的優(yōu)秀架構(gòu)，可是你用了ES6語法，那我還得學(xué)ES6,你用了太多的模塊化，那我還得學(xué)模塊化，你用了打包工具，我還得學(xué)grunt等。到最后想想都頭大了，去你大爺?shù)模也粚W(xué)了。

你有必要為了喝杯純牛奶而去種草么？

所以我們盡量使用穩(wěn)定而在我們已經(jīng)學(xué)過的技術(shù)范圍之內(nèi)的版本。

獲得地址：

https://raw.githubusercontent.com/jquery/jquery/1.11.2/dist/jquery.js

直接上代碼不BB.




    
    大彬哥版權(quán)所有翻錄必究
    
    
    
    
    



    尼古拉斯·屌·大彬哥的優(yōu)點(diǎn)
    
        高
        富
        帥

index.js

var aLi = $("ul.good li");
console.log(aLi);

打開jquery.js第一個可以學(xué)的東西就來了，我擦嘞，裝逼的利器啊，注釋。

/*!
 * jQuery JavaScript Library v1.11.2
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 *
 * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2014-12-17T15:27Z
 */

不解釋，你可以直接拿過去改吧改吧用在你自己的庫里。

(function(global,factory){
    factory(global);
})(window,function(window,noGlobal){
    //大家記住這里才是放jquery核心代碼的地方
    var version = "1.11.2";
    var jQuery = function( selector, context ) {
        return new jQuery.fn.init(selector, context );
    }
    //這個fn身上放各種功能函數(shù)
    jQuery.fn = jQuery.prototype = {
        jquery: version,
        constructor: jQuery,
        //各種功能
        first: function(selector) {
            
          
        }
    };
    
    //這個new 對象的時候傳參進(jìn)去
    var init = jQuery.fn.init = function (selector, context) {
        //拿到選擇器干事兒
        
    };
    init.prototype = jQuery.fn;
    window.jQuery = window.$ = jQuery;
});