之前也看過jquery庫源碼，網上也有很多對於jquery框架的分析教程，但是最近又想花點時間重新學習。jquery問世以來受到了廣大的前端開發者的青睞，對於很多前端開發者來說，走上前端的道路不是從寫原生javascript開始而是基本上都是從寫jquery開始的，甚至對於後端開發者來說，對於他們來說jquery也能輕松上手。那麽jquery為什麽能這麽受歡迎呢，我個人見解，

　　 首先，jquery封裝了許多操作dom的方法和一些工具方法，對於各瀏覽器兼容性做到了完美的兼容，對於jquery 2.0之前可以兼容到IE6瀏覽器。開發者不需要在為了瀏覽器的兼容性寫上幾十行的代碼，使用jquery只需一行代碼。對於那個PC端盛行的年代，jquery完美的解決了廣大前端開發者的苦惱。

　　其次，jquery的框架設計，無new構建方式，以及友好的鏈式調用，使jquery用起來非常的簡潔。

下面介紹jquery的無new構建：

　　通常我們創建js類使用原型和構造函數的形式：

function jQuery (){
　　......
}
jQuery.prototype = {
	constructor: jQuery,
	init: function (){

	},
	get: function (){

	}
	......
}

var $ = new jQuery()
$.get();

　　這裏我們將屬性定義在構造函數中，將方法定義在原型上。我們要調用原型上的get方法，首先要先實例化構造函數new jQuery，然後調用原型上的方法，顯然jquery不是這樣操作的。我們在平常寫jquery的時候是鏈式調用的根本沒有用到new關鍵字。那麽我們先來看看jquery源碼中的寫法：

var rootjQuery;

var jQuery = function( selector, context ) {
	return new jQuery.fn.init( selector, context, rootjQuery );
},

jQuery.fn = jQuery.prototype = {
　　constructor: jQuery,
　　init: function( selector, context, rootjQuery ) {
	......
	return this;
　　}
}


jQuery.fn.init.prototype = jQuery.fn;

rootjQuery = jQuery(document);

　　以上為jquery實現無new構造的核心代碼，下面我們來分析一下這段源碼。首先第一段定義了jQuery的構造函數，這個構造函數返回了一個對象new jQuery.fn.init( selector, context, rootjQuery )，這個對象對應的類是jquery.prototype.init，那麽init原型上並沒有方法，如果這時我們直接調動jQuery上的原型方法會直接報錯。這裏通過將jQuery的原型，重新賦值給jQuery.fn.init的prototype上，這樣jQuery的構造函數就是jquery.fn.init，jQuery原型上的方法就可以直接調用。那麽鏈式調動是怎樣實現的呢，只需要在每個調用的函數加上return this，將jquery.fun.init對象返回即可。

之前看這段代碼感覺比較混亂，但是現在看起來只需要借助原型上的init方法這點巧妙的改動就可以實現jquery這種無new構建。

目前前端框架盛行，很多新入行的前端同學都是從前端框架學起，這些MVVM框架，不需要開發者了解dom原理，通過數據驅動，改變虛擬dom，虛擬dom和文檔，實際dom進行比較差異，從而實現頁面的dom更新。對於入行來說無論是從寫原生js，還是jquery，還是前端框架開始來說都是可以的，但是對於入行以後來說一定要學習jquery這種dom操作庫，然後在學習原生的實現方法，這樣才能真正的了解dom原理。以後無論采用哪種技術棧，再出現問題時，你才不會一臉迷茫不知所措。最後前端框架在寫單頁應用，並且dom操作過多的頁面時，這種數據綁定的實現方法確實具有很大優勢，但是她並不一定適合所有的應用場景，對於一些大公司來說，一些底層的老的業務，由於遷移成本較大，且為了友好的用戶體驗，還需要兼容低版本的瀏覽器，還是要使用jquery、zepto等操作dom的庫。

jQuery框架學習