由于jQuery的源码比较复杂，所以我选择从jQuery1.0.0版本开始学习，逐步深入。
而且本系列文章包含大量的个人观点，纯属本人学习的记录
jQuery1.0.0只有1800行左右的代码，相对来讲看起来还是比较简单的
首先，想说一下我对jQuery的理解
jQuery其实就是一个很大的构造函数
它为我们提供了很多实例化方法
当然，由于在js中函数本身就是对象
因此jQuery也提供了很多的静态方法
个人认为，这些静态方法更为底层
今天把jQuery的架构梳理了一下
其实我们可以将其中的方法抽出来，这样看起来就像是一个大的构造函数
function jQuery(){}
jQuery.prototype={
jquery: "",
size: function(){},
get: function(){},
each: function(){},
index: function(){},
attr: function(){},
css: function(){},
text: function(){},
wrap: function(){},
append: function(){},
prepend:function(){},
before: function(){},
after: function(){},
end: function(){},
find: function(){},
clone: function(){},
filter: function(){},
not: function(){},
add: function(){},
is: function(){},
domManip:function(){},
pushStack:function(){},
extend: function(){}, //*扩展其他实例化对象方法的核心方法
appendTo: function(){}, //*通过macros的to 扩展的方法
prependTo: function(){}, //*通过macros的to 扩展的方法
insertBefore: function(){}, //*通过macros的to 扩展的方法
insertAfter: function(){}, //*通过macros的to 扩展的方法
width: function(){}, //*通过macros的css扩展的方法
height: function(){}, //*通过macros的css扩展的方法
top: function(){}, //*通过macros的css扩展的方法
left: function(){}, //*通过macros的css扩展的方法
position: function(){}, //*通过macros的css扩展的方法
float: function(){}, //*通过macros的css扩展的方法
overflow: function(){}, //*通过macros的css扩展的方法
color: function(){}, //*通过macros的css扩展的方法
background: function(){}, //*通过macros的css扩展的方法
eq: function(){}, //*通过macros的filter扩展的方法
lt: function(){}, //*通过macros的filter扩展的方法
gt: function(){}, //*通过macros的filter扩展的方法
contains: function(){}, //*通过macros的filter扩展的方法
val: function(){}, //*通过macros的attr扩展的方法
html: function(){}, //*通过macros的attr扩展的方法
id: function(){}, //*通过macros的attr扩展的方法
title: function(){}, //*通过macros的attr扩展的方法
name: function(){}, //*通过macros的attr扩展的方法
href: function(){}, //*通过macros的attr扩展的方法
src: function(){}, //*通过macros的attr扩展的方法
rel: function(){}, //*通过macros的attr扩展的方法
parent: function(){}, //*通过macros的axis扩展的方法
ancestors: function(){}, //*通过macros的axis扩展的方法
parents: function(){}, //*通过macros的axis扩展的方法
next: function(){}, //*通过macros的axis扩展的方法
prev: function(){}, //*通过macros的axis扩展的方法
siblings: function(){}, //*通过macros的axis扩展的方法
children: function(){}, //*通过macros的axis扩展的方法
removeAttr: function(){}, //*通过macros的each扩展的方法
show: function(){}, //*通过macros的each扩展的方法
hide: function(){}, //*通过macros的each扩展的方法
toggle: function(){}, //*通过macros的each扩展的方法
addClass: function(){}, //*通过macros的each扩展的方法
removeClass: function(){}, //*通过macros的each扩展的方法
toggleClass: function(){}, //*通过macros的each扩展的方法
remove: function(){}, //*通过macros的each扩展的方法
empty: function(){}, //*通过macros的each扩展的方法
bind: function(){}, //*通过macros的each扩展的方法
unbind: function(){}, //*通过macros的each扩展的方法
trigger: function(){}, //*通过macros的each扩展的方法
_toggle: function(){},
toggle: function(){},
hover: function(){},
ready: function(){},
blur: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
focus: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
load: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
resize: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
scroll: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
unload: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
click: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
dbclick: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
mousedown: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
mouseup: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
mousemove: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
mouseover: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
mouseout: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
change: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
reset: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
select: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
submit: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
keydown: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
keypress: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
keyup: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
error: function(){}, //*同时绑定了un解绑定方法和one只触发一次的方法
//*由于上面已经定义过一个show方法，所以这里通过_show将其存储起来，否则下面的show方法会将其覆盖
_show: function(){}, //*动画方法
show: function(){},
_hide: function(){},
hide: function(){},
slideDown: function(){},
slideUp: function(){},
slideToggle: function(){},
fadeIn: function(){},
fadeOut: function(){},
fadeTo: function(){},
animate: function(){},
queue: function(){},
loadIfModified: function(){}, //*ajax方法
load: function(){},
ajaxStart: function(){},
ajaxStop: function(){},
ajaxComplete: function(){},
ajaxError: function(){},
ajaxSuccess: function(){}
};
jQuery.extend= function(){};
jQuery.init= function(){};
jQuery.each= function(){};
jQuery.className={};
jQuery.swap= function(){};
jQuery.css= function(){};
jQuery.curCSS= function(){};
jQuery.clean= function(){};
jQuery.expr= function(){};
jQuery.token= function(){};
jQuery.find= function(){};
jQuery.getAll= function(){};
jQuery.attr= function(){};
jQuery.parse= [];
jQuery.filter= function(){};
jQuery.trim= function(){};
jQuery.parents= function(){};
jQuery.sibling= function(){};
jQuery.merge= function(){};
jQuery.grep= function(){};
jQuery.map= function(){};
jQuery.event= {};
jQuery.browser= function(){}; //*browser方法要基于变量b b=navigator.userAgent.toLowerCase();
jQuery.boxModel=function(){}; //*boxModel方法要基于browser方法
jQuery.macros= {}; //*由此派生出若干实例化对象的方法
jQuery.isReady= false; //*load模块
jQuery.readyList=[];
jQuery.ready= function(){};
jQuery.setAuto= function(){}; //*动画模块
jQuery.speed= function(){};
jQuery.queue= function(){};
jQuery.dequeue= function(){};
jQuery.fx= function(){};
jQuery.get= function(){}; //*ajax模块
jQuery.getIfModified=function(){};
jQuery.getScript=function(){};
jQuery.post= function(){};
jQuery.timeout= 0;
jQuery.ajaxTimeout=function(){};
jQuery.lastModifed=function(){};
jQuery.ajax= function(){};
jQuery.active= 0;
jQuery.httpSuccess=function(){};
jQuery.httpModified=function(){};
jQuery.httpData=function(){};
jQuery.param= function(){};
当然这里面省略了很多的细节
在梳理的过程中，发现了很多的问题，如下：
1、看到jQuery.macros的时候感觉很晕，后来才发现macros其实是把相关的方法或者属性名放到了一起，在合适的时机去初始化
例如macros.to下面的appendTo prependTo insertBefore insertAfter这四个方法就是在DOM模块被初始化的
2、v1.0.0对于避免污染全局空间的做法是用new function(){}形成封闭空间，由于之前本人一直用(function(){xxx})();来处理此类情况
所以看到new function(){}有些无所适从，后来通过查阅相关资料才发现这种方法其实相当于new Aaa;
new是js中的一个单目运算符，new后面的方法名的括号是可以省略的，所以完整的写法应该是new function(){}() 其中function(){}就相当于一个函数名
new function(){}通常用来初始化一些东西，但又没有污染全局对象
3、梳理到动画模块的时候，看到有_show和show两个方法瞬间石化了，不知道是干啥的，
经过高手指点才发现，在之前的实例化方法中，已经有一个show方法了，所以在定义第二个show方法的时候先用了一个_show方法将第一个show方法存了起来，
之所以存期来，是因为第二个show方法中需要调用第一个show方法
附带一句个人之拙见：jQuery的作者为什么不再起一个别的名字额外定义一个方法呢？非得弄成两个同名的方法，还用一个变量缓冲，搞不明白John Resig是怎么想的
hide和_hide也是同样的道理
4、本以为作者在处理两个名字一样的方法时就会通过_xxx来存储，但是例外出现在load，我很惊奇的发现实例化对象中有两个load方法
这样一来后面的load不就覆盖了前一个load了吗？后来定睛一看才发现后面的这个load方法可以大大方方的覆盖前一个load方法，没有任何关系
因为后面一个load方法实现了前一个load方法的所有功能，而且还扩展了和ajax相关的新的功能
但是感觉还是不对劲，既然后面的能实现，为什么前面还写一个load方法，感觉前面的load方法定义的既重复又没用
不过后来经过仔细分析，发现我又错了，因为第一个load方法是通过如下方法加到jQuery的实例化对象上的：
var e = ("blur,focus,load,resize,scroll,unload,click,dblclick," +
"mousedown,mouseup,mousemove,mouseover,mouseout,change,reset,select," +
"submit,keydown,keypress,keyup,error").split(",");
for ( var i = 0; i < e.length; i++ ) new function(){
var o = e[i];
jQuery.fn[o] = function(f){
return f ? this.bind(o, f) : this.trigger(o);
};
jQuery.fn["un"+o] = function(f){ return this.unbind(o, f); };
jQuery.fn["one"+o] = function(f){ .....
};
};
也就是说，人家除了绑定load方法之外还绑定了unload和oneload方法，要是按照我当初想的那样来变量e中去掉load的话
后面ajax模块还得将unload和oneload方法也加上去，那样就更麻烦了
所以采用了现在前面定义再覆盖的形式
时间： 2024-11-03 14:38:42