jquery源碼特點

Ⅰ 如何正確閱讀jquery源碼和jquery插件源碼

1. jQuery 裡面有很多東西是出於兼容性，歷史遺留。

比如 .ready() 之類的函數，為什麼會很scroll 有關，那是為了兼容某些ie。這種代碼對於編程思想來說不僅沒用，而且是雜音，你要篩選出來就得了解這段代碼的變動，費心費力得不償失。

2. jQuery 裡面的代碼不一定是最優的，例如事件委託，每一次事件觸發都要調用選擇器，實際上是效率很低的。但是我又比較懶，沒有提交patch。

3. jQuery 實際上很容易寫出來一個 barebone alternative，在使用的過程中多想，多思考多總結就可以了。

4. jQuery 這類框架里真正有思維挑戰性的東西不多，一半以上是堆代碼而已，剩下的一點價值在於架構、抽象、擴展能力。

5. 我有一句話與所有的同行分享：工程師讓需求成為現實，優秀工程師化復雜為簡單，頂尖工程師變不可能為可能；架構師掌握現在，優秀架構師展望未來，頂尖架構師創造時代。

jQuery 的設計目的是，讓前端工程師的工作更簡單更輕松，但它並不適合所有的前端工程師，假如你的目標是成為優秀架構師、頂尖架構師的話，你在jQuery里也看不清未來。

Ⅱ 完全理解jQuery源代碼，在前端行業算什麼水平

依讀了2周jQuery源碼的人感覺來說，完全理解jQuery，就拿jQuery 1.11這個版本10337行代碼來說，水平已經很不錯了。謙虛點說，已經入門。驕傲點，國內領先水平。但其碼我感覺是js架構之路起行的第一步，完全理解源碼，說明有獨立構建或組織大型web前端框架的能力和基礎。然後看看完全理解jQuery是一個怎麼樣的狀態。

看下面幾個鏈接就明白了：
RubyLouvre/avalon · GitHub
artDialog
aui/artDialog · GitHub(後來的新版代碼有所改變)
沒錯，這兩個里邊，就是在繼承jquery的基礎上做了自己的創新嘗試。
然後在看下面這位：
[原創] jQuery1.6.1源碼分析系列（停止更新）
是唯一出過jquery源碼分析書的一位：
《jQuery技術內幕：深入解析jQuery架構設計與實現原理》(高雲)【摘要 書評 試讀】
然後在看這位：
jQuery 2.0.3 源碼分析系列
是目前一直在更新的一位，通俗有深度且版本比較新。
在說一下我2周閱讀jquery源碼的心得，初看源碼寫的惡心，再看寫的不錯，細看寫的真是精妙。然後今天在看ext 4.2的源碼，真是流暢易讀。基本來說，看懂jQuery源碼，以後的源碼學習之路可以說，平坦。
然後說是不是高手，高手只是一個自我定位的心理暗示，是一種人格魅力的體現，是業務與技術的完美結合。個人感覺只能無限的接近，不能在有限的生命里邊到達。我們在通往目的地過程中享受一路的風景，這才是生命的意義。
然後在說前端，前端的核心是js，外圍打醬油的技術太多，不一一列舉。

css就像一瓶酒，得品。

html,css總共就那些標簽跟選擇器屬性什麼的，但是要寫一個有擴展性，健壯性或維護性的頁面不容易。現在寫頁面基本條件反射，不是如何快速的完成，而是思考如果有前端界面需求修改，怎麼在修改代碼最少的情況下完成整體需求任務。

js就像一把劍，得磨。
js剛開始只是為了較驗，隨便技術社會的發展，承擔的角色越來越重，剛開始玩玩jQuery感覺已經會js了，其實只是冰山一角。隨著對js的了解越來越多，他即變態又可愛，即好玩又難控，即有很多兼容問題，但解決兼容是我們基本生存之道。

人生就是一場夢，得作。

技術只是生活的一部分，曾經雄心鬥志，如今低頭寫碼。改變能改變的，接受不能改變的。人生有限，兄爭朝夕啊。
最後說，什麼時候能閱讀jQuery源碼，我感覺其碼是純js編碼一年以上，js基礎知識沒有盲點。閱讀源碼，確實能學到很多東西。不只是技術，而是一種生活的態度。一種把一件事情做到極致的態度

Ⅲ jquery源碼 ，jquery選擇器，javascript，正則表達式

quickExpr應該是個二義正則。前半段是:
^[^<]*(<[\w\W]+>)[^>]*$:我猜測意思是一個簡單的標簽。如$('<div>new Div</div>')匹配的用法。
後半段是:
^#([\w-]+)$:這個顯然就是id選擇器。->getElementById
注意兩個正則用了|來分隔二義,所以你這里的匹配不成功是正常的。
jquery應該是根據這個quickExpr來判斷
if(match[1]) createNewfragment();....
else if(match[2]) getElementById();
當然這只是個人猜測,沒有細讀jquery源碼。僅做參考

