jquery 源碼結構學習
最近想要了解一下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 源碼結構學習