这篇文章不仅仅从代码本身来考虑如何优化编码，也从代码的设计阶段来考虑，包括书写API文档，同事的review，使用JSLint。这些习惯都 能帮助你编写更加高质量的、更易于理解的、可维护的代码(让你的代码在多年之后仍使你引以为傲)。

编写可维护的代码
软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后，随着时间的增长，维护的成本愈发的高。当你一发现BUG的 时候，就立即去修复，这时候你的代码还是热乎的，你也不需要回忆，因为就是刚刚写好的。但是当你做了其他任务，几乎完全忘记了这份代码，这时候就需要：

重新学习和理解问题
理解代码是如何解决问题的
另外一个问题是，在大项目或者大公司里面，经常是解决BUG的人不是产生BUG的 人，而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题，无论这个代码是你自己以前写的还是团队中的其他成员写的，因为我们都想去搞搞新 的有意思的东西，而不是去维护那些个陈旧的代码。

还有一个开发中的普遍问题就是，往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题，可以花整整一个下午的时间来考虑代码的编写。这个代 码当时是可以工作的，但是随着开发的进行，其他东西发生了很大的变化，这时候也就需要你自己来重新审查修改编写代码。比如：

还有BUG没有解决
添加了新的功能
程序需要在新的环境中运行(比如一个新上市的浏览器)
代码有问题
代码需 要重写因为修改了架构甚至要使用另一个语言
因为这些原因，也许你当时一个下午写好的代码，后面需要花费几周的时间来阅读。所以编写可维护的代码 对于软件的成功至关重要。

可维护的代码包括：

可读性
连续性
预见性
看起来是一个人写的
有文档
最少化全局变量
Javascript使 用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以，全局变量也就是声明在任何函数之外的或者没有被声明的变量。

Javascript中，在任何函数之外有个可访问的全局对象，每一个你创建的全局变量都是这个对象的一个属性。在浏览器中，为了方便，通常用 window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量：

myglobal = “hello”; // antipattern
console.log(myglobal); // “hello”
console.log(window.myglobal); // “hello”
console.log(window["myglobal"]); // “hello”
console.log(this.myglobal); // “hello
全局变量的问题
全局变量的 问题在于，他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面，这通常会造成变量名冲突-两个同名的变量，但是确实不同的用处。

通常在一些页面中需要引入一些其他人的代码，比如：

第三方的JS库
广告伙伴的脚本
第三方的用户行为分析或者统计脚本
不同的组件、按钮等等
加入其中一个第三方 组件定义了一个全局变量：result。然后在你的程序中，也定义了一个全局变量result。最后的这个result会覆盖点之前的result，这样 第三方的脚本就会停止工作。

所以，为了对其他的脚本友好，在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量，比如使用命名空间，或者自执行的 匿名函数，但是最好的避免全局变量的方法就是使用var关键字来声明变量。
因为javascript的两个特性，创建一个全局变量非常的简单。第一，你可以使用一个甚至没有声明的变量，第二，在 javascript中，所有未声明的变量都会成为全局对象的一个属性(就像一个声明了的全局变量一样)。看看这个例子：

function sum(x,y){
result = x + y;
return result;
}
在 这个代码中，result在没有被声明的情况下就被使用了，这个代码也能很好的工作，但是在调用了这个函数之后，就会多一个名为result的全局变量， 这是所有问题的根源了。

解决这个问题的办法就是使用var：

function sum(x,y){
var result  = x + y;
return result;
}
两外一个不好的习惯就是在声明变量的时候使用链式的方法来赋值，这时候，a是局部变量，但是b就成为了全局变量。

function foo(){
var a=b=0;
….
}
这是因为，b = 0这个表达式先执行，执行的时候b并没有被声明，所以b就成为了全局变量，然后返回这个表达式的值0，给声明了的变量a，换句话说，就好像你输入的是：

var a = (b=0);
如果你已经声明变量，那么这种链式的赋值没有问题：

function foo(){
var a,b;
…
}
另外一个避免使用全局变量的原因是 考虑到程序的可移植性。如果你想让你的代码在不同的环境中都可以工作，那么使用全局变量就很可能会与新的系统中的全局变量冲突(或许在之前的系统中没有问 题)。

忘记var的影响
使用var声明的全局变量和没有使用var生成的全局变量还有一个区别在于删除：

使用var声明创建的全局变量不能被删除
没有使用var声明的全局变量可以被删除
这说明没有使用var声明生成的全局变量不是 真正的变量，他们只是全局对象的属性。属性可以通过delete删除，但是变量不行：

// define three globals
var global_var = 1;
global_novar = 2; // antipattern
(function () {
global_fromfunc = 3; // antipattern
}());

// attempt to delete
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true

// test the deletion
typeof global_var; // “number”
typeof global_novar; // “undefined”
typeof global_fromfunc; // “undefined”
在 ES5的严格模式下，给一个为声明的变量赋值会报错。

读取全局对象
在浏览器中，你可以通过window变量来读取全局对象(除非你在函数内部重新定义了window对象)。但在有的环境中，可 能不叫window，那么你可以使用下面的代码来获取全局对象：

var global = (function(){
return this;
})();
这样可以获取到全局对 象的原因是在function的内部，this指向全局对象。但是这在ES5的严格模式下会不起作用，你需要适配一些其他模式。当你开发自己的库的时候， 你可以把你的代码封装在一个立即函数中，然后将this作为一个参数传进来。

单个var模式
在你的代码的顶部只是用一个var关键字，会有以下的好处：

对于所有需要的变量，在一个地方就可以全部看到
避免使用一个未定义的变量
帮助你记忆声明的变量，减少全局变量
更精简 的代码
书写很简单：

function func() {
var a = 1,
b = 2,
sum = a + b,
myobject = {},
i,
j;
// function body…
}
通过一个var和逗号来声明多个变量。在声明的时候给变量赋默认值也是不错的做法，可以避免一些逻辑 错误，提高代码的可读性。而后你阅读的代码的时候也可以根据变量的默认值来方便的猜测变量的用途。

你也可以在声明变量的时候做一些实际的工作，比如sum = a + b;另外，在操作DOM元素的时候，你也可以把DOM元素的引用保存在一个变量中：

function updateElement() {
var el = document.getElementById(“result”),
style = el.style;
// do something with el and style…
}
滥用了的var
JavaScript允许你在函数内部有 多个var语句，但是却都表现的如同在函数的顶部声明一样。这个特性在你使用一个变量然后在后面又声明了这个变量时会导致一些奇怪的逻辑问题。对于 JavaScript来说，只要变量在同一个作用域，那么就认为是声明了的，就算是在var语句之前使用也一样。看看这个例子：

myname = “global”; // global variable
function func() {
alert(myname); // “undefined”
var myname = “local”;
alert(myname); // “local”
}
func();
在这个例子中，或许你期望第一次会弹出global，第二 次弹出local。因为第一次的时候没有还没有使用var声明myname，这是应该是全局变量的myname，第二次声明了，然后alert之后应该是 local的值。而事实上不是这样的，只要你在函数中出现了var myname，那么js就认为你在这个函数中声明了这个变量，但是在读取这个变量的值的时候，因为var语句还没有执行，所以是undefined，很奇 怪的逻辑吧。上面的代码相当于：

