體驗javascript之美-第十一課-jquery源碼分析

時間 2019-11-15

標籤體驗 javascript 之美第十一課 jquery 源碼分析欄目 JavaScript 简体版

原文原文鏈接

上節課咱們說了寫一個庫的準備，可是這節課並非寫庫爲何，有句話叫你沒吃過豬肉還沒看過豬走。因此咱們先看看別人的庫是怎麼寫的。在咱們擁有了足夠紮實的基礎以後咱們要作的不是閉門造車，而是去閱讀一些知名的庫，爲何？一個庫從成百上千個庫裏面脫穎而出，被廣大的開發者所接受使用，必定是在一些方面有很優秀的方面，好比架構，好比易用等，同時一些成熟的方法和代碼能夠借鑑學習，好比架構安全的代碼，好比如何判斷類型等等。不要閉門形成，首先是使用別人的東西，而後是閱讀別人的代碼體會優秀的部分，而後是優秀部分如何爲我所用，到最後徹底自主的創新。javascript

1.能夠借鑑的資源

1)githubhtml

Github不單單是你儲存代碼的地方，更是你學習別人開源代碼的好地方，仍是那你瞭解語言發展趨勢和方向的好地方。好比你想了解現在js發展熱度。
能夠直接在這裏查看：https://github.com/showcases/front-end-javascript-frameworks
至於var的開源就很少說了。

2）官網java

一個庫的官網永遠是瞭解它最新進展和學習資料的首選網站。好比jquery.

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

2.深刻閱讀jquery源碼

jquery至少解決了兩個問題，1兼容性2易用性，咱們使用jquery 1.11.2,爲何用這個版本，由於這個版本沒有太多的新技術，好比引入大量的模塊，git

學習一個新東西不該該增長開發者的負擔，舉個例子。我只想學習jquery的優秀架構，但是你用了ES6語法，那我還得學ES6,你用了太多的模塊化，那我還得學模塊化，你用了打包工具，我還得學grunt等。到最後想一想都頭大了，去你大爺的，我不學了。github

你有必要爲了喝杯純牛奶而去種草麼？安全

因此咱們儘可能使用穩定而在咱們已經學過的技術範圍以內的版本。架構

得到地址：模塊化

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

直接上代碼不BB.函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大彬哥版權全部翻錄必究</title>
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ羣:552079864">
    <meta name="copyright" content="尼古拉斯·屌·大彬哥">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>

    </style>
</head>
<body>
<div id="main" class="container">
    <h1>尼古拉斯·屌·大彬哥的優勢</h1>
    <ul class="good">
        <li>高</li>
        <li>富</li>
        <li>帥</li>
    </ul>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js

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

打開jquery.js第一個能夠學的東西就來了，我擦嘞，裝逼的利器啊，註釋。

/*!
 * 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身上放各類功能函數
    jQuery.fn = jQuery.prototype = {
        jquery: version,
        constructor: jQuery,
        //各類功能
        first: function(selector) {
            
          
        }
    };
    
    //這個new 對象的時候傳參進去
    var init = jQuery.fn.init = function (selector, context) {
        //拿到選擇器幹事兒
        
    };
    init.prototype = jQuery.fn;
    window.jQuery = window.$ = jQuery;
});