JQuery源碼 1 / 總體結構

本文分析的JQuery2.0.3版本內部實現原理，2.0.3版本已經去除了大量的對於舊版本瀏覽器的兼容性的處理，可是仍是有部分源碼是對不常見的或者老版本的ie瀏覽器進行處理，在看到這部分的時候若是感興趣能夠看一下，也能夠直接跳過，我的一直認爲學習舊版本瀏覽器的兼容是最沒有收益的，不要在必然要被淘汰技術上浪費太多時間

JQuery總體結構

(function(window,undefined){
  //代碼
}(window))

JQuery最外層使用的匿名函數自執行結構，爲了最大程度避免代碼污染，防止衝突

傳入參數window的主要目的有兩點

1. 在尾端傳入的參數是實參，代表在函數執行時第一個參數是window，這樣就避免了在內部使用window時再次去外層查找，在js中window屬於最頂層的變量，而根據js原型鏈的查找原則，函數會優先查找自己的變量，在查找不到的狀況下逐步向上查找，因此若是在window沒有做爲參數傳入到函數內部的狀況下，會從底層一直查找到最頂層，浪費大量性能，在形參中傳入第二個參數undefined，主要是考慮到在低版本瀏覽器中undefined的值是能夠改變的

   //IE7
   undefined=10;
   console.log(undefined); //10

   在代碼中咱們可能會須要判斷變量值===undefined的狀況，爲了不咱們獲取的undefined的值是被改變過的值，咱們在形參中傳入一個參數，因爲在實參中沒有傳入對應的值，那麼這個值自己就是undefined，因此咱們在使用undefined時就能夠直接使用該值，而不用擔憂是否在操做改變過的undefined

2. 爲壓縮代碼作考慮，若是window不是參數而只是一個變量，那麼window字段將沒法被壓縮，但若是隻是做爲形參的狀況下能夠被壓縮爲單字符，實際上咱們看壓縮後的代碼。window被壓縮成了e

JQuery返回的是一個對象，JQuery採用的是面向對象的寫法，在咱們日常使用面向對象的寫法大概以下

function A(){}
A.prototype.init=function(){ }

var a=new A();
a.init();

而在使用JQuery時咱們不須要new $()的形式來調用是由於JQuery採用了工廠模式，使咱們能夠採用無"new"的形式來建立對象，大概寫法以下

function JQuery(){
  return new Jquery.fn.init();
}

這樣的好處在於

1. 咱們直接執行了init的初始化方法
2. 直接返回一個JQuery的對象，用戶不須要調用new JQuery( )後再來調用JQuery的方法

但咱們會發如今JQuery中返回的是JQuery原型上的init方法，可是JQuery中的其餘方法是寫在JQuery的prototype上的，那麼是如何在init上調用其它方法的呢，主要是經過下面代碼

//96行
JQuery.fn=JQuery.prototype={
  constructor:JQuery,
  //...
}
//指定JQuery的fn就是JQuery的原型對象

//283行
JQuery.fn.init.prototype=JQuery.fn；

JQuery經過將init的原型賦值爲JQuery的原型，因此經過new JQuery.fn.init()出的對象能夠直接使用JQuery原型上的方法

在8826行將JQuery對象掛載到window下

window.JQuery=window.$=JQuery;