jQuery 源码分析笔记
程序员文章站
2023-04-07 14:28:32
jquery的宗旨是write less, do more。它对javascript的开发风格侵入性不如yui那么强,当然也不如dojo和yui如此庞大。它极大的简化了ja...
jquery的宗旨是write less, do more。它对javascript的开发风格侵入性不如yui那么强,当然也不如dojo和yui如此庞大。它极大的简化了javascript的日常开发工作,主要是dom元素的操作(从名字query就可以看出)。另外一个主要工作就是每个前端开发者都需要面对的浏览器兼容性。jquery兼容所有主流浏览器的大部分版本,从万恶的ie6开始直到firefox,chrome等现代浏览器。除了居于核心的一小部分代码之外,剩下的jquery都是松散的函数,扩展性很强。http://plugins.jquery.com上有成千上万的jquery插件,你需要的功能几乎都有对应的jquery插件,而且不止一个。
jquery代码的头部是license声明。采用了gplv2和mit双协议。而在jquery声明下是另一个项目的声明:sizzle。这是jquery作者另外的一个开源项目,在mit、bsd和gpl下发布。它是一个独立的selector实现(pure-javascript css selector engine),可以独立使用。它的压缩版本只有3kb多一点,号称效率最高的选择器实现。jquery从1.3开始使用sizzle代替了原来的selector实现。
js代码中有大量的()和{},这里使用的是vim阅读,因为%命令可以快速的找到匹配的括号。
代码总体结构和变量
jquery的代码整体上就是一个匿名函数调用:
(function (window, undefined) {
// ...
})(window);
这是为了避免污染全局对象,同时也可以方便的管理执行上下文。这个技巧在js代码中经常见到,在jquery代码中也很常见。比如,在jquery和其他js库同时使用时,$符号可能已经被使用了。为了仍然使用$符号:
(function ($) {
// $("...")... 照常使用$
})(jquery);
在这里传入真正的jquery对象。
下面进入真正的实现部分,首先是$,也就是jquery对象的声明,其中最基本的两个成员也列出来了:
var jquery = (function() {
var jquery = function(selector, context) {
// 真正的初始化函数
return new jquery.fn.init(selector, context, rootjquery);
},
// 一大堆变量声明
// fn是主要的函数实现点,也是jquery插件的起点。实际上就是js原型
jquery.fn = jquery.prototype = {
};
// 一个扩展对象用的函数,可以动态地往对象上加成员。以后往jquery里面加成员都是用extend函数完成的。
jquery.extend = jquery.fn.extend = function() {
};
// ...
return jquery;
})();
jquery对象是核心对象,所有$(...)得到的都是jquery对象,除了少部分直接实现在jquery下的utility函数之外,大部分函数都是用extend方法加到jquery对象里的。
jquery代码的头部是license声明。采用了gplv2和mit双协议。而在jquery声明下是另一个项目的声明:sizzle。这是jquery作者另外的一个开源项目,在mit、bsd和gpl下发布。它是一个独立的selector实现(pure-javascript css selector engine),可以独立使用。它的压缩版本只有3kb多一点,号称效率最高的选择器实现。jquery从1.3开始使用sizzle代替了原来的selector实现。
js代码中有大量的()和{},这里使用的是vim阅读,因为%命令可以快速的找到匹配的括号。
代码总体结构和变量
jquery的代码整体上就是一个匿名函数调用:
复制代码 代码如下:
(function (window, undefined) {
// ...
})(window);
这是为了避免污染全局对象,同时也可以方便的管理执行上下文。这个技巧在js代码中经常见到,在jquery代码中也很常见。比如,在jquery和其他js库同时使用时,$符号可能已经被使用了。为了仍然使用$符号:
复制代码 代码如下:
(function ($) {
// $("...")... 照常使用$
})(jquery);
在这里传入真正的jquery对象。
下面进入真正的实现部分,首先是$,也就是jquery对象的声明,其中最基本的两个成员也列出来了:
复制代码 代码如下:
var jquery = (function() {
var jquery = function(selector, context) {
// 真正的初始化函数
return new jquery.fn.init(selector, context, rootjquery);
},
// 一大堆变量声明
// fn是主要的函数实现点,也是jquery插件的起点。实际上就是js原型
jquery.fn = jquery.prototype = {
};
// 一个扩展对象用的函数,可以动态地往对象上加成员。以后往jquery里面加成员都是用extend函数完成的。
jquery.extend = jquery.fn.extend = function() {
};
// ...
return jquery;
})();
jquery对象是核心对象,所有$(...)得到的都是jquery对象,除了少部分直接实现在jquery下的utility函数之外,大部分函数都是用extend方法加到jquery对象里的。
推荐阅读
-
Android 自定义相机及分析源码
-
[Abp vNext 源码分析] - 5. DDD 的领域层支持(仓储、实体、值对象)
-
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
-
[Abp 源码分析]四、模块配置
-
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
-
vuex源码分析(二) state及strict属性 详解
-
kubernetes垃圾回收器GarbageCollector源码分析(一)
-
layer.js源码分析(实例)
-
原生仿写Jquery代码分析