myname = “global”; // global variable
function func() {
var myname; // same as -> var myname = undefined;
alert(myname); // “undefined”
myname = “local”;
alert(myname); // “local”
}
func();
我们来解释一下这个现象，在代码的解析中，分两个步骤，第 一步先处理变量函数的声明，这一步处理整个代码的上下文。第二步就是代码的运行时，创建函数表达式以及未定义的变量。实际上，我们只是假设了这个概念，这 并不在ECMAScript的规范中，但是这个行为常常就是这样解释的。

for循环
在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此：

for (var i = 0; i < myarray.length; i++) {
// do something with myarray[i]
}
这样写的问题在于，每一次迭代的时候都会计算数组的长度，尤其在这个参数不是一个 数组而是一组HTML元素的时候会降低你的程序的性能。

HTML元素的集合在页面上，这样每次都会去再页面上查找相应的元素，这是非常耗时的。所以对于for循环，你需要预先保存数组的长度，这样写：

for (var i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
}
这样缓存了参数的长度，在每次迭代的时候就不用再去查找计算了。

在查找HTML元素集合的时候，缓存参数长度可以带来可观的性能提升，Safari下面提高两倍的速度，在IE7下面提高190倍的速度。

需要注意的是，当你需要操作修改DOM元素的数量的时候，你肯定希望这个值是随时更新的而不是一个常量。

使用下面的单一var模式，你也可以把var提到循环之外：

function looper() {
var i = 0,
max,
myarray = [];
// …
for (i = 0, max = myarray.length; i < max; i++) {
// do something with myarray[i]
}
}
这 个模式可以增强整个代码的连续性，但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如：如果你想在其他函数中也使用这个循环，那你需要确定 在新的函数中处理好了i和max(或许还需要删掉这个)。

这个函数还有两个点可以优化的：

可以少一个变量(不需要max)
递减到0，一个数字与0比较比这个数字与另外一个数字比较更快
所以就可以写为：

var i, myarray = [];
for (i = myarray.length; i–;) {
// do something with myarray[i]
}
针对第二点：

var myarray = [],
i = myarray.length;
while (i–) {
// do something with myarray[i]
}
这是两个比较微小的点的优化。另外，JSLint可能对于i-会有意 见。

for-in循环
for-in循环用来迭代非数组的对象。使用for-in循环通常也成为枚举。

从技术上来说，你也可以用for-in来循环数组，因为数组也是对象，但是不推荐。如果数组有一些自定义的扩展函数，那么就会出错。另外，对象属性 的顺序在for-in循环中也是不确定的。所以最好还是用普通的循环来循环数组用for-in来循环对象。

在循环对象的过程中，使用hasOwnProperty()方法来检验是对象本身的属性还是原型链上的属性很重要。

看看下面的这个例子。

// the object
var man = {
hands: 2,
legs: 2,
heads: 1
};

// somewhere else in the code
// a method was added to all objects
if (typeof Object.prototype.clone === “undefined”) {
Object.prototype.clone = function () {};
}
在这 个例子中，我们有一个简单的称作man的对象字面量。在其他man定义之前或之后的地方，对象原型有一个很有用的clone()方法。因为原型链的原因， 所有的对象都自动获得了这个方法。为了在枚举man对象的时候出现clone方法，你需要使用hasOwnProperty方法来区别。如果没有区别来自 原型链的方法，那么就会有一些意想不到的事情发生：

// 1.
// for-in loop
for (var i in man) {
if (man.hasOwnProperty(i)) { // filter
console.log(i, “:”, man[i]);
}
}
/* result in the console
hands : 2
legs : 2
heads : 1
*/
// 2.
// antipattern:
// for-in loop without checking hasOwnProperty()
for (var i in man) {
console.log(i, “:”, man[i]);
}
/*
result in the console
hands : 2
legs : 2
heads : 1
clone: function()
*/
另外一种使用方法如下：

for (var i in man) {
if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
console.log(i, “:”, man[i]);
}
}
这样写的好处是可以防止man重新定义了 hasOwnProperty方法导致的冲突。如果不想写这么长的一串，你也可以这样：

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
if (hasOwn.call(man, i)) { // filter
console.log(i, “:”, man[i]);
}
}
严格意义上讲，不适用hasOwnProperty也不是什么错误。根据任务的难度和你对代码的自 信程度，你也可以不用这个直接循环。但是当你不确定的时候，最好还是使用这个方法检测一下。

另外一种格式上的改变(不会通过jsLint的检查)，去掉for的大括号，然后把if放在同一行。这样做的好处可以让循环体更加突出，缩进也就少 一些：

// Warning: doesn’t pass JSLint
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // filter
console.log(i, “:”, man[i]);
}
不要扩展内建的原型
扩 展原型的构造函数，可以提供一些很强大的功能，但是有时候他太强大了。

有时候你会去扩展Object(),Array(),Fucntion()的原型方法，这样会导致可维护性的问题，因为这会让你的代码的移植性变 差。其他的开发人员使用你的代码的时候，可能只需要原生的方法，并不需要额外的功能。

另外，你添加进去的方法，如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来，这会让人很迷惑。

所以，最好还是不要扩展基本的对象。除非是下面的情况：

你确定在将来根据ECMAScript规范，浏览器会添加相应的原型方法，那么是可以的，你只不过是提前实现了这个功能。
你确定的你要实现 的方法不存在-或许有时候在代码的其他的地方实现了，或者有的浏览器支持，这都是不行的。
有非常清晰的文档，并且与团队成员沟通过
如果在 这些情况之下，那么你就可以添加，最好是下面这种形式：

if (typeof Object.protoype.myMethod !== “function”) {
Object.protoype.myMethod = function () {
// implementation…
};
}
switch模式
按照下面的风格写switch的话，可以提高你的代码可读性和健壮性：

var inspect_me = 0,
result = ”;
switch (inspect_me) {
case 0:
result = “zero”;
break;
case 1:
result = “one”;
break;
default:
result = “unknown”;
}
需要注意下面几个方面：

将case和switch对齐。
case的内容缩进
每一个case之后都有一个清晰的break
避免顺序往下执行 case，非要如此的话，文档一定要写清楚
最后使用default，保证在没有命中case的情况下也有反馈
避免隐藏的类型转换
Javascript 在你比较两个变量的时候会进行类型的转换，这就是为什么 false == 0或者”” == 0会返回true。

为了避免这种隐藏的类型转换带来的迷惑，最好使用===或者!==操作符来比较：

var zero = 0;
if (zero === false) {
// not executing because zero is 0, not false
}

// antipattern
if (zero == false) {
// this block is executed…
}
还有另外一种流派持这样的观点：当==够用时使用=== 就是多余的。比如，当你使用typeof的时候你知道会返回string，所以没必要使用严格的检验。然而，JSLint要求严格检验；他最大程度使代码 在阅读的时候减少歧义，(“这个==是故意呢还是疏漏？”)。

避免使用eval()
如果你在你的代码中使用eval()，那么要记住”eval() is evil”。这个方法会将传入的字符串当做js代码来执行。如果代码是在运行前就确定的，那么没有必要使用eval()。如果代码是在运行时动态确定的， 那么也有其他更安全的办法。例如使用方括号形式访问元素的属性：

// antipattern
var property = “name”;
alert(eval(“obj.” + property));

