手寫jQuery與原始碼分析

2021-10-03 19:30:57 字數 2402 閱讀 9779

所以,jquery以物件的方式繫結到window物件,實現相關操作。

(

function

(global, factory)

)(window,

function

(window)

;// 生成原型物件並覆蓋prototype物件

jquery.fn = jquery.prototype =

;// 物件if(

typeof selector ==

'object'

)// html物件

if(selector instanceof

htmlelement

)// event物件等

d[0]

= selector.target;

d.length =1;

}else

let i =0;

for(

; i < d.length; i++

)this

.length = d.length;

return

this;}

,// 在原型上新增方法

toarray:

function

(d)// 轉換陣列

return array;},

merge:

function

(second)

// 生產新物件

first.length = i;

// 返回jq物件

return first;},

eq:function

(i)// 選擇物件

,get

:function()

, each:

function()

, ready:

function()

, first:

function()

, slice:

function()

, children:

function

(val)

, find:

function

(val)

for (; i < this.length; i++)

*/ = 1;

return

this;}

// ... ...};

jquery.fn.init.prototype = jquery.fn;

// 組裝物件

jquery.extend = jquery.fn.

extend

=function

(options)

return target;};

// 呼叫extend方法,新增到建構函式 $.xx = jquery.xx

jquery.

extend(,

type:

function()

, parsehtml:

function()

, parsejson:

function()

, ajax:

function()

});// 呼叫fn.extend方法,新增到原型上 $(init).xx = jquery(init).xx

jquery.fn.

extend(,

promise:

function()

, attr:

function()

, prop:

function()

, addclass:

function()

, removeclass:

function()

, val:

function

(v),

css:

function

(attr, val)

, html:

function()

, ht:

function

(i),

oht:

function()

, sht:

function()

, st:

function()

});// ...

// $符號的由來,實際上它就是jquery,乙個簡化的寫法,在這裡我們還可以替換成其他可用字元

window.$ = jquery;

// 簡化列印

window.dd=

function

(...d);}

);

jQuery原始碼分析

工具 版本說明 版本號備註 jquery 2.1.1 sublime 3jquery function selector,context jquery.fn jquery.prototype 快速匹配正則 不加g 不光匹配整體項還會匹配到子項 rquickexpr s w w w init jque...

jQuery原始碼分析

一 jquery如何做到不汙染變數名並暴露出 供使用者使用 jquery將變數和 寫進立即執行函式,通過函式來包裹所有的變數和方法,再在這個立即執行函式上將 jquery方法繫結到window上,就可以讓使用者使用到jq方法了。二 jquery是如何做到 jquery 的?function wind...

jQuery 原始碼分析

這篇文章可以說是讀這篇文章這篇文章後的總結。jquery最基本的構成結構 var jquery window.jquery window.function a,b jquery.fn jquery.prototype age function jquery.fn.init.prototype jqu...