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

NO IMAGE

上節課我們說了寫一個庫的準備,但是這節課並不是寫庫為什麼,有句話叫你沒吃過豬肉還沒看過豬走。所以我們先看看別人的庫是怎麼寫的。在我們擁有了足夠紮實的基礎之後我們要做的不是閉門造車,而是去閱讀一些知名的庫,為什麼?一個庫從成百上千個庫裡面脫穎而出,被廣大的開發者所接受使用,一定是在一些方面有很優秀的方面,比如架構,比如易用等,同時一些成熟的方法和程式碼可以借鑑學習,比如架構安全的程式碼,比如如何判斷型別等等。不要閉門造成,首先是使用別人的東西,然後是閱讀別人的程式碼體會優秀的部分,然後是優秀部分如何為我所用,到最後完全自主的創新。

1.可以借鑑的資源

1)github

Github不僅僅是你儲存程式碼的地方,更是你學習別人開原始碼的好地方,還是那你瞭解語言發展趨勢和方向的好地方。比如你想了解如今js發展熱度。
可以直接在這裡檢視:https://github.com/showcases/front-end-javascript-frameworks
至於var的開源就不多說了。

2)官網

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

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

2.深入閱讀jquery原始碼

​ jquery至少解決了兩個問題,1相容性2易用性,我們使用jquery 1.11.2,為什麼用這個版本,因為這個版本沒有太多的新技術,比如引入大量的模組,

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

你有必要為了喝杯純牛奶而去種草麼?

所以我們儘量使用穩定而在我們已經學過的技術範圍之內的版本。

獲得地址:

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;
});