手寫jQuery與原始碼分析

所以，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...