// preferred
var property = “name”;
alert(obj[property]);
使 用eval()还有安全问题，比如你运行网络上的一段代码，而这段代码又被别人篡改了。在处理Ajax请求返回的JSON数据的时候，最好还是使用浏览器 内建的处理方法，如果对于低端的浏览器不支持的，可以从JSON.org上下载对应的处理库。

另外还要记住使用setTimeout、setInterval以及Function的构造函数的是，传入的字符串的参数，js的处理方法跟 eval()类似，所以也要注意。因为，js会把你传入的字符串解析执行：

// antipatterns
setTimeout(“myFunc()”, 1000);
setTimeout(“myFunc(1, 2, 3)”, 1000);

// preferred
setTimeout(myFunc, 1000);
setTimeout(function () {
myFunc(1, 2, 3);
}, 1000);
使用Function的构造函数，跟eval()差不多， 也要注意。这是个非常有用的功能，但是常常被错用。如果你必须使用eval()，那么可以考虑new一个Function来替代。另外的一个好处就是，使 用Function的构造函数，函数的作用域在本方法内，这样你使用var声明的变量就不会变成全局的。另外一个防止eval()生成全局变量的办法就是 使用匿名函数。

看看下面这个例子，只有un变量最终是全局的：

console.log(typeof un); // “undefined”
console.log(typeof deux); // “undefined”
console.log(typeof trois); // “undefined”

var jsstring = “var un = 1; console.log(un);”;
eval(jsstring); // logs “1″

jsstring = “var deux = 2; console.log(deux);”;
new Function(jsstring)(); // logs “2″

jsstring = “var trois = 3; console.log(trois);”;
(function () {
eval(jsstring);
}()); // logs “3″

console.log(typeof un); // number
console.log(typeof deux); // undefined
console.log(typeof trois); // undefined
eval() 和Function构造函数的另一个区别就是eval()会影响到作用域，而Function则相当于一个沙盒。例如：

(function () {
var local = 1;
eval(“local = 3; console.log(local)”); // logs 3
console.log(local); // logs 3
}());

(function () {
var local = 1;
Function(“console.log(typeof local);”)(); // logs undefined
}());
使 用parseInt()转换处理数字
使用parseInt()你可以将字符串转为数字。这个方法支持第二个表示进制的参数，常常被忽略。问题常常 在处理一段以0开始的字符串的时候。在ECMAS3标准中，以0开始表示八进制，但是在ES5中又改了，所以为了避免麻烦，最好还是标明第二个参数。

var month = “06″,
year = “09″;
month = parseInt(month, 10);
year = parseInt(year, 10);
在这个例子中，如果你使用parseInt(year)，就会返回0，因为09被认为是8进制数 字，然而9是非法的八进制字符，所以返回0。

其他的可以把字符串转为数字的方法有：

+”08″ // result is 8
Number(“08″) // 8
这些通常都比parseInt()快一些，因为 parseInt并不只是简单的转换。但是如果你的输入是”08 hello”这样的，那么parseInt()也会返回8，但是其他的方法就只能返回NaN。

编码规范
编码的时候遵循一定的规范，可以让你的代码增强可移植性，并且更加便于阅读和理解。加入团队的新人，在阅读了代码规范之后，可以更 加快速的溶入团队，并理解其他人员开发的代码。

在一些讨论会议上，规范往往都是争论的焦点(比如缩进的形式)。所以如果你打算为你团队的编码规范提一些建议，那就准备好一场激烈的辩论和反对意 见。要记住，建立和实施规范是非常重要的。

缩进
代码如果没有缩进，那基本上没法阅读了。比这更糟的是不规范的缩进，看着好像缩进了，但是乱七八糟摸不着头脑。所以缩进的使用必须规 范。

有些开发人员喜欢使用tab键来缩进，因为在每一个编辑器里面都可以自己设置想要的tab值。有的人喜欢四个空格。如果团队遵循统一的规范，这也不 是什么问题。比如本文就是四个空格，这也是JSLint推荐的。

那么什么该缩进呢？很简单，大括号。这样就是说包括函数体，循环，ifs，switch，以及对象字面量的属性。看看这个例子：

function outer(a, b) {
var c = 1,
d = 2,
inner;
if (a > b) {
inner = function () {
return {
r: c – d
};
};
} else {
inner = function () {
return {
r: c + d
};
};
}
return inner;
}
大括号
应该使用大括号，尤其在那些可用可不用的地方，如果你的if语句或者for循环只有一句话，那么大括号不 是必须的，但是这种时候最好用大括号。这可以让代码保持一致，并且便于升级。

假设你的for循环只有一句。你可以不用大括号，也不会有什么错误。

// bad practice
for (var i = 0; i < 10; i += 1)
alert(i);
但是假如你以后要在这个循环里面添加其他东西呢？

// bad practice
for (var i = 0; i < 10; i += 1)
alert(i);
alert(i + ” is ” + (i % 2 ? “odd” : “even”));
这时候，虽然 第二个alert有缩进，但他还是在循环之外的。所以，无论何时，都应该是用大括号。if语句一样：

// bad
if (true)
alert(1);
else
alert(2);

// better
if (true) {
alert(1);
} else {
alert(2);
}
大 括号位置
开发人员也经常争论大括号的位置，放在同一行还是下一行呢？

在具体的例子中，这是个见仁见智的问题。但也有例外，假如程序根据不同的位置做不同的解析呢？这是因为插入分号机制，js对此并不挑剔，他会在你没 有添加分号的行之后帮你添加。这在函数返回一个对象字面量然后大括号写在下一行的时候出问题：

// warning: unexpected return value
function func() {
return
// 下面的读取不到
{
name : “Batman”
}
}
如果你想让这个函数返回 一个有name属性的对象字面量，这个函数是做不到的，因为插入的分号，返回的应该是一个undefied值。

所以，最后的结论是，必须使用大括号，并且写在同一行。

function func() {
return {
name : “Batman”
};
}
关 于分号：跟大括号一样，必须写。这不只是推行严格的写程序的规范，更是在必要的时候解决一些不清楚的地方，比如前面的例子。

空格
正确的使用空格也可以增加程序的可读性和连贯性。写句子的时候你会在逗号和句号之后有一些停顿。在js中可以模仿这样的逻辑。

应该使用空格地方有：

循环中的分号之后
循环中的变量初始化for (var i = 0, max = 10; i < max; i += 1) {…}
数组中的逗号分隔符之后var a = [1, 2, 3];
对象字面量中的逗号var o = {a: 1, b: 2}
函 数参数间myFunc(a, b, c)
在函数声明时候的大括号前面function myFunc() {}
匿名函数var myFunc = function () {};
另外一些使用空格比较好的地方就是在那些操作符的两边，比如+, -, *, =, <, >, <=, >=, ===, !==, &&, ||, +=,等等。

// generous and consistent spacing
// makes the code easier to read
// allowing it to “breathe”
var d = 0,
a = b + 1;
if (a &amp;&amp; b &amp;&amp; c) {
d = a % c;
a += d;
}

// antipattern
// missing or inconsistent spaces
// make the code confusing
var d = 0,
a = b + 1;
if (a &amp;&amp; b &amp;&amp; c) {
d = a % c;
a += d;
}
最后一个关于空格要注意的，大括号前面的空格。最好使用空格：

