通常在一个 Web 2.0 应用中，会有很多业务逻辑相关的 JS 代码，而且很多逻辑从后台搬到了客户端执行，因此这部分客户端代码非常多。为了提供更快的响应速度，典型的做法是压缩所有客户端需要加载的资源包括图 片，HTML 文件，CSS 文件，JS 代码等等，而图片文件已经无法再进行压缩，只有 HTML，CSS，JS 等文本文件有进一步压缩的空间。

进行JavaScript文件压缩的工具比较多：Douglas Crockford的JSMIN、the Dojo compressor、Dean Edwards的Packer、YUI Compressor

the Dojo compressor shrinksafe 之所以称其“safe”，是因为它在压缩了 JS 文件以后，不会改变其对象内部方法和属性名称，引用到该段代码的地方不需要任何更改，还是可以直接调用其内部方法和属性。在 custom_rhino.jar 所在的目录运行 java –jar custom_rhino.jar –version 100 可以进入 rihno 的命令行状态。

压缩一个 JS 文件的命令如下：

                java -jar custom_rhino.jar -c infile.js > outfile.js
                

经测试，一个 JS 文件经过这样的命令压缩后，可以减小 30% 左右，将压缩后的文件放回系统中，对该 JS 文件的功能调用没有任何影响。

YUI Compressor不但可以压缩JavaScript还可以压缩CSS，用法：

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file] 
 
Global Options 
    -h, --help                      Displays this information 
    --type <js|css>             Specifies the type of the input file 
    --charset <charset> Read the input file using <charset> 
    --line-break <column>   Insert a line break after the specified column number 
    -v, --verbose                       Display informational messages and warnings 
    -o <file>                       Place the output into <file>. Defaults to stdout. 
 
JavaScript Options 
    --nomunge                       Minify only, do not obfuscate 
    --preserve-semi             Preserve all semicolons 
    --disable-optimizations Disable all micro optimizations 

JSMIN可以通过“Javascript精简压缩”进行在线压缩

Packer可以通过“Javascript混淆打包”进行在线压缩

JavaScript，随着Ajax的兴起，正成为每一位web设计师/开发者必知的语言。在JavaScript的帮助下，你几乎做任何事。这儿 有许多 容易使用的JavaScript库，如jQuery、MooTools、Prototype等，以及许多适合编写游戏的库如Game JS、GameQuery或JavaScript GameLib。

这篇文章列出了25款JavaScript游戏，包括中国象棋，经典的打猎游戏，Digg攻击，火星入侵者，单人纸牌，纸牌游戏等等，未来我们肯定会看到更多的JavaScrip游戏。

此JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形（包括三角形、矩形）。底层通过创建大量1px*1px的DIV实 现，同时对于连续的像素进行了优化，尽量地减少所需的DIV，因此有较好的性能，当然和Java2D、GDI+、OpenGL、DirectX、 Flash、SVG、VML及HTML Canvas是无法相比较的。网站：http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm 。使用LGPL协议发布。
1、效果：

2、优化原理：

支持的浏览器：
Linux: Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror, Opera 5, 6 and 7+.
Windows: Gecko-Browsers, IE 4, 5 and 6, Opera 5, 6 and 7+.
Mac: Safari, Gecko-Browsers, Opera, partially IE.

使用方法：
1、下载，并在页面中引入脚本：<script type="text/javascript" src="wz_jsgraphics.js"></script>
2、创建一个Div作为画布：<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
3、在JavaScript中创建对象：

<script type="text/javascript"> 
<!--方法一： 
var jg = new jsGraphics("myCanvas"); 
//--> 
</script> 
<script type="text/javascript"> 
<!--方法二： 
var cnv = document.getElementById("myCanvas"); 
var jg = new jsGraphics(cnv); 
//--> 
</script>  

4、例子：

<script type="text/javascript"> 
<!-- 
function myDrawFunction() 
{ 
  jg_doc.setColor("#00ff00"); // green 
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document 
  jg_doc.setColor("maroon"); 
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70)); 
  jg_doc.paint(); // draws, in this case, directly into the document 
 
  jg.setColor("#ff0000"); // red 
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas" 
  jg.setColor("#0000ff"); // blue 
  jg.fillRect(110, 120, 30, 60); 
  jg.paint(); 
 
  jg2.setColor("#0000ff"); // blue 
  jg2.drawEllipse(10, 50, 30, 100); 
  jg2.drawRect(400, 10, 100, 50); 
  jg2.paint(); 
} 
 
