JQuery源碼 1 / 整體結構

warkiz 發布于2019-08-26 12:00 / 3512人閱讀

摘要：本文分析的版本內部實現原理，版本已經去除了大量的對于舊版本瀏覽器的兼容性的處理，但是還是有部分源碼是對不常見的或者老版本的瀏覽器進行處理，在看到這部分的時候如果感興趣可以看一下，也可以直接跳過，個人一直認為學習舊版本瀏覽器的兼容是最沒有收益

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

JQuery整體結構

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

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

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

在尾端傳入的參數是實參，表明在函數執行時第一個參數是window，這樣就避免了在內部使用window時再次去外層查找，在js中window屬于最頂層的變量，而根據js原型鏈的查找原則，函數會優先查找本身的變量，在查找不到的情況下逐步向上查找，所以如果在window沒有作為參數傳入到函數內部的情況下，會從底層一直查找到最頂層，浪費大量性能，在形參中傳入第二個參數undefined，主要是考慮到在低版本瀏覽器中undefined的值是可以改變的

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

在代碼中我們可能會需要判斷變量值===undefined的情況，為了避免我們獲取的undefined的值是被改變過的值，我們在形參中傳入一個參數，由于在實參中沒有傳入對應的值，那么這個值本身就是undefined，所以我們在使用undefined時就可以直接使用該值，而不用擔心是否在操作改變過的undefined

為壓縮代碼做考慮，如果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();
}

這樣的好處在于

我們直接執行了init的初始化方法

直接返回一個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;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107990.html

jQuery源碼分析-整體架構（轉）

摘要：文章出處拜讀一個開源框架，最想學到的就是設計的思想和實現的技巧。利用下的簡單工廠模式，來將所有對于同一個對象的操作指定同一個實例。所以的中提供了以上中擴展函數。文章出處 http://www.cnblogs.com/aaronjs/p/3278578.html 拜讀一個開源框架，最想學到的就是設計的思想和實現的技巧。廢話不多說，jquery這么多年了分析都寫爛了，老早以前就拜讀過，...

voidking 2019-08-21 10:39 評論0 收藏0
jQuery3.3.1源碼閱讀（一）

摘要：入口結構具體代碼抽離結構如下涉及到的知識解析函數時的規則函數定義和函數表達式閉包解析函數的規則解析器會在遇到時將其認為是函數定義而非函數表達式函數定義和函數表達式函數定義函數表達式閉包閉包函數中的函數，本質是指作用域內的作用域閉包舉例綜合以 1.入口結構 ( function( global, factory ) { use strict; if ( t...

王晗 2019-08-23 16:52 評論0 收藏0
淺析jQuery整體框架與實現（上）

摘要：通常的做法是，為它們指定回調函數。請求返回請求返回請求返回異步隊列解耦異步任務和回調函數為模塊隊列模塊事件提供基礎功能。前言 jQuery整體框架甚是復雜，也不易讀懂，這幾日一直在研究這個笨重而強大的框架。jQuery的總體架構可以分為：入口模塊、底層模塊和功能模塊。這里，我們以jquery-1.7.1為例進行分析。 jquery的總體架構 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 評論0 收藏0
學習 underscore 源碼整體架構，打造屬于自己的函數式編程類庫

摘要：譯立即執行函數表達式處理支持瀏覽器環境微信小程序。學習整體架構，利于打造屬于自己的函數式編程類庫。下一篇文章可能是學習的源碼整體架構。也可以加微信，注明來源，拉您進前端視野交流群。前言上一篇文章寫了jQuery整體架構，學習 jQuery 源碼整體架構，打造屬于自己的 js 類庫雖然看過挺多underscore.js分析類的文章，但總感覺少點什么。這也許就是紙上得來終覺淺，絕知此...

junnplus 2019-08-26 10:40 評論0 收藏0
學習 jQuery 源碼整體架構，打造屬于自己的 js 類庫

摘要：匿名函數將代碼包裹在里面，防止與其他代碼沖突和污染全局環境。學習整體架構，打造屬于自己的函數式編程類庫讀者發現有不妥或可改善之處，歡迎評論指出。雖然現在基本不怎么使用jQuery了，但jQuery流行10多年的JS庫，還是有必要學習它的源碼的。也可以學著打造屬于自己的js類庫，求職面試時可以增色不少。本文章學習的是v3.4.1 版本。unpkg.com源碼地址：https://un...

Gilbertat 2019-08-26 10:25 評論0 收藏0