在函数定义，id-else，case，循环以及对象字面量的大括号前面使用空格
在大括号}与else、while之间使用空格
反 对增加空格的一个说法是增加文件体积，但是在压缩之后并不存在这个问题。提高代码可读性经常被忽视的一个方面就是垂直的空格，你可以使用空行来分开代码， 就好像写文章时候的段落一样。

命名规范
可以提高代码移植性和可维护性的一个方面是命名规范。也就是说，在取变量名的时候总是采取一贯的做法。

无论采用什么样的命名规范，其实都不是很重要，重要的是确定下来这个规范，然后遵守它。

构造函数首字母大写
javascript中没有类，但是可以使用new来达到同样的目的。

因为构造函数也是函数，如果能从名字上就能区别它是构造函数还是普通函数，对于开发者是非常有用的。所以将构造函数的首字母大写，普通函数的首字母 小写作为提示。这样一眼就能区别。

单词的分隔
当你的变量名或者函数名是由好几个单词构成的时候，如果能顺利区分变量名由那几个单词构成，也是非常不错的体验。这种命名规范成 为驼峰式。所谓驼峰式就是以小写字母开始，后面的每个单词第一个字母大写。

对于构造函数第一个字母大写，MyConstructor()，对于普通的函数，就采用驼峰式myFunction(), calculateArea()。

那么变量怎么办呢，有的人使用驼峰式，但是更好的办法是使用下划线来区分。first_name,favorite_bands, 以及 old_company_name。这也可以让你一眼就能区分函数和变量。

其他命名规范
有时候，开发人员也会使用命名规范来替代和弥补一些语言的特性。

例如，在javascript中，并没有提供定义常量的办法(虽然有Number.MAX_VALUE)，所以开发人员使用全大写的名称来表示不可 更改的常量。var PI = 3.14, MAX_WIDTH = 800。

另外一种规范是使用全局变量名的首字母。这样做可以强化开发者使全局变量最少，并且容易辨认。

另外一种规范是在函数中模拟私有成员。虽然可以在javascript中实现私有变量，但是开发人员为了更加容易区别，所以给他加一个下划线的前 缀。例如：

var person = {
getName: function () {
return this._getFirst() + ‘ ‘ + this._getLast();
},

_getFirst: function () {
// …
},
_getLast: function () {
// …
}
};
在这个例子中，getName是一个公有 函数，是API的一部分，_getFirst，_getLast本意是私有的。虽然仍然是公有函数，但hi加上了这个前缀，表示在以后的版本中不保证能运 行，所以不应该被直接使用。注意在JSLint中不推荐这样做，除非你设置nomen选项为false。

还有其他几种表示私有成员的规范：

在末尾使用下划线，比如name_以及getElements_
使用一个下划线表示保护成员_protected，两个下划线表示私有成 员__private
在firefox中，有些不是语言原生的变量，以两个下划线开始，两个下划线结束__proto__以及 __parent__
写注释
必须给你的代码写注释，就算它看起来不会被别人接手。有时候，你研究完一个问题，然后你看着代码觉得那是显 而易见的，但是过一两周之后回头再看，你也会摸不着头脑的。

当然，也不能过分的注释：每个变量每一行代码都注释。但是通常都需要对函数的功能，参数，返回值写文档，以及一些其他的复杂的逻辑和算法。想想，你 的代码的阅读者，只需要读注释就能大体上了解你的代码在做什么需要什么，这比直接读代码理解要快的多。当你有五六行的代码是做一个具体的任务，那么阅读者 就可以通过一行代码了解你的目的，然后跳过这些代码。关于注释，没有硬性的比例说是多少代码需要多少注释。有时候，有些代码(比如正则表达式)注释的内容 肯定比代码本身多。

写注释是必须遵守的规范，而且要保持注释的更新，一个过时的注释带给人的迷惑还不如不写注释。(译文)

© 我想网 Akon 所有 , 2011. | 永久链接 | 2 条评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

同源策略

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚 本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.example.org)，那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是同域，而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。 本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的 隐患。

受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式，以下跨域实例的源代码可以从这里获得。

单向跨域

JSONP

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。 例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后 会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行， 那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

flash URLLoader

flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问，SWF也可以通过API来确定自身能被哪些域的SWF加载。当跨域访问资源时，例如从域www.a.com请求域www.b.com上的数据，我们可以借助flash来 发送HTTP请求。首先，修改域www.b.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建) ，把www.a.com加入到白名单。其次，通过Flash URLLoader发送HTTP请求，最后，通过Flash API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案，不过需要支持iOS的话，这个方案就无能为力了。

Access Control

Access Control是比较超越的跨域方式，目前只在很少的浏览器中得以支持，这些浏览器可以发送一个跨域的HTTP请求（Firefox, Google Chrome等通过XMLHTTPRequest实现，IE8下通过XDomainRequest实现），请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头，该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的 asset.php发送了一个跨域的HTTP请求，那么asset.php必须加入如下的响应头：

header("Access-Control-Allow-Origin: http://www.a.com");

window.name

window 对象的name属性是一个很特别的属性，当该window的location变化，然后重新加载，它的name属性可以依然保持不变。那么我们可以在页面 A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后，页 面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出window.name的值了。这个方式非常适合单向的数据请求，而且协议简单、安 全。不会像JSONP那样不做限制地执行外部脚本。

server proxy

在数据提供方没有提供对JSONP协议或者 window.name协议的支持，也没有对其它域开放访问权限时，我们可以通过server proxy的方式来抓取数据。例如当www.a.com域下的页面需要请求www.b.com下的资源文件asset.txt时，直接发送一个指向 www.b.com/asset.txt的Ajax请求肯定是会被浏览器阻止。这时，我们在www.a.com下配一个代理，然后把Ajax请求绑定到这个代理路径下，例如www.a.com/proxy/, 然后这个代理发送HTTP请求访问www.b.com下的asset.txt，跨域的HTTP请求是在服务器端进行的，客户端并没有产生跨域的Ajax请求。这个跨域方式不需要和目标资源签订协议，带有侵略性，另外需要注意的是实践中应该对这个代理实施一定程度的保护，比如限制他人使用或者使用频率。

双向跨域

document.domain

通 过修改document的domain属性，我们可以在域和子域或者不同的子域之间通信。同域策略认为域和子域隶属于不同的域，比如www.a.com和 sub.a.com是不同的域，这时，我们无法在www.a.com下的页面中调用sub.a.com中定义的JavaScript方法。但是当我们把它 们document的domain属性都修改为a.com，浏览器就会认为它们处于同一个域下，那么我们就可以互相调用对方的method来通信了。

FIM – Fragment Identitier Messaging

不 同的域之间，JavaScript只能做很有限的访问和操作，其实我们利用这些有限的访问权限就可以达到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在这个大前提下被发明的。父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称 为frag，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带frag，所以这部分 的修改不会产生HTTP请求，但是会产生浏览器历史记录。FIM的原理就是改变URL的frag部分来进行双向通信。每个window通过改变其他 window的location来发送消息，并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录，而且有些浏览器 不支持onhashchange事件，需要轮询来获知URL的改变，最后，URL在浏览器下有长度限制，这个制约了每次传送的数据量。

Flash LocalConnection

