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库的整体结构很有帮助。

posted @ 2018-08-14 23:09  春暖花未开  阅读(101)  评论(0编辑  收藏  举报