Ⅳ 為何jQuery源碼哪么復雜

說jquery源碼復雜，是因為你基礎不結實。多看點基礎知識吧。

Ⅳ 如何高效地閱讀 jQuery 源碼

嘗試把jquery拆分為ecma擴展(以及emitter promise和queue)，dom兼容性問題(compressed && gziped 小於14k，嘗試理解哪些函數我不提供兼容性就不能使用，哪些我可以接受原生寫法，同時包括一個自己寫的css3選擇器) , 鏈式調用(嘗試理解用戶需求，理解怎麼寫方便)，動畫庫(你是不是可以jq和css3兼容呢)

Ⅵ jquery源碼是否嘗試去讀過

有啊，我還看過別人中文解釋他的源碼，不愧是高手寫的代碼，很注重細節。有機會真的可以去看看，對你以後寫小型框架很有幫助。如果想看源碼注釋，可以直接發Q給我，我發給你。

Ⅶ jQuery 源代碼看不懂，怎麼辦。。有沒有解釋jQuery 源代碼的書籍

要不要閱讀別人代碼？
要。
閱讀別人代碼干什麼？
提高自己的代碼質量。
試圖通過閱讀別人代碼找出代碼的邏輯？
錯誤。
試圖通過閱讀別人代碼找出想要實現自己的邏輯的代碼？
正確，只有遵循了這個原則，才能實現物為我所用。
毫無目的去看別人代碼 不暈才怪呢。

Ⅷ jquery和javascript有什麼區別

JavaScript 是一種腳本語言，主要用在瀏覽器中，實現對網頁的文檔對象的操作和一些用戶交互動作的處理。

而 jQuery 則是 JavaScript 的一個代碼庫（或習慣性叫類庫），它將一些在 JavaScript 開發中經常用到的功能集合起來，以方便開發者直接使用，而不需要再用原生 JavaScript 語句寫大量代碼，同時可在不同瀏覽器間實現一致的效果。是當前最流行的 JavaScript 庫之一。

(8)jquery源碼特點擴展閱讀：

jquery和javascrip都是腳本語言，

腳本語言又被稱為擴建的語言，或者動態語言，是一種編程語言，用來控制軟體應用程序，腳本通常以文本（如ASCII)保存，只在被調用時進行解釋或編譯。

特點：

1、腳本語言(JavaScript，VBscript等)介於HTML和C,C++,Java,C#等編程語言之間。HTML通常用於格式化和鏈接文本。而編程語言通常用於向機器發出一系列復雜的指令。

2、腳本語言與編程語言也有很多相似地方，其函數與編程語言比較相像一些,其也涉及到變數。與編程語言之間最大的區別是編程語言的語法和規則更為嚴格和復雜一些.

3、與程序代碼的關系：腳本也是一種語言，其同樣由程序代碼組成。

4、腳本語言是一種解釋性的語言,例如Python、vbscript,javascript,installshield script,ActionScript等等,它不象cc++等可以編譯成二進制代碼,以可執行文件的形式存在，腳本語言不需要編譯，可以直接用，由解釋器來負責解釋。

5、腳本語言一般都是以文本形式存在,類似於一種命令。

舉個例子說：如果建立了一個程序,叫aaa.exe，可以打開.aa為擴展名的文件，為.aa文件的編寫指定了一套規則(語法)，當別人編寫了.aa文件後，自己的程序用這種規則來理解編寫人的意圖，並作出回應，那麼，這一套規則就是腳本語言。

6、相對於編譯型計算機編程語言：用腳本語言開發的程序在執行時，由其所對應的解釋器（或稱虛擬機）解釋執行。系統程序設計語言是被預先編譯成機器語言而執行的。腳本語言的主要特徵是：程序代碼即是腳本程序，亦是最終可執行文件。腳本語言可分為獨立型和嵌入型，獨立型腳本語言在其執行時完全依賴於解釋器，而嵌入型腳本語言通常在編程語言中（如C，C++，VB，Java等）被嵌入使用。

7、和系統程序設計語言相比：不同是腳本語言是被解釋而系統程序設計語言是被編譯。被解釋的語言由於沒有編譯時間而提供快速的轉換，通過允許用戶運行時編寫應用程序，而不需要耗時的編譯/打包過程。解釋器使應用程序更加靈活，腳本語言的代碼能夠被實時生成和執行。腳本語言通常都有簡單、易學、易用的特性，目的就是希望能讓程序設計師快速完成程序的編寫工作。

參考資料：網路-腳本語言

Ⅸ $到底是什麼-詳解jQuery的$符號和init函數