页 面上的双向通信也可以通过Flash来解决，Flash API中有LocalConnection这个类，该类允许两个SWF之间通过进程通信，这时SWF可以播放在独立的Flash Player或者AIR中，也可以嵌在HTML页面或者是PDF中。遵循这个通信原则，我们可以在不同域的HTML页面各自嵌套一个SWF来达到相互传递 数据的目的了。SWF通过LocalConnection交换数据是很快的，但是每次的数据量有40kb的大小限制。用这种方式来跨域通信过于复杂，而且 需要了2个SWF文件，实用性不强。

window.postMessage

window.postMessage是HTML5定义的一个很新的方法，这个方法可以很方便地跨window通信。由于它是一个很新的方法，所以在很旧和比较旧的浏览器中都无法使用。

Cross Frame

Cross Frame是FIM的一个变种，它借助了一个空白的iframe，不会产生多余的浏览器历史记录，也不需要轮询URL的改变，在可用性和性能上都做了很大 的改观。它的基本原理大致是这样的，假设在域www.a.com上有页面A.html和一个空白代理页面proxyA.html, 另一个域www.b.com上有个页面B.html和一个空白代理页面proxyB.html，A.html需要向B.html中发送消息时，页面会创建 一个隐藏的iframe, iframe的src指向proxyB.html并把message作为URL frag，由于B.html和proxyB.html是同域，所以在iframe加载完成之后，B.html可以获得iframe的URL，然后解析出 message，并移除该iframe。当B.html需要向A.html发送消息时，原理一样。Cross Frame是很好的双向通信方式，而且安全高效，但是它在Opera中无法使用，不过在Opera下面我们可以使用更简单的 window.postMessage来代替。

总结

跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方 案。比如单向的数据请求，我们应该优先选择JSONP或者window.name，双向通信我们采取Cross Frame，在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

© 我想网 Akon 所有 , 2011. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

如果你也想让你的博客上的图片让人眼前一亮，不妨试试WDL博客推荐的10个jQuery图片插件。

Slides

Slides是一个灰常简单的幻灯片 jQuery插件。包括的功能有循环，自动播放，渐变和幻灯片过渡效果包括淡出淡入，图像预装载和自动生成分页等。

Face Detection

Face Detection，插件如其名，它检测照片中的人脸，就像照相机那样自动对焦。

AviaSlider

AviaSlider这个 jQuery 幻灯片插件最大的亮点在于它的过渡效果，神马过渡效果，自个儿去看不就知道了。

Fullscreenr

想自己的网站用一张大图作背景，而且长宽比例不变？而且必须在中间的位置，而不只是指图像的左上角部分？那么Fullscreenr插件做到了。

Slidy

jQuery Slidy 是一个可自动生成并可定制的幻灯片转换插件。

MobilyNotes

MobilyNotes是一个轻量级的jQuery插件（只有2KB），可以堆叠的形式显示你的图片集或者HTML内容集。

jQuery Easy Slides

Easy Slides是一个非常容易上手的幻灯片制作插件。它还有轻量级的优势，加上 Javascript和CSS才不超过2.1KB。

Booklet

想你的图片幻灯片转换效果像翻转一本书那样？Booklet这个 jQuery插件是你不二的选择。

MobilySelect

Pikachoose

Pikachoose是一个轻量级的jQuery插件，轻松实现图片集的幻灯片演示，还有图片导航和自动播放选项设置。

赶着去喝喜酒，草草翻译，质量欠佳，况且英文水平本来有限，望见谅。实在不行，请观摩原文或者直接去体验插件演示demo。（注：这是一篇预发布文章）

MobilySelect又一轻量型 jQuery插件（仅2KB）。可以实现两种图片分类选择特效，个人觉得这个插件很不错。

© 我想网 Akon 所有 , 2011. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

2010年最佳jQuery插件（排名不分先后）：

Nivo Slider

一个加载设置拥有9种过度效果的超级smooth slider，它还支持如链接图像和键盘导航等内容。

Quicksand

通过一个非常不错的洗牌动画实现选项内容重新排序，只需要指定源容器和替换源的目标collection 。新元素将会以奇特缩放+阿尔法效果出现，消失的元素(non-existant in destination collection)平滑地消失或重新排位，移动到它们的目标位置。

Spritely

Spritely 是一个由Artlogic开发的 jQuery插件，用于使用纯HTML和JavaScript创建动态物体和背景动画。

Lettering.js

Lettering.js是一个轻量经的、易于使用的 jQuery插件，可创造出极具个性的网页排版。

Colortip

Colortip可转换你的页面元素的标题属性为一系列色彩丰富的提示（当你的鼠标移动到不同的标题上会出现不同颜色的字体文本提示）。支持六种色彩主题，这样你可更加容易融合到你的个人网页中去。

Masonry

Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直，Masonry排列内容是根据一个网格先垂直后水平的。

gvChart

gvChart是一个使用Google Charts了的jQuery插件，可通过HTML table tag的数据实现交互可视化。它非常容易上手，此外它支持创建五种风格的图标。

Animated table sort

这是一个用于创建表格的jQuery插件，所创建的表格可以根据不同的列项目进行A-Z，升序排列，切换效果非常不错。

jQuery Image Scale Carousel

网站图片保持完整的纵横比比什么都重要。这个jQuery插件可以完美地在slider展示你所有的图片，而不需担心产生变形。 jQuery Image Scale Carousel插件自动改变你所有图片到适合大小，一切都是那么的简单。

YoxView

YoxView是一个免费的多媒体播放jQuery插件。它易于使用，功能丰富。你可以用它来展示各种媒体，如图像，视频，内嵌的内容，iframes，Flash等等。

© 我想网 Akon 所有 , 2011. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

下载地址：
jQuery Minified (29kb Gzipped)
jQuery Regular (207kb)

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js

关于jQuery 1.5

该版本修复了83个bug，解决了460个问题。

针对下列浏览器进行了测试：
Safari 5.0.3 / 4.0.5 / 3.2.3 / 3.1.2
Opera 11.01 / 11 / 10.63 / 10.54 / 10.10 / 9.64
IE 6 / 7 / 8
Firefox 4.0b9 / 3.6.13 / 3.5.11 / 3.0.19 / 2.0.0.20
Chrome 8.0.552.215 / 8.0.552.237 / 9.0.597.67 Beta / 10.0.642.2 Dev

jQuery 1.5 API文档：http://api.jquery.com/category/version/1.5/

重大改进

1. 重写了Ajax模块：

a) 提供了更高级的统一的API；

b) Ajax请求会返回一个封装不同浏览器XMLHttpRequest的jXHR对像，可以完成以前不可能完成的任务，比如：放弃JSONP请求，详见jQuery.ajax()文档；

c) 更好的扩展性，可以方便地扩展Ajax的发送与接收，管理Ajax请求，详见Extending Ajax文档。

2. 新增延缓对像(Deferred Objects)

a) 直接使用没有立即返回的返回值，比如异步Ajax请求的返回结果；

b) 附加多个事件处理器（这在以前是不可能的），示例代码：
// Assign handlers immediately after making the request,
// and remember the jxhr object for this request
var jxhr = $.ajax({ url: “example.php” })
.success(function() { alert(“success”); })
.error(function() { alert(“error”); })
.complete(function() { alert(“complete”); });

// perform other work here …

// Set another completion function for the request above
jxhr.complete(function(){ alert(“second complete”); });

了解更多内容，请阅读Deferred Object文档。

推荐教程：Using Deferreds in jQuery 1.5

3. jQuery替身——jQuery.sub()

