前端入門之必會jQuery原始碼架構講解

2021-09-11 14:20:08 字數 1237 閱讀 1798

* 不管是何時入門的前端小夥伴,或多或少都會接觸過jquery,也算是前端發展的基石。

* 我所理解到的jquery原始碼架構是這樣子的

* step1 通過自執行函式,建立命名空間

* step2 共享原型

* step3 通過內部extend管理**

* 貼架構原始碼和注釋理解

(function(global)

//jquery例項上的方法定義在此

jquery.fn = jquery.prototype = ,

//寫例項方法 呼叫時候,我們一般通過$().first 呼叫

first: function

() }

//通過工具函式extend管理維護**

jquery.extend = jquery.fn.extend = function

(); var i = 1;

var key;

if(typeof target!=='object'|| typeof target!=='function');

}//本身 例項

if(len==i)

//任意物件

for(;ifor(key in arguments[i])}}

//管理維護** jquery 自身上的方法屬性定義在這個之內

jquery.extend(

})//實現平時例項外掛程式的擴充套件機制

//為以後的例項準備jquery原型建構函式

jquery.fn.init.prototype = jquery.fn; 是建構函式

//暴露給全域性api

global.$ = global.jquery=jquery;

})(this)

複製**

api呼叫偽**

$.ajax();

$().first();

// 標準外掛程式 jquery本身擴充套件

$.extend(

})//直接掛在在$下,不推薦

$.getname = function(name)

// 標準例項外掛程式

$.fn.extend(

})//或者直接擴充套件,不推薦

$.fn.getname = function(name)

// 當成工具函式,擴充套件物件

$.extend({},,)

複製**

AQS之countDownLatch原始碼解析

public class countdownlatch int getcount protected int tryacquireshared int acquires protected boolean tryreleaseshared int releases private final syn...

redux系列之react thunk原始碼解讀

不過,redux只是乙個和其他庫無關的狀態管理庫,為了能夠方便的在react中使用,我們必須結合react redux來使用。react redux通過provider使用給react專案的所有子元件注入store,通過connect給元件注入state和dispatch。但是,有了react re...

前端總結之jQuery

1,jquery fadein 方法 jquery fadein 用於淡入已隱藏的元素。2,jquery fadeout 方法 jquery fadeout 方法用於淡出可見元素。3,jquery fadetoggle 方法 jquery fadetoggle 方法可以在 fadein 與 fade...