var jg_doc = new jsGraphics(); // draw directly into document 
var jg = new jsGraphics("myCanvas"); 
var jg2 = new jsGraphics("anotherCanvas"); 
 
myDrawFunction(); 
 
//--> 
</script>  

Raphaël 是一个小巧的JavaScript图形库，通过它可以在网页中类似于Windows的GDI方式进行绘图。Raphaël底层通过SVG或VML实现，支持的浏览器有Firefox 3.0+, Safari 3.0+, Opera 9.5+ 和Internet Explorer 6.0+。Raphaël基于MIT License发布。

在页面中引用raphael.js脚本文件后，就可以像下面这样进行绘图了：

// Creates canvas 320 × 200 at 10, 50 
var paper = Raphael(10, 50, 320, 200); 
// Creates circle at x = 50, y = 40, with radius 10 
var circle = paper.circle(50, 40, 10); 
// Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill", "#f00"); 
// Sets the stroke attribute of the circle to white (#fff) 
circle.attr("stroke", "#fff"); 

演示：

• Raphaël Playground
• Reflection
• Image rotation
• Text rotation
• GitHub-a-like impact chart
• GitHub-a-like punch chart
• GitHub-a-like languages chart
• Raphaël Analytics chart
• Polar Clock

 文档：http://raphaeljs.com/reference.html

Lightbox的效果类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度， 此时除了对话框内的表单控件，没有其他区域可以获取焦点。 Lightbox的作用则相当于从前只在IE中被支持的"Modal Dialog"；现在在FireFox也可用window.open(url, name, " modal=yes ");来实现同样的效果。使用"Modal Dialog"将限制用户的操作于弹出的对话框中，只有完成设定好的操作后方才关闭。在一些逻辑敏感的应用中强制吸引用户的注意力以防止用户的误操作导致 程序逻辑淆乱。
最流行的LightBox库是Lokesh Dhakar (http://www.huddletogether.com)的基于prototype.js、effects.js和scriptaculous.js的实现，LightBox2 Demo：http://www.cnbruce.com/test/lightbox/ 。而LyteBox（http://dolem.com/lytebox/）只需在网页中引用lytebox.js脚本文件就足够了。Lytebox不仅 能支持图像展示，还比Lightbox2多了“自动播放图像”的功能，当然最主要的是Lytebox支持弹出网页的效果。

1、导入jTemplates.js

<script type="text/javascript" src="js/jquery-jtemplates.js"></script> 

2、html中的代码

<div id="content"></div> 

3、模板代码

< textarea id="template" style="display:none"> 
    你好:{$T.name},今天你{$T.age}岁了。 
</textarea> 

4、JSON数据

var profile={name:"小白",age:"24"}; 

5、调用方法

$(".content").setTemplateElement("template"); 
/* template指模板容器（这里是textarea）的ID；这里把template的innerHTML给了content。 
也可以直接将innerHtml传入： 
var abc ='<textarea id="template" style="display:none">' 
+ '你好:{$T.name},今天你{$T.age}岁了。</textarea>'; 
$(".content").setTemplateElement(abc); 
*/ 
$(".content").processTemplate(profile);//让content读取profile这个数据。 

6、最终输出

<div id="jTemplatesTest">你好:小白,今天你24岁了。</div> 

My97DatePicker是一个非常优秀的JS日期控件,功能有：

 1. 自动切换语言
 2. 自定义和动态切换皮肤
 3. 自定义事件
 4. 日期范围限制
  4.1 静态限制
  4.2 动态限制
 5. 自动选择显示位置
 6. 跨越框架显示选择框
 7. 支持日期和时间的编辑
 8. 自定义时间和日期格式
 9. 增强的自动纠错功能
10. 完美支持FireFox

自从Web2.0网站流行后，浏览器比以前承担了更多的计算，但是在IE上进行字符串连接非常慢，如果需要进行较多的字符串连接就非常有必要使用StringBuilder进行高速地字符串的构建。以下是JavaScript实现的StringBuilder：