可以方便地创建jQuery副本，不影响原有的jQuery对像，避免jQuery冲突。示例代码如下：

(function(){
var sub$ = jQuery.sub();

sub$.fn.myCustomMethod = function(){
return ‘just for me’;
};

sub$(document).ready(function() {
sub$(‘body’).myCustomMethod() // ‘just for me’
});
})();

typeof jQuery(‘body’).myCustomMethod // undefined

了解更多，请阅读jQuery.sub()文档。

4. 增强了遍历相邻节点的性能

增强的遍历方法：.children(), .prev(), .next()，究竟增强多少，请看下图：

5. jQuery开发团队构建系统的改进

现在jQuery的构建基于服务端JavaScript环境——NodeJS，以前用的是Java/Rhino。编译器用的是来自Google Closure Compiler的UglifyJS，编译后的js文件更小。

© 我想网 Akon 所有 , 2011. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

（1）简化代码

JavaScript定 义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法可以达到同样的效果：

var car = {
	colour:'red',
	wheels:4,
　　hubcaps:'spinning',
　　age:4
}

后面的写法要短得多，而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法，过去我们声明数组是这样写的：

var moviesThatNeedBetterWriters = new Array(
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
);

更简洁的写法是：

var moviesThatNeedBetterWriters = [
  'Transformers','Transformers2','Avatar','Indiana Jones 4'
];

对于数组，还有关联数组这样一个特别的东西。 你 会发现很多代码是这样定义对象的：

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;

这太疯狂了，不要觉得困惑，“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符，举个例子：

var direction;
if(x < 200){
  direction = 1;
} else {
  direction = -1;
}

我们可以使用如下的代码替换这种写法：

var direction = x < 200 ? 1 : -1;

（2）使用JSON作为数据格式

var band = {
  "name":"The Red Hot Chili Peppers",
  "members":[
    {
      "name":"Anthony Kiedis",
      "role":"lead vocals"
    },
    {
      "name":"Michael 'Flea' Balzary",
      "role":"bass guitar, trumpet, backing vocals"
    },
    {
      "name":"Chad Smith",
      "role":"drums,percussion"
    },
    {
      "name":"John Frusciante",
      "role":"Lead Guitar"
    }
  ],
  "year":"2009"
}

<div id="delicious"></div><script>
function delicious(o){
  var out = '<ul>';
  for(var i=0;i<o.length;i++){
    out += '<li><a href="' + o[i].u + '">' +
           o[i].d + '</a></li>';
  }
  out += '</ul>';
  document.getElementById('delicious').innerHTML = out;
}
</script>
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

这里调用delicious 的Web服务获取最新书签，以JSON格 式返回，然后将它们显示成无序列表的形式。

从本质上讲，JSON是 用于描述复杂的数据最轻量级的方式，而且直接它运行在浏览器中。 你 甚至可以在PHP中调用 json_decode（）函数来使用它。

（3） 尽量使用JavaScript原生函数

要找一组数字中的最大数，我们可能会写一个循环，例如：

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){
  if(numbers[i] > max){
    max = numbers[i];
  }
}
alert(max);

其实，不用循环可以实现同样的功能：

var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

而最简洁的写法是：

Math.max(12,123,3,2,433,4); // returns 433

你甚至可以使用Math.max来检测浏览器 支持哪个属性：

var scrollTop= Math.max(
 doc.documentElement.scrollTop,
 doc.body.scrollTop
);

如果你想给一个元素增加class样 式，可能原始的写法是这样的：

function addclass(elm,newclass){
  var c = elm.className;
  elm.className = (c === '') ? newclass : c+' '+newclass;

而更优雅的写法是：

function addclass(elm,newclass){
  var classes = elm.className.split(' ');
  classes.push(newclass);
  elm.className = classes.join(' ');
}

（4）事件委托

事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写 一个循环，给每个链接对象绑定事件，HTML代码如下：

<h2>Great Web resources</h2>
<ul id="resources">
  <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
  <li><a href="http://sitepoint.com">Sitepoint</a></li>
  <li><a href="http://alistapart.com">A List Apart</a></li>
  <li><a href="http://yuiblog.com">YUI Blog</a></li>
  <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
  <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>

脚本如下：

// Classic event handling example
(function(){
  var resources = document.getElementById('resources');
  var links = resources.getElementsByTagName('a');
  var all = links.length;
  for(var i=0;i<all;i++){
    // Attach a listener to each link
    links[i].addEventListener('click',handler,false);
  };
  function handler(e){
    var x = e.target; // Get the link that was clicked
    alert(x);
    e.preventDefault();
  };
})();

更合理的写法是只给列表的父对象绑定事件，这样可行的原理在于事件是支持冒泡的，代码如下：

(function(){
  var resources = document.getElementById('resources');
  resources.addEventListener('click',handler,false);
  function handler(e){
    var x = e.target; // get the link tha
    if(x.nodeName.toLowerCase() === 'a'){
      alert('Event delegation:' + x);
      e.preventDefault();
    }
  };
})();

（5）匿名函数

关于JavaScript的最头疼的事情之一是，它的变量没有特定的作用范围。 一般情况下，任何变量，函数，数组或对象都是全局性，这意味着在同一页上的其他脚本可以访 问并覆盖它们。解决方法是把变量封装在一个匿名函数中。 例 如，下面的定义将产生三个全局变量和和两个全局函数：

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
  // [...]
}
function getMemberDetails(){
  // [...]
}

封装后如下：

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  return{
    createMember:function(){
      // [...]
    },
    getMemberDetails:function(){
      // [...]
    }
  }
}();
// myApplication.createMember() and
// myApplication.getMemberDetails() now works.

这被称为单体模式，是JavaScript设 计模式的一种，这种模式在YUI中用得非常多，改 进的写法是：

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
  return{
    create:createMember,
    get:getMemberDetails
  }
}();
//myApplication.get() and myApplication.create() now work.

（6） 代码可配置

你写的代码如果想让别人更容易进行使用或者修改，则需要可配置，解决方案是在你写 的脚本中增加一个配置对象。要点如下：

1、在你的脚本中新增一个叫configuration的对象。

2、在配置对象中存放所有其它人可能想要去改变的东西，例如CSS的ID、 class名称、语言等等。

3、返回这个对象，作为公共属性以便其它人可以进行重写。

（7） 代码兼容性

兼容性是初学者容易忽略的部分，通常学习Javascript的时候都是在某 个固定的浏览器中进行测试，而这个浏览器很有可能就是IE，这是非常致命的，因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。最终用户看到的结果 也许就是，你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下，这也许很费时间，但是应该这样做。

© 我想网 Akon 所有 , 2011. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

* 经过专业QA团队的测试以及百度各大产品线的应用，质量有保障。

Tangram Base – 基础库:
http://tangram.baidu.com/tangram/download.html
Tangram Component – 组件库:
http://tangram.baidu.com/tangram/codesearch.html

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

2010年最佳jQuery插件（排名不分先后）：

Nivo Slider

一个加载设置拥有9种过度效果的超级smooth slider，它还支持如链接图像和键盘导航等内容。

Quicksand

通过一个非常不错的洗牌动画实现选项内容重新排序，只需要指定源容器和替换源的目标collection 。新元素将会以奇特缩放+阿尔法效果出现，消失的元素(non-existant in destination collection)平滑地消失或重新排位，移动到它们的目标位置。

Spritely

