1. 程式人生 > >jquery 源碼結構學習

jquery 源碼結構學習

封裝 selector init exports tor pro .cn object ===

最近想要了解一下jquery 庫是怎樣實現的,源碼結構如何。通過查看資料知道了,jquery源碼整體結構如下所示,平時用到的例如$.ajax()形式的方法主要是通過jq.extend({})中定義的方法屬性得到的,形如$("div").css()方法是通過jq.fn.extend({})拓展得到。

(function(window,undefined){
var jq = function(selector,content){
return new jq.fn.init(selector,content,rootjq);
},
jq.fn = jq.prototype = {
init:functin(selector,content,rootjq){};
};
jq.fn.init.prototype = jq.fn;

jq.extend({
// 可供jquery“類”使用的屬性和方法,例如$.ajax(),同時可用在jq.fn.extend裏面使用的
// 屬性和方法
})

jq.fn.extend({
// jq對象具備的方法和屬性,例如:$("div").css()
removeDate:function(key) {
return this.each(function(){
jq.removeDate(this,key);
});
}
css:function(name,value) {
// ...
}

});

function fn(){
// 封裝的函數,可用於內部使用。
}

if(typeof module==="object" && module && typeof module.exports === "object") {
// 支持模塊化的模式
module.exports = jq;
}else {
window.jq = window.$ =jq;
if(typeof define === "function" && define.amd) {
define("jq",[],function(){
return jq;
});
}
}

})(window)

詳細信息可參考:https://github.com/chokcoco/jQuery-

https://www.cnblogs.com/xuxiuyu/p/5989743.html

http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385對理解jquery庫的整體結構很有幫助。

jquery 源碼結構學習