jQuery 源碼分析

whlong 發布于2019-08-21 17:55 / 881人閱讀

摘要：這里在函數中有一個的操作，一般構造函數不會這樣寫，但這樣寫并不會影響的結果，這參照之前的分解，便可以推出結果的一致只是返回了不同但值相同的變量。

這篇文章可以說是讀這篇文章這篇文章后的總結。

jQuery最基本的構成結構：

var jQuery = window.jQuery = window.$ = function(a,b){
  return new jQuery.fn.init(a, b);  // 1
}；

jQuery.fn = jQuery.prototype = {
  init: function (s) {
    this[0] = s;
    this.length = 1;
    this.context = s;
    return this;  // 2
  },
  age: function () {
    return this;
  }
};

jQuery.fn.init.prototype = jQuery.fn;  // 3

jQuery.extend = jQuery.fn.extend = function () {
  // 4
}

這是jQuery源碼一個最基本的概要實現，但從這個實現中已經能弄并學到很多東西了。

( 1 ) 首先 $ 也就是 jQuery 本身是一個函數，但它又不是一個普通的構造函數，這從 $("div") 的這種實例直接產生不需要 new 就可以知道，也就是它隱藏了實例 new 的過程， jQuery 自身只是一個工廠函數，它產出由它的原型上定義的 init 方法的實例，因為擁有了 new 的過程，所以實例化中的 this 都是指向了最終產生的實例本身，于是這樣便實現了無new構建。

( 2 ) 這里在 init 函數中有一個 return this; 的操作，一般構造函數不會這樣寫，但這樣寫并不會影響 new 的結果，這參照之前new 的分解，便可以推出結果的一致（只是返回了不同但值相同的變量）。而jQuery之所以在這里要返回 this 是有用處的，這樣最開始實例的 this 便得以保存，$("div").ready() 這樣的鏈式調用便能得到前方的實例對象，也就是說就是 return this; 實現了鏈式調用。

( 3 ) 那既然是原型上的 init 構造器方法構建的實例，又怎么能獲取到 jQuery 的原型方法呢，這就需要將 init 方法的原型用 jQuery 的原型對象覆蓋。也就是 3 部分的操作。

( 4 ) 最后 $.extend 與 $.fn.extend 之所以會不一樣，只是調用時分別是jQuery對象或jQuery.prototype(jQuery.prototype = jQuery.fn)導致了 this 的不同，實際定義是是用的同一個函數。

GPU云服務器云服務器 jquery插件源碼jquery jquery源碼源碼分析 nginx源碼分析

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

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

jQuery源碼分析之noConflict()

摘要：將或者的控制權讓給第一個實現它的那個庫，確保不會與其它庫的對象發生沖突。 noConflict() noConflict()將$或者jQuery的控制權讓給第一個實現它的那個庫，確保jQuery不會與其它庫的$對象發生沖突。 jQuery中源碼如下： var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict =...

Yuanf 2019-08-20 15:42 評論0 收藏0
體驗javascript之美-第十一課-jquery源碼分析

摘要：可以直接在這里查看至于的開源就不多說了。官網一個庫的官網永遠是了解它最新進展和學習資料的首選網站。比如下面我們就拿舉例分析下它的源碼。不解釋，你可以直接拿過去改吧改吧用在你自己的庫里。上節課我們說了寫一個庫的準備，但是這節課并不是寫庫為什么，有句話叫你沒吃過豬肉還沒看過豬走。所以我們先看看別人的庫是怎么寫的。在我們擁有了足夠扎實的基礎之后我們要做的不是閉門造車，而是去閱讀一些知名的庫...

王晗 2019-08-20 16:12 評論0 收藏0
jQuery源碼分析3-jQuery對象的擴展--extend

摘要：的指向的是對象，所以此時擴展的是對象，可以直接通過的方式調用。寫過jquery插件的人都知道可以通過jquery提供的extend可以對jquery對象進行擴展，而且該方法不僅可以對jquery對象擴展，還能給一個對象添加新的屬性和方法，這個在后面會介紹。通過不同的方式調用extend擴展的方法也不同：通過 $.extend() 擴展的是靜態方法；而通過 $.fn.exten...

MonoLog 2019-08-20 13:53 評論0 收藏0
jquery源碼分析

摘要：前言隨著前端的不斷發展，很多開發人員已經開始使用等框架，但是很少有人去深入分析以及的源碼本人也是，至今還停留在使用的層面。最近還在寫一些的筆記，有興趣的小白也可以看下我的博客文章源碼分析地址前言隨著前端的不斷發展，很多開發人員已經開始使用react、vue等web框架，但是很少有人去深入分析vue以及react的源碼（本人也是，至今還停留在使用的層面）。框架的使用勢必會有更新迭代的...

SHERlocked93 2019-08-22 16:35 評論0 收藏0
jQuery源碼分析-整體架構（轉）

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

voidking 2019-08-21 10:39 評論0 收藏0