Spritely 是一个由Artlogic开发的 jQuery插件，用于使用纯HTML和JavaScript创建动态物体和背景动画。

Lettering.js

Lettering.js是一个轻量经的、易于使用的 jQuery插件，可创造出极具个性的网页排版。

Colortip

Colortip可转换你的页面元素的标题属性为一系列色彩丰富的提示（当你的鼠标移动到不同的标题上会出现不同颜色的字体文本提示）。支持六种色彩主题，这样你可更加容易融合到你的个人网页中去。

Masonry

Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直，Masonry排列内容是根据一个网格先垂直后水平的。

gvChart

gvChart是一个使用Google Charts了的jQuery插件，可通过HTML table tag的数据实现交互可视化。它非常容易上手，此外它支持创建五种风格的图标。

Animated table sort

这是一个用于创建表格的jQuery插件，所创建的表格可以根据不同的列项目进行A-Z，升序排列，切换效果非常不错。

jQuery Image Scale Carousel

网站图片保持完整的纵横比比什么都重要。这个jQuery插件可以完美地在slider展示你所有的图片，而不需担心产生变形。 jQuery Image Scale Carousel插件自动改变你所有图片到适合大小，一切都是那么的简单。

YoxView

YoxView是一个免费的多媒体播放jQuery插件。它易于使用，功能丰富。你可以用它来展示各种媒体，如图像，视频，内嵌的内容，iframes，Flash等等。

© 我想网 Akon 所有 , 2010. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

Web pages are written in HTML, the web programming language that tells browsers how to lay out and present content on a web page. In other words, HTML provides the basic building blocks for the web. For a long time, those building blocks were pretty simple and static: lines of text, links and images.

众所周知，网页是用超文本标记语言（HTML）编写的，这种网页编程语言告诉浏览器怎样在网页中输出并 展现内容。换句话说，HTML就是网页这个建筑的一砖一瓦。长期以来，这些“砖瓦“都相当简单而且是静态的：仅有几行文字，或一些链接，或几张图片。

Today, the web goes beyond just text, links, and images. We expect to be able to play online chess or seamlessly scroll around a map of our neighborhood, without waiting for the entire page to reload for every chess move or every map scroll.

而今，网页中远不止文本，链接 和图片了。我们期望能够在线下象棋时，每走一步不必等待网页重新加载，或者查看一下我们周边的地图时，每拖到一下网页也不用重新刷新。

The idea of such dynamic web pages began with the invention of the scripting language JavaScript. JavaScript support in major web browsers meant that web pages could incorporate more meaningful real- time interactions. For example, if you’ve filled out an online form and hit the “submit” button, the web page can use JavaScript to check your entries in real-time and alert you almost instantly if you had filled out the form wrongly.

这些动态网页的创意开始与于脚本语言JavaScript的出现。主要的 网页浏览器都支持JavaScript，这就意味着网页能够加入一些更有意义的实时互动。例如，当你在线填一些表格时，点击“提交“按钮，网页可以调用 JavaScript代码来实时检查表格是否填错，如果有错误，网页马上就能提示你。

But the dynamic web as we know it today truly came to life when XHR (XML Http Request) was introduced into JavaScript, and first used in web applications like Microsoft Outlook for the Web, Gmail and Google Maps. XHR enabled individual parts of a web page — a game, a map, a video, a little survey — to be altered without needing to reload the entire page. As a result, web apps are faster and more responsive.

但今天我们所熟知的动态网页，是当XHR(XML Http Request)引入到JavaScript后才生机焕发，也是首次应用在像微软网页版Outlook，Gmail和Google地图这样的网页程序中。 XHR可以单独改变网页中的独立元素而无需重新加载整个网页，像网页中的游戏，地图，视频，或是个小调查。因此，网络应用程序运行地更快，更及时。

Web pages have also become more expressive with the introduction of CSS (Cascading Style Sheets). CSS gives programmers an easy, efficient way to define a web page’s layout and beautify the page with design elements like colors, rounded corners, gradients, and animation.

CSS（层叠样式表）的应用也使得网页显示更为生动。CSS给网页程序员提供了一个简单，有效的 方式来定义网页的布局，可以使用颜色，圆角，渐变和动画等设计元素来美化网页。

Web programmers often refer to this potent combination of JavaScript, XHR, CSS and several other web technologies as AJAX (Asynchronous JavaScript and XML). HTML has also continued to evolve as more features and improvements are incorporated into new versions of the HTML standard.

网页程序员通常把JavaScript, XHR, CSS 和其他诸如AJAX （异步JavaScript和XML）等网页技术结合，形成一个强有力的组合。随着增加的更多功能和改进整合在一起，HTML 也继续发展出一个新的标准版本。

Today’s web has evolved from the ongoing efforts of all the technologists, thinkers, coders and organizations who create these web technologies and ensure that they’re supported in web browsers like Internet Explorer, Firefox, Safari and Google Chrome. This interaction between web technologies and browsers has made the web an open and friendly construction platform for web developers, who then bring to life many useful and fun web applications that we use daily.

今天，网页在全体技术专家，思想家，程序员和一些组织的不懈努力下不断发展，这些组织不但创造了网页技术，而且要确保这些技术能被诸如 IE，Firefox, Safari和Google Chrome等浏览器中支持。网页技术专家和浏览器之间的相互关系，对网页开发者来说，使得网页成为既开放又友好的制作平台，他们给我们的生活带来更多有 用而且有趣的网页应用程序。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

用 Google 搜索了下 JavaScript Coverage 工具，琳琅满目。有商业版的 JavaScript Coverage Validator, 还有 FireBug 的不少扩展 JavaScript Code Coverage Tool for Firebug. 美中不足是，这些要么要花钱，要么已停止更新，杯具。

最后将目标锁定到免费开源一直更新的：JSCoverage. 不用不知道，一用立刻相见恨晚。下面简单介绍下。

下载安装非常简单，到 这里 下载 window 版本。完成后，将压缩包里的 jscoverage.exe 复制到 C:\Windows\System32. 安装完毕。

我们以 cookie 模块为范例。命令行模式，在 cookie 的上级目录 src 下输入：

jscoverage.exe cookie cookie_ --encoding=utf-8 --no-instrument=tests

运行后，就会生成 cookie_ 目录。原理是将需要检测的 js 文件重新编译，分析原始语句，并插入相应的监测代码。有兴趣的可以打开 cookie_/cookie.js 文件观摩。

--no-instrument=tests 是告诉 jscoverage 不要理会 tests 目录下的 js 文件。tests 目录下存放的是 Jasmine 测试文件，不需要监测。

接下来，在浏览器中通过服务器浏览就可以了: cookie_/jscoverage.html

在打开的页面中，点击 Summary, 可以看到：

非常清晰：cookie.js 的测试覆盖率为 91%, 点击 cookie.js 切换到 Source Tab, 可以具体看到哪些代码行没有执行。

一切就这么简单。利用 jscoverage-server.exe, 还可以生成报告，这里就不细说了，具体请看 JSCoverage User Manual.

有了 Jasmine, 让我们可以大胆重构代码和添加新功能。
有了 JSCoverage, 则让我们对 Jasmine Specs 的覆盖率有了全局掌握，可以随心所欲。

希望这篇文章，能让你对 JS Test Coverage 工具有个初步了解。好了，继续干活。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

