jquery 源码结构学习

Posted 2020-12-29 春暖花未开

最近想要了解一下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库的整体结构很有帮助。