jQuery是現在最流行的Javascript框架， $是其中最常見的符號，已經在jQuery留下了深深的烙印。 接下來我會徹底分析這個符號背後隱藏的秘密。jQuery，高效，精煉，特別是對DOM元素對象操作的簡化，很大程度上將前端程序員從一大堆冗餘的代碼解放出來，大大提高了開發效率！對多瀏覽器的兼容性，也最大限度讓程序員擺脫各種bug的糾纏$符號作為元素選擇器的簡寫，最早是由Prototype庫使用，來簡寫getElementById，jQuery沿襲這一理念，並發揚光大，使$符號成為了jQuery最別具一格的特點。那麼在jQuery中，$符號到底是啥？熟悉jQuery的人應該知道，幾乎jQuery所有操作，都是從$符號開始，當作為元素選擇器的時候，操作結果返回的是一個jQuery對象。 那麼，現在就看jQuery類的構造函數的主要代碼jQuery對象的構造函數 var jQuery = (function() { //創建jQuery對象,給所有的jQuery方法提供統一的入口,避免繁瑣難記 var jQuery = function( selector, context ) { //jQuery的構造對象,調用了jQuery.fn.init方法 //最後返回jQuery.fn.init的對象 return new jQuery.fn.init( selector, context, rootjQuery ); }, ..... //定義jQuery的原型,jQuery.fn指向jQuery.prototype對象 jQuery.fn = jQuery.prototype = { //重新指定構造函數屬性,因為默認指向jQuery.fn.init constructor: jQuery, init: function( selector, context, rootjQuery ) {.....}, ...... } ...... //返回jQuery變數,同時定義將全局變數window.jQuery和window.$指向jQuery return (window.jQuery = window.$ = jQuery); })(); 從以上jQuery的主體結構，我們可以看出，當首次執行完畢後，全局變數$和jQuery，都是指向了var jQuery=function（selector，context）{}這個函數，這里，就可以下個結論，$就是jQuery的別名，實際調用jQuery.fn.init。再看看var jQuery=function（selector，context）{}這個構造函數，為什麼裡面不直接返回jQuery的對象？而是調用另外一個方法呢？假如直接返回對象的話，每次使用jQuery對象，都要new jQuery() 這樣的話，十分不方便，直接將new 這個操作封裝在jQuery構造函數裡面，簡化了實例化的操作，同時，jQuery通過了jQuery或者$符號，統一了介面，方便代碼的編寫，化繁為簡，提高效率。那麼jQuery類具體是如何構造的？居然能支持各種參數形式的調用 直接上jQuery.fn.init的「轅馬」，jQuery的真實構造器，我們就可以完全清楚了init源碼 /*所有查找或生成元素的結果，封裝為jQuery對象數組返回. */ init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // 1)處理 $(""), $(null), or $(undefined) //this指向jQuery對象 if ( !selector ) { return this; } // 2)處理 $(DOMElement) //selector.nodeType得知為DOM元素,如果是DOM元素直接放進jQuery對象數組中 if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } //3)body元素只出現一次, 優化查找 if ( selector === "body" && !context && document.body ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } //4)如果是字元串,有六種情況, /* *(1)單個html元素 不帶屬性對象字面量 ：createElement + merge *(2)單個html元素 帶屬性對象字面量 ：createElement + attr + merge *(3)多個html元素 ：buildFragment + merge *(4)#id 不帶context ：getElementById或者getElementById + Sizzle *(5)#id 帶context ：Sizzle *(6)experession string ：Sizzle *(7)標簽選擇器 ：Sizzle（內置getElementByTagName） */ if ( typeof selector === "string" ) { // 判斷是否為HTML string 還是 ID //如果是HTML strings match[1] 非空 //如果是ID strings match[1] 空 //quickExpr = /^(? jQuery.clone(ret.fragment) : ret.fragment).childNodes; } //將生成結果selector 合並到jQuery對象中 return jQuery.merge( this, selector ); // 處理$("#id"),例如$("#xxx"); } else { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { //處理IE和Opera ID 與 Name 混淆的bug,使用Sizzle查找 if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // 否則，簡單插入jQuery對象數組 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 處理 $(expr, $(...))，使用Sizzle查找，例如$("div"),$('div > a'),$('div,a'),$('div:first') } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // 處理: $(expr, context),例如$('div a');或者$('a','div')或者$('div').find('a'); } else { return this.constructor( context ).find( selector ); } //5)處理: $(function),設置DOM載的時候綁定的函數,等同於$().ready(){foo} } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //6)處理：$($(...))，完成克隆jQuery對象的簡單參數，具體由makeArray完成 if (selector.selector !== undefined) 完成加{ this.selector = selector.selector; this.context = selector.context; } //使用makeArray，為jQuery對象添加元素,例如$([1,2]); return jQuery.makeArray( selector, this ); }, 從源碼可以看出，jQuery 通過各種條件判斷和強大的正則表達式，實現了各種參數的調用。

Ⅹ 逐行分析jquery源碼的奧秘 一共多少節

看完之後對對象和原型的理解幫助會非常大。
但最好等用jquery比較熟悉之後再看源碼，那麼會對理解比較有好處，也會比較容易看懂。

最好從jquery核心處開始看，看懂$.fn.init以及基本方法之後再看別的$.extend的時候就比較容易了。