最新更新：(2010-11-22)
1.修复IE6下不能遮住下拉菜单的BUG
2.修复IE6下不能固定定位问题

详细的看演示页吧：http://www.iwanna.cn/examples/js/jquery-tipswindow/index.html

© 我想网 Akon 所有 , 2010. | 永久链接 | 3 条评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

今天上网遇到有个网友在论坛问input的checkbox全选和反选的问题，顺手总结了一下，然后写了个简单 的jQuery checkbox全选反选插件，希望对大家有用。
如果是简单的实现checkbox的全选与反选可以使用下面的函数：

 function checkall(obj,cName)
 {
     var checkboxs = document.getElementsByName(cName);
     for(var i=checkboxs.length;i--;){
             checkboxs[i].checked = obj.checked;
     }
 }
//使用方法:给全选的按钮加onclick事件：onclick="checkall(this,'all[]');"

下面的jQuery checkbox插件是在网上找的：

$.fn.checkbox = function(){
    var t = this;
    /*
     * 切换全选/反选
     * @example $("#checkAll").checkbox().toggle($("input[name='selectAll']"));
     */
    this.toggle = function(el){
        $(el).click(function(){
            $(t).attr('checked', false);
        });
        $(this).click(function(){
            $(el).attr('checked', $(this).attr('checked') == true ? true : false);
        });
    };
    /*
     * 全选
     */
    this.check = function(el){
        $(el).attr('checked', true);
    };
    /*
     * 反选
     */
    this.uncheck = function(el){
        $(el).attr('checked', false);
    };
    return t;
};

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

点击访问：http://pivotfinland.com/frozendefence/

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

1. 选项卡功能(Tabs)
2. 提示工具条功能(ToolTips)
3. 信 息滚动功能(Scrollable)
4. 遮罩效果(overlay)
5. 突出效果(expose)
6. Flash 嵌入
7. 表单验证（Validator）
8. 范围选取（Rangeinput）
9. 日期选择 （Dateinput）

以下分别是具体功能列表：

1、选项卡(Tabs)

效果图

• Minimal setup for Tabs
• Naming the tabs
• 4 different skins with CSS
• Using mouseover to switch tabs
• Making Wizards with the Tabs
• Making Accordions with the Tabs
• Customizing the Accordion effect
• Horizontal Accordion using the Tabs
• Multiple Tabs and Accordion instances
• Handling browsers back button
• Loading tab contents with AJAX
• AJAX:ed tabs with History support
• Slideshow plugin for the Tabs

2、提示工具条(ToolTips)

效果图

• Basics of using the tooltip
• Using any HTML inside the tooltip
• Imitating browsers default tooltip
• Using tooltips in form fields
• Using tooltips in tables or lists
• Custom tooltip effect
• Dynamic positioning of the tooltip

3、遮罩效果(overlay)

效果图

• Minimal setup for overlay
• The Apple effect for overlay
• Creating modal dialogs with overlay
• Opening overlays programmatically
• Overlays with different styles
• Loading external pages into overlay
• Multiple overlays on a same page
• Creating a customized Overlay effect

4、滚动效果(Scrollable)

效果图

• Minimal setup for scrollable
• A vertical scrollable
• A simple scrollable image gallery
• Another gallery with many scrollables
• A scrollable registration wizard
• Scrollable plugins in action
• Navigation with browser’s back button
• jQuery Tools home page setup
• A complete scrollable navigational system
• Add and remove items from scrollable
• Customizing the scrolling animation

5、突出效果(expose)

效果图

• Minimal setup for expose
• Styling the mask with a background image
• Exposing a form
• Exposing videos with a custom mask

6、Flash嵌入

效果图

• Basics of Flash embedding
• Flashembed and jQuery
• Loading Flash on mouse click
• Placing HTML on top of a Flash object
• Handling old Flash versions
• Flashembed and Flowplayer

7、表单验证（Validator）

效果图

• Minimal setup for Validator
• Custom input types and attributes
• Combined server and client-side validation
• Displaying all errors inside a single DIV
• Validator events in action
• Localizing the Validator (finnish)

8、范围选取（Rangeinput）

效果图

• Minimal setup for rangeinput
• A couple of vertical ranges
• Multiple small ranges
• A custom scrollbar for a DIV

9、日期选择（Dateinput）

效果图

• Minimal setup for Dateinput
• A large skin for Dateinput
• Customizing Dateinput behaviour
• Prompting for start and end dates
• Calendar that is always visible
• Localizing the Dateinput (french)

10、 综合运用（Combinations）

效果图

• HTML5 form inside an overlay
• An artist’s portfolio
• Speeding up the portfolio

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

一个递归式的图

不过，好像只能识别白人

大家可以去试试。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

先简单为你讲一讲它的用法.在官方的网站也已经有了详细的介绍,这里就稍微翻译一下它所提供的例子.

1.  在你的HTML中加载Snippet和JQuery

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

2.  加载Snippet的CSS

<link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />

3.  重点是这一步,我们要把下面的代码写在<script>标记中,让Snippet对<pre>标记进行操作

$(document).ready(function(){
$("pre.htmlCode").snippet("html");
// 找到类名为htmlCode的<pre>标签
// 并且以HTML语法来高亮显示它
$("pre.styles").snippet("css",{style:"greenlcd"});
// 找到类名为styles的<pre>标签
// 并且以CSS语法来高亮显示它
// 显示的类型为greenlcd
$("pre.js").snippet("javascript",{style:"random",transparent:true,showNum:false});
// 找到类名为js的<pre>标签
//并且以JavaScript语法来高亮显示它
// 显示的类型为在39中随机选择
// 选择背景为透明
// 不显示行号
});

4.  可以动态更新你的Snippet

$(document).ready(function(){
$("pre#dynamic").snippet("php",{style:"navy",showNum:false});
// 找到类名为js的<pre>标签并把类型选为navy
// 隐藏行号
$("pre#dynamic").click(function(){
$(this).snippet({style:"vampire",transparent:true,showNum:true});
// 改变snippet的类型为vampire
// 改变背景为透明
// 显示行号
});
});

关于更多的参数可以在Snippet的网站的找到,这里就不多说了.总之Snippet是一个比较全面的而且很好用的显示高亮代码的插件,有兴趣的 话,你也可以下来试试.下载地址和例子点这里.

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

1、 Valums AJAX Uploader

2、 Plupload

3、 Uploadify

4、AJAX Multiple File Upload Form using jQuery

5、jQuery AJAX File Upload

6、jQuery Upload Progress

7、jQuery Multiple File Upload Plugin

8、Digitalarld Swiff AJAX Uploader

9、jQUploader

10、AJAX File Upload

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

这里有一系列教程，讲述如何用 JavaScript来写一个Gameboy模拟器，详尽描述了从一开始模拟CPU，到最后运行俄罗斯方块的过程。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh

根据Mozilla的测试，JägerMonkey引擎成绩为350.8ms，Chrome为356.5ms，而Webkit成绩为 369.7ms（得分越低说明浏览器越快）。

不过在V8基准测试中（V8基准测试套件来自Google），Firefox 4并没有超过Chrome，但是也取得了一定进展。在该测试中，JägerMonkey引擎成绩为2145.8ms，落后于 Chrome（1386.2ms），不过走到了Webkit之前（Safari成绩为2490.6ms）。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

Feed enhanced by Better Feed from Ozh