以前也看過jquery庫源碼,網上也有不少對於jquery框架的分析教程,可是最近又想花點時間從新學習。jquery問世以來受到了廣大的前端開發者的青睞,對於不少前端開發者來講,走上前端的道路不是從寫原生javascript開始而是基本上都是從寫jquery開始的,甚至對於後端開發者來講,對於他們來講jquery也能輕鬆上手。那麼jquery爲何能這麼受歡迎呢,我我的看法,javascript
首先,jquery封裝了許多操做dom的方法和一些工具方法,對於各瀏覽器兼容性作到了完美的兼容,對於jquery 2.0以前能夠兼容到IE6瀏覽器。開發者不須要在爲了瀏覽器的兼容性寫上幾十行的代碼,使用jquery只需一行代碼。對於那個PC端盛行的年代,jquery完美的解決了廣大前端開發者的苦惱。前端
其次,jquery的框架設計,無new構建方式,以及友好的鏈式調用,使jquery用起來很是的簡潔。java
下面介紹jquery的無new構建:jquery
一般咱們建立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的庫。dom