jq源码分析 (version2.2.3)
- 定义变量和函数然后挂载到了window上:通过自执行匿名函数的方式实现. 局部作用域。然后函数内部将方法挂载到window上面方便外部调用的同时,不污染全局作用域。ex
(function(){
var a = 1;
function show(){
alert(a)
}
window.show = show;
})()
show()//1
45行到89行定义了一些变量和函数。重要的函数:jquery函数等。9810行将其挂载到了window上面:
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
91行开始,在jquery对象的原型上面挂载方法。
jQuery.fn = jQuery.prototype ={}
175行到243行,extend:jquery继承的一些方法key,希望后续添加的方法可以通过extend添加到jquery对象。
244行到511行扩展一些工具方法:
$().css();//只能是jquery对象用
//区别于以下的工具方法:可以给jquery和原生对象使用,更底层。
$.trim();
$.proxy()
545行到2680行。sizzle:复杂选择器功能的实现(多层)。
3144到3337行。jquery的回调对象callbacks:函数的统一管理。ex
function fn1(){alert(1)};
function fn2(){alert(2)};
var cb = $.Callbacks;
//添加:
cb.add(fn1);
cb.add(fn2);
//同时调用
cb.fire();//1,2
//删除
cb.remove(fn2)
3339行到3487行:Defered:延迟对象:对异步的统一管理。(定时器,ajax)ex:
setTimeout(function(){
alert(1)
},1000)
alert(2);
// 2,1
//如何改变顺序?
var dfd = $.Defered();
setTimeout(function(){
alert(1);
dfd.resolve();
},1000)
dfd.done(function(){
alert(2)
})
//实现的机制是利用了回调函数
3660行到3853行:data();数据缓存。ex:
//将数据挂载到元素身上
$('#div1').data('name','hello');
$('#div1').data('name')//hello.
//避免直接在元素身上挂载引用类型的时候出现内存泄漏
4036到4168。queue,dequeue:队列管理,执行顺序管理。ex:动画队列:
$('#a').animate({left:100});
$('#a').animate({top:100});
$('#a').animate({left:100});
后边的内容分为:
1. 对元素属性的操纵attr();prop();val();….
2. on(),trigger();…事件操作;
3. DOM操作:添加,删除,获取
4. css();方法样式操作。兼容性,写法,单位等。
5. 提交的数据和ajax的操作。ajax();load();getJson();
6. animate();运动相关的操作。
7. offset();位置与尺寸相关的方法。
8. jq支持模块化的支持。