jquery的外衣
jquery是乙個輕量級的js框架，這點相信大部分人都聽過，而jquery之所以有這樣乙個稱呼，就是因為它悄悄披了一件外衣，將自己給隱藏了起來。
//以下擷取自jquery原始碼片段(function( window, undefined ) )( window );
上面這一小段**來自於1.9.0當中jquery的原始碼，它是乙個無汙染的js外掛程式的標準寫法，專業名詞叫閉包。可以把它簡單的看做是乙個函式，與普通函式不同的是，這個函式沒有名字，而且會立即執行，就像下面這樣，會直接彈出字串。
(function( window, undefined ) )( window );
可以看出來這樣寫的直接效果，就相當於我們直接彈出乙個字串。但是不同的是，我們將裡面的變數變成了局域變數，這不僅可以提高執行速度，更重要的是我們在引用jquery的js檔案時，不會因為jquery當中的變數太多，而與其它的js框架的變數命名產生衝突。對於這一點，我們拿以下這一小段**來說明。
var temp = 「hello world!」; (function( window, undefined ) )( window ); alert(temp);
這段**的執行結果是hello而不是byebye，也就是說閉包中的變數宣告沒有汙染到外面的全域性變數，倘若我們去掉閉包，則最終的結果會是byebye，就像下面這樣。
var temp = 「hello world!」;// (function( window, undefined ) )( window ); alert(temp);
由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的乙個內容，是編寫js框架必須知道的知識，它可以幫助我們隱藏我們的臨時變數，降低汙染。
jquery的背心
剛才我們說了，jquery將自己宣告的變數全部都用外衣遮蓋起來了，而我們平時使用的jquery和$，卻是真真實實的全域性變數，這個是從何而來，謎底就在jquery的某一行**，一般是在檔案的末尾。
window.jquery = window.$ = jquery;
這一句話將我們在閉包當中定義的jquery物件匯出為全域性變數jquery和，因
此我們才
可以在外
部直接使
用jqu
ery和
。window是預設的js上下文環境，因此將物件繫結到window上面，就相當於變成了傳統意義上的全域性變數，就像下面這一小段**的效果一樣。
var temp = 「hello world!」; (function( window, undefined ) )( window ); alert(temp);
很明顯，它的結果應該是byebye，而不是hello。因為我們在閉包中匯出了temp區域性變數為全域性變數，從而覆蓋了第一行宣告的全域性變數temp。可以看出，就是通過匯出的方式，jquery露出了自己的小背心。
jquery的**
**保護的是我們的核心器官，因此非常重要。那麼jquery的**也一樣，也是最核心的功能，就是選擇器。而選擇器簡單理解的話，其實就是在dom文件中，尋找乙個dom物件的工具。
首先我們進入jquery原始碼中，可以很容易的找到jquery物件的宣告，看過以後會發現，原來我們的jquery物件就是init物件。
jquery = function( selector, context )
這裡出現了jquery.fn這樣乙個東西，它的由來可以在jquery的原始碼中找到，它其實代表的就是jquery物件的原型。
jquery.fn = jquery.prototype;jquery.fn.init.prototype = jquery.fn;
這兩句話，第一句把jquery物件的原型賦給了fn屬性，第二句把jquery物件的原型又賦給了init物件的原型。也就是說，init物件和jquery具有相同的原型，因此我們在上面返回的init物件，就與jquery物件有一樣的屬性和方法。
我們不打算深究init這個方法的邏輯以及實現，但是我們需要知道的是，jquery其實就是將dom物件加了一層包裹，而尋找某個或者若干個dom物件是由sizzle選擇器負責的，它的官方位址是有興趣的猿友可以去仔細研究下這個基於css的選擇器。
下面是lz擷取的乙個jquery物件的屬性和方法截圖，方法這裡就不提了，對於屬性來說，我們最需要關注的只有乙個屬性，就是[0]屬性，[0]其實就是原生的dom物件。
很多時候，我們在jquery和dom物件之間切換時需要用到[0]這個屬性。從截圖也可以看出，jquery物件其實主要就是把原生的dom物件存在了[0]的位置，並給它加了一系列簡便的方法。這個索引0的屬性我們可以從一小段**簡單的看一下它的由來，下面是init方法中的一小段對domelement物件作為選擇器的原始碼。
這一小段**可以在jquery原始碼中找到，它是處理傳入的選擇引數是乙個dom物件的情況。可以看到，裡面很明顯的將jquery物件索引0的位置以及context屬性，都賦予了dom物件。**不僅說明了這一點，也同時說明了，我們使用$(domelement)可以將乙個dom物件轉換為jquery物件，從而通過轉換獲得jquery物件的簡便方法。
jquery的大腿
大腿是非常**令男人垂涎的地方，要說jquery最**最令我們嚮往的，便是它的ready方法了，千萬不要告訴lz你使用jquery卻從未用過$(function(){})或者是ready方法。這裡lz不打算帶各位去看jquery的實現原理，因為比較複雜，而且這裡我們的主旨不是為了一點一點的剖析原始碼，而是簡介一下jquery的實現原理。
實現類似jquery的ready方法的效果我們是可以簡單做到的，它的實現原理就是，維護乙個函式陣列，然後不停的判斷dom是否載入完畢，倘若載入完畢就觸發所有陣列中的函式。
遵循著這一思想，lz拿出很久之前寫的乙個小例子，來給各位看一下。
這段**是lz從之前的例子摘出來的，它的實現邏輯非常簡單，但是可以達到jquery的ready方法的效果，各位有興趣的可以加入這個js檔案測試一下效果。需要注意的是，上面沒有考慮瀏覽器相容性，那段判斷文件載入是否完成的**是針對ie寫的，因此只能在ie下測試。
**當中已經嵌入了簡單的注釋，因此lz這裡就不多做解釋了，全部的原始碼可以在lz的另一篇文章jquery原始碼分析找到，有興趣的猿友也可以看下，那裡模擬了乙個非常簡陋的jquery。
jquery的胳膊
我們缺了胳膊依舊可以生活，甚至可以用腳寫程式，但是不得不承認，有了胳膊的我們會更加如虎添翼。而對於jquery來說，extend方法便是它的胳膊，沒有它我們依然可以很好的使用jquery，但是有了它，我們會更加暢快。
1、使用jquery.fn.extend可以擴充套件jquery物件，使用jquery.extend可以擴充套件jquery，前者類似於給類新增普通方法，後者類似於給類新增靜態方法。
2、兩個extend方法如果有兩個object型別的引數，則會將後面的引數物件屬性擴充套件到第乙個引數物件上面，擴充套件時可以再新增乙個boolean引數控制是否深度拷貝。
出處：左瀟龍的技術部落格
jquery 框架簡單分析
jquery外部用乙個匿名函式自執行 然後傳入引數 function w,undefined window jquery 在外面用了乙個匿名函式自執行 包裹 把變數 方法 函式 包裹在裡面 然後在對外提供介面 undefined既不是關鍵字 也不是保留字 所以要把undefined傳入進來 防止被惡...
react 原理的簡單分析
元件生命週期 元件從建立到掛載到頁面執行 完成複雜的元件功能 分析元件錯誤原因等。鉤子函式的作用 為開發人員在不同的階段操作元件提供了時機。鉤子函式 階段順序 鉤子函式 說明建立階段 1constructor 初始化 props and state 建立階段 2componentwillmount ...
CAT 原理簡單分析
簡介 cat本文簡單分析，啟動載入流程 啟動時載入catservlet 這裡分兩條線 乙個載入各個模組，如cathomemodule catconsumemodule catcoremodule等 乙個啟動乙個socket監聽，接收訊息，初始化縣城，使用consume模組的各個分析器，對訊息做不同分...