成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JQuery源碼 1 / 整體結(jié)構(gòu)

warkiz / 3538人閱讀

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

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

JQuery整體結(jié)構(gòu)

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

JQuery最外層使用的匿名函數(shù)自執(zhí)行結(jié)構(gòu)，為了最大程度避免代碼污染，防止沖突

傳入?yún)?shù)window的主要目的有兩點

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

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

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

為壓縮代碼做考慮，如果window不是參數(shù)而只是一個變量，那么window字段將無法被壓縮，但如果只是作為形參的情況下可以被壓縮為單字符，實際上我們看壓縮后的代碼。window被壓縮成了e

JQuery返回的是一個對象，JQuery采用的是面向?qū)ο蟮膶懛ǎ谖覀兤匠Ｊ褂妹嫦驅(qū)ο蟮膶懛ù蟾湃缦?/p> 

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

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

而在使用JQuery時我們不需要new $()的形式來調(diào)用是因為JQuery采用了工廠模式，使我們可以采用無"new"的形式來創(chuàng)建對象，大概寫法如下

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

這樣的好處在于

我們直接執(zhí)行了init的初始化方法

直接返回一個JQuery的對象，用戶不需要調(diào)用new JQuery( )后再來調(diào)用JQuery的方法

但我們會發(fā)現(xiàn)在JQuery中返回的是JQuery原型上的init方法，但是JQuery中的其他方法是寫在JQuery的prototype上的，那么是如何在init上調(diào)用其它方法的呢，主要是通過下面代碼

//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;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107990.html

相關(guān)文章

  • jQuery源碼分析-整體架構(gòu)（轉(zhuǎn)）

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

    voidking 評論0 收藏0

  • jQuery3.3.1源碼閱讀（一）

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

    王晗 評論0 收藏0

  • 淺析jQuery整體框架與實現(xiàn)（上）

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

    VEIGHTZ 評論0 收藏0

  • 學(xué)習(xí) underscore 源碼整體架構(gòu)，打造屬于自己的函數(shù)式編程類庫

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

    junnplus 評論0 收藏0

  • 學(xué)習(xí) jQuery 源碼整體架構(gòu)，打造屬于自己的 js 類庫

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

    Gilbertat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<