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对象里的。
$t1 = mktime(0,0,0,date(“m”,$t),date(“d”,$t),date(“Y”,$t));
$t2 = mktime(0,0,0,date(“m”,$t),1,date(“Y”,$t));
$t3 = mktime(0,0,0,date(“m”,$t)-1,1,date(“Y”,$t));
$t4 = mktime(0,0,0,1,1,date(“Y”,$t));
$e1 = mktime(23,59,59,date(“m”,$t),date(“d”,$t),date(“Y”,$t));
$e2 = mktime(23,59,59,date(“m”,$t),date(“t”),date(“Y”,$t));
$e3 = mktime(23,59,59,date(“m”,$t)-1,date(“t”,$t3),date(“Y”,$t));
$e4 = mktime(23,59,59,12,31,date(“Y”,$t));
//测试
echo date(“当前 Y-m-d H:i:s”,$t).” $t<br>”;
echo date(“今天起点 Y-m-d H:i:s”,$t1).” $t1<br>”;
echo date(“今月起点 Y-m-d H:i:s”,$t2).” $t2<br>”;
echo date(“上月起点 Y-m-d H:i:s”,$t3).” $t3<br>”;
echo date(“今年起点 Y-m-d H:i:s”,$t4).” $t4<br>”;
//测试
echo date(“今天终点 Y-m-d H:i:s”,$e1).” $e1<br>”;
echo date(“今月终点 Y-m-d H:i:s”,$e2).” $e2<br>”;
echo date(“上月终点 Y-m-d H:i:s”,$e3).” $e3<br>”;
echo date(“今年终点 Y-m-d H:i:s”,$e4).” $e4<br>”;
结果:
当前 2011-05-24 15:42:55 1306222975
今天起点 2011-05-24 00:00:00 1306166400
今月起点 2011-05-01 00:00:00 1304179200
上月起点 2011-04-01 00:00:00 1301587200
今年起点 2011-01-01 00:00:00 1293811200
今天终点 2011-05-24 23:59:59 1306252799
今月终点 2011-05-31 23:59:59 1306857599
上月终点 2011-04-30 23:59:59 1304179199
今年终点 2011-12-31 23:59:59 1325347199
1. 除去JavaScript注释
除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义。
2. 除去JavaScript中的空白区域
如:x = x + 1; 可以简短得写成:x=x+1; 。
3. 进行代码优化
简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码。一些简略的表达方式也会产生很好的优化,例如:
x=x+1;
可以写成:
x++;
不过得小心谨慎,不然代码很容易出错。
4. 重命名用户自定义的变量和函数
为了阅读方便,我们都知道在脚本中应该使用象sumTotal这样的变量而不是s。不过,考虑到下载的速度,sumTotal这个变量就显得冗长了。这个长度对于最终使用者来说没有意义,但对浏览器下载则是个负担。这个时候s就成为较好的选择了。先写好方便阅读的代码,然后再使用一些工具来处理以供交付。这种处理方式在这里再一次展示了其价值所在。将所有的名称都重新用一个或两个字母来命名将带来显著的改善。
5. 改写内建(built-in)对象
长长用户变量名会造成JavaScript代码过长,除此之外,内建(built-in)对象(比如Window、Document、Navigator等)也是原因之一。例如:
alert(window.navigator.appName);
alert(window.navigator.appVersion);
alert(window.navigator.userAgent);
可以改写成如下简短的代码:
w=window;n=w.navigator;a=alert;
a(n.appName);
a(n.appVersion);
a(n.userAgent);
如果这几个对象使用频繁的话,这样改写带来的好处就不言而喻了。事实上这些对象也的确经常被调用。然而我要提醒的是,如果Window或 Navigator对象仅仅被使用了一次的话,这样的替换反而使代码变得更长。这个技巧带来一个对象更名后脚本执行效率的问题:除了代码长短上带来的好处,这种改写更名实际上还会稍微的提高一点脚本执行的速度,因为这些对象将会被放在所有被调用对象中比较靠前的位置。JavaScript游戏开发程序员使用这个技巧已经有多年了,下载和执行速度都会有所提高,并且对本地浏览器的内存花销也会降低,可谓一石三鸟。
6. 重构<script>和<style> 调用方式来优化请求次数
我们常常在一个HTML文件头中看到这样标记代码:
<script src="/scripts/rollovers.js"></script>
<script src="/scripts/validation.js"></script>
<script src="/scripts/tracking.js"></script>
大多数情况下,上述代码应该被简化成:
<script src="/0/g.js"></script>
其中g.js包含了所有供全局使用的函数。虽然把脚本文件分成三份对于维护来说是有道理的,但对于代码的传输则没有意义。单个的脚本下载要比三个分离的请求高效的多,并且这也同时简化了markup代码的长度。
7. 合并你的javascript文件
尽可能的减少HTTP的Request请求数。
8. 将脚本放到网页底部
脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。