1. 使用最新版本
3. 用for替代each
4. 用ID替代class选择器
6. 建立缓存
不要犯不断重新选择同一个东西的错误。你应该把你要处理的元素缓存为一个变量。更不要在一个循环里重复选择同一个元素！这样做十分影响速度！
7. 避免DOM操作
- $('#item').css('color', '#123456');
- $('#item').html('hello');
- $('#item').css('background-color', '#ffffff');
- // 这样写更好
- $('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
- // 甚至这样
- var item = $('#item');
- item.css('color', '#123456');
- item.html('hello');
- item.css('background-color', '#ffffff');
DOM操作应该越少越好，因为诸如prepend()，append()，after()的插入动作都很费时。上面的例子如果用html()会更快：
8. 避免使用concat()，利用join()处理长字串
9. 返回false值
您可能已经注意到，如果函数执行后不返回false，你就会被跳转到页面顶部。如果页面较长，这种反应是很烦人的。
jQuery的整个代码,完全封装在一个 匿名函数中, 结构大体如下:
(function() {
/*
此处为jQuery的逻辑代码
*/
})()
所有 的jQuery代码到封装在这一个匿名函数中了(怎么还能要求再要自行车呢?)! 为什么使用匿名函数呢? 这个也是为了保证封装,保证在这个函数之外,不能被调用.
匿名函数如何执行呢?其实这里使用了一个技巧,把一个JavaScript代码段,放入一个括号()中,然后再紧跟一个括号(),这样就能保证 第一括号内的代码段 立即执行了,其实我通常把这种结构称为"立即执行函数 ". 其实命名函数也可以通过这么去立即执行,如下:
<script type="text/javascript">
(function() {
/*
此处为jQuery的逻辑代码
*/
})();
(function xieRan() {
alert("my name is xieran.");
})();
</script>
那么如果你运行这段代码的话,他就会立即弹出一个alert提醒框.当然也可以给立即执行函数传参数,如下:
(function xieRan(形参A, 形参B) {
alert("my name is " + 形参A + " and I live in " + 形参B);
})("xieran", "qingdao");
立即执行函数是多么的优雅啊,回想我们原来为了执行一个函数--首先定义这个函数,然后在写一行代码去分步骤执行--是不是原来的写法有点"笨拙",如下:
function xieRan(userName) {
alert("my name is " + userName);
};
xieRan("xieran");
命名函数是可以分步骤,但是匿名函数就只能通过立即执行的结构来运行了.
2.我们看jquery究竟给window这个顶级对象干了什么事.
通过上面第一个观点,我们知道整个jQuery就是一个大的匿名函数,同时我们一般都是通过如下的方式把jQuery加载到我们页面(其实就是加载到window这个对象中)中:
<script type="text/javascript" src="YOURPATH/jQuery.js"></script>
那么也就是说我们就立即执行了这个匿名函数.
在这个匿名函数内部究竟执行了什么呢? 我们可以概括的说,其创建了很多个对象,很多个方法,但是这些对象和方法都是作为jQuery这个对象的属性而存在. 其总共向外暴露一个对象就是jQuery,通过一下方式:
window.jQuery = window.$ = function(selector, context) {
/*
具体的构造逻辑
*/
};
也就是说其仅仅使用了window这个对象的两个属性(怎么还能有侵入呢?)
比如我们通常写JavaScript的方式:
<script type="text/javascript">
var myName = "xieran";
var myNation = "China";
var myLoacation = "qingdao";
</script>
这一下就给window这个对象定义了3个属性,如果你不相信,你可以通过 如下的代码 看看结果:
alert(window.myName);
alert(window.myLoacation);
alert(window.myNation);
之所以这样,是因为缺省情况下,我们在页面中定义的变量等数据,都会作为顶级对象window的成员而存在.
jQuery为了避免跟其他库或者代码冲动,仅使用了少数的几个window属性,何谈"侵入"?
3.就是我则会观点2中谈到的,jQuery使用window的几个属性中的 “$”,其还是仅能算是半个,因为jQuery可以让出其使用权.
相信使用过jQuery的朋友都 知道jQuery有这么一个方法 noConflict(),(其目的就是当我们在一个页面中同时使用到了多个JavaScript库,而其他库又已经使用了$的时候,我们就可以让那个 jQuery不再使用这个$),这个方法实现的 思路大体如下:
a.在jQuery内部定义了一个 私有的变量: _$ ;
b.将window.$对象(这个时候$内部可能保存了其他库的对象) 首先保存在 刚才定义的私有变量里面: _$ = window.$ ;
c.当我们调用noConflict()的时候,其再把 将保存有其他对象的 _$返回window: window.$ = _$ ;
d.让jQuery使用其他的符合.
在jQuery代码的最开始
jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
}
这样定义了一个名称为jQuery的function,同时将这个function赋给window的成员window.jQuery和 window.$. 请注意 这个function将会作为一个普通的方法(关于function的作用:普通方法/类型构造器 的辨析请参考笔者的第一片文章)(当然这个function也会作为类型使用,不过目前其是作为普通方法使用,关于jQuery这个function的辨 析,请看本文最后的附文),暴露出来,让Web程序员在开发时调用,这个也是我们使用 jQuery的入口点,如下:
$(document). doSomething();
$("#mySpan"). doSomething();
等.
在这个方法体内,我们看到其 通过new关键字构造了一个 jQuery.fn.init类型的实例.那么我们就逐步解读jQuery原型对象内的这个类型(因为jQuery.fn=jQuery.prototype,所以我们说这是一个原型对象内的类型).
jQuery的原型对象定义的比较长(在1.3版本中,从25行一直到525行,共计500行),原型内的init()方法,也不算太短.
1.这个方法有两个参数 一个是选择器对象,一个选择器所在的环境(即在DOM的哪个部分去 查找这个选择器对象).不过我们开发人员使用的时候很少传递第二个参数(如果不传递第二参数,其会默认为document,即在整个文档内查找).
2.方法体内首先判断 是否给这个方法传入了相应 选择器对象
selector = selector || document;
通过这样确保selector对象是存在的--如果没有通过参数传入selector,那么就把document作为selector,这也就是我 们看到很多介绍jQuery入门的文章提到几种使用jQuery选择器中的一种方式,即$()就代表$(document). (不知道大家是否真的理解了JavaScript中的操作符"||","&&"以及"!",你看一下本文的附注2,也许能有点好处.)
[******非常抱歉本来还有很多内容,但鉴于时间的关系,这个内容没有写完**************]
[****因为临时有事, 同时本系列文章, 可能也通过这种方式还在才刚刚开始的时候就忽然的终结,对关注这系列的朋友,sorry**********]
附1:关于jQuery 这个"关键字"的辨析
在jQuery的代码逻辑中,jQuery这几个字母,其在不同地方使用,是指代不同的角色的.
a.一个普通方法.在我们日常开发中,使用jQuery(或者$) 选择页面元素的时候($("#mySpan") ), jQuery他就是一个普通的方法,这个在正文中也提及.
b.一个类型实例.本来这个function是一个普通方法,但是这个方法内部 return了一个new后的对象,因此,jQuery也表示一个对象实例.(其实更准确的说jQuery表示的是jQuery.fn.init这个类型 的实例,因为我们看到在这个function内通过new关键字 操作的就是jQuery.fn.init这个类型,但是后面的代码中,又有这么一句jQuery.fn.init.prototype = jQuery.fn,即把jQuery的原型对象赋给了jQuery.fn.init的原型对象,因此我们就可以近似的认为 这个function返回的就是jQuery的类型实例了)
c.一个类型.正像 第一片文章中说的那样,任何function都会有两个角色.因此这个地方 jQuery也是类型.我们很多地方 使用了 如下这样的方式 $.doSomething(),那么其实是把jQuery做为类型在使用了,我们这样使用($.doSomething()),其实是使用了这个类型的 静态方法.
jQuery究竟是代表一个 普通方法,还是一个类型,抑或是 一个类型实例,这个还要看具体使用的环境,也只有当我们能完全清楚了jQuery在其上下文中充当的角色后,我们才能更容易理解jQuery的代码逻辑.
附注2:也许是你不知道的JavaScript的操作符的用法
a.操作符"|| ". 如果对几个对象同时进行"||"操作的时候,JavaScript首先将这些对象 转换成 true和false,然后在进行"||", 这个很重要. 那么什么对象转换成true,什么对象转换成false呢? 首先关键字true和false会进行本义的转换这个没有问题. 接着如果一个对象 是存在的(不是undefined,不是null),那么这个对象就会转成true,否则就为false. 在同时进行&&操作的几个对象进行计算的时候,顺序从左到右,碰到第一为true的对象后,就把这个对象 返回(把剩下还没有判断的对象忽略).返回的时候,不是返回true或者false,而是返回这个对象自身,如下:
(function(passedObj) {
var existedObj = {};
var validObject = null ||false ||passedObj || "validString" || existedObj;
alert(validObject);
})();
(其中passedObj是一个 "需要"传入的参数,实际调用的时候,并没有传入,因此其必定为undefined)
那么其将会弹出 第一为true的对象,即 validString.
b.操作符 "&& " 道理亦然.只是碰到第一为 false的对象返回,同时忽略剩下还没有判断的对象.
c.操作符"! " 这就简单了,将要判断的对象 转成 true或false后,然后取反.其返回的是true或false.
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
