YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：

<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">

当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是

//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">

然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：

当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。

因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。

JavaScript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣，抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集，让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华，这是语言最本质最优雅的部分，通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效的保障我们写出优美高效的代码。

这是一本厚积薄发“薄”大精深的书籍，Douglas Crockford仅仅用了160页来道出JavaScript的语言本质，值得任何正在或者想从事JavaScript开发的人阅读，并且非常需要反复阅读。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越大师，这本书就是开始。

我很高兴和淘宝UED的前端主管小马（赵泽欣）一起来翻译这本书，去年近5个月的翻译时间是一个非常艰苦而又痛快的学习过程。我们冒着“犯罪”的危险完成了翻译，现在我也很惶恐的推荐给大家，希望我们的努力能让读者读出本书的精华，更要读懂JavaScript的语言精华。

感谢你的关注、阅读、建议和批评。

1. 购买《JavaScript语言精粹》
2. 样章阅读
   1. 第一章. 精华
   2. 第十章. 优美的特性
3. 勘误表
4. 淘宝UED Blog：《JavaScript语言精粹》译者序及样章试读
5. JavaScript大牛：Douglas Crockford

Douglas Crockford现在是Yahoo的资深JavaScript架构师，曾在Atari公司（视频游戏工业的领袖）开发了办公自动化系统，同时也完成了对于游戏和音乐的研究；曾任Lucasfilm（卢卡斯）电影公司技术总监；在Paramount（派拉蒙）公司任职过新媒体执行主管；在电气社区，通常为人所知的是communities.com的创始人兼首席执行官；他还创办了State软件公司并作为该公司CTO，这也是他发现JSON时所在的地方。他同时也对Blissymbolics非常感兴趣，这是一种图形、象征性的语言，并且对永久减肥（Permanent Weight Loss）做过研究。

YUI团队2008年底的合影，中间的长者即为Douglas Crockford：

Douglas Crockford作为JavaScript开发社区的Guru，其众多的在JavaScript开发方面的研究成果被广泛的应用，而他的思想也深深的影响了整个JavaScript应用和发展。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越，所以下面列表是一个开始：

1. JavaScript: The Wrrrld’s Most Misunderstood Programming Language
   中文：JavaScript:世界上最被误解的语言
2. The World’s Most Misunderstood Programming Language Has Become the World’s Most Popular Programming Language
   中文：JavaScript：从最受误解的编程语言演变为最流行的语言
3. A Survey of the JavaScript Programming Language
   中文：纵览 JavaScript语言
4. Code Conventions for the JavaScript Programming Language
   中文：JavaScript程序编码规范
5. The Little JavaScripter
   对《The Little Schemer》一书的讨论，并作了以JavaScript代替Scheme的尝试
6. Private Members in JavaScript
   中文：JavaScript中的私有成员
7. Prototypal Inheritance in JavaScript
   中文：在JavaScript实现基于原型的继承
8. Classical Inheritance in JavaScript
   中文：在JavaScript中实现基于类模式的继承
9. Remedial JavaScript
   过快的标准化导致JavaScript在开发过程中未得到足够的优化，当前它仍存在一些问题，本文提出了一些补救的措施
10. JavaScript and HTML Script Tags
    中文：JavaScript与HTML的Script标签
11. JScript Memory Leaks
    中文：JScript的内存泄漏
12. Top Down Operator Precedence
    自顶向下的运算符优先级，这是Douglas Crockford为《Beautiful Code（代码之美）》而写，位于书中第九章
13. The Elements of JavaScript Style, Parts One and Two
    中文：JavaScript的风格要素1和2
14. Minification v. Obfuscation
15. Synchronous v. Asynchronous
16. with Statement Considered Harmful
17. Global Domination
18. Global Domination, Part Two
19. for in Intrigue
20. JavaScript, We Hardly new Ya
    中文：JavaScript的new，好久不见啊
21. JSON and Browser Security
    中文：JSON和浏览器安全
22. I’d Rather switch Than Fight!
23. The Only Thing We Have To Fear Is Premature Standardization
    中文：不成熟的标准化是我们唯一惧怕的
24. When You Can’t Count On Your Numbers
25. Fixing HTML    中文
26. HTML4.2
27. Ajax security^幻灯片
28. JavaScript: The Good Parts^{视频，2009.03在Google的演讲}：
    1. 38 minutes^{视频位于Youtube上}
    2. 幻灯片^{和ajax world 2008版本一样}
29. The Mashup Problem and Google Gears^视频
    1. 44 minutes | MP4 download
30. The JavaScript Programming Language^视频：
    1. Part 1: 31 minutes | M4V download
    2. Part 2: 31 minutes | M4V download
    3. Part 3: 29 minutes | M4V download
    4. Part 4: 20 minutes | M4V download
    5. 幻灯片
31. An Inconvenient API: The Theory of the Dom^视频：
    1. Part 1 (31 minutes)
    2. Part 2 (21 minutes)
    3. Part 3 (26 minutes)
    4. 幻灯片
32. Advanced JavaScript^视频：
    1. Part 1: 31 minutes
    2. Part 2: 25 minutes
    3. Part 3: 11 minutes
    4. 幻灯片
33. Quality^{视频，YAHOO Frontend Summit 2007}：
    1. 48 minutes | M4V download
34. JavaScript: The Good Stuff^视频：
    1. 39 minutes | M4V download
35. The State of Ajax^视频：
    1. 38 minutes | M4V download
36. Ajax Performance^视频：
    1. 38 minutes | M4V download
    2. 幻灯片
    3. 誊本：英文、中文
37. The JSON Saga
    1. 38 minutes | M4V download
    2. 幻灯片
    3. 誊本
38. The State and Future of JavaScript
    1. 55 minutes | M4V download
    2. 幻灯片
39. On JavaScript
    1. Volume One: The Early Years ^{(Monday, January 25, 2010)}
       1. 90 minutes | M4V download
       2. 幻灯片
    2. Chapter 2: And Then There Was JavaScript ^{(Friday, February 5, 2010)}
       1. 90 minutes | M4V download
       2. 幻灯片
    3. Act III: Function the Ultimate ^{(Wednesday, February 17, 2010)}
       1. 73 minutes | M4V download
       2. 幻灯片
    4. Episode IV: The Metamorphosis of Ajax ^{(Wednesday, March 3, 2010)}
       1. 93 minutes | M4V download
       2. 幻灯片
    5. Part 5: The End of All Things ^{(Wednesday, March 31, 2010)}
       1. 94 minutes | M4V download
       2. 幻灯片

1. 区分大小写：变量名、属性和方法全部都区分大小写
2. 不匹配的引号、圆括号或花括号将抛出错误
3. 条件语句：3个常见陷阱
4. 换行：一直用分号结束语句来避免常见的换行问题
5. 标点法：在对象声明的尾部逗号将导致出错
6. HTML id 冲突
7. 变量作用域：全局变量对局部变量
8. 函数重载：当重载不存在时，覆盖函数
9. 区分string.replace()函数不是全局的
10. parseInt应该包含两个参数
11. “this”和绑定问题
12. 为参数设置默认值，以免你遗漏它们
13. for each循环是用于对象而不是数组
14. switch语句需要点技巧
15. 如果你要检查null，应该先检查undefined
16. 时间处理陷阱

区分大小写

变量名和函数名都是区分大小写的。就像配错的引号一样，这些大家都知道。但是，由于错误是不作声的，所以这是一个提醒。为自己选择一个命名规则，并坚持它。而且，记住JavaScript中的原生函数和CSS属性都是骆驼拼写法（camelCase）。

getElementById(’myId’) != getElementByID(’myId’); //它应该是“Id”而不是“ID”
getElementById(’myId‘) != getElementById(’myID‘); // “Id”也不等于“ID”

document.getElementById('myId').style.Color; //返回 "undefined"

不匹配的引号、圆括号或花括号

避免陷入不匹配的引号、圆括号或花括号陷阱的最好方式是编码时一直同时写出打开和关闭这两个元素符号，然后在其中间加入代码。开始：

var myString = ""; //在输入字符串值之前写入这对引号
function myFunction(){
 if(){//关闭每个打开的括弧
 }
}
//统计所有的左括号和右括号数量，并且确保它们相等
alert(parseInt(var1)*(parseInt(var2)+parseInt(var3))); //关闭每个打开的圆括号

每当你打开一个元素，请关闭它。当你添加了关闭圆括号后，你再把函数的参数放进圆括号中。如果有一串圆括号，统计所有打开的圆括号和所有关闭的圆括号，并且确保这两个数字相等。

条件语句（3个陷阱）

1. 所有的条件语句都必须位于圆括号中。执行语句主体不管是一句还是多句都强烈建议用花括号包围起来，这样能避免很多因修改或嵌套而产生的潜在错误。

   if(var1 == var2){//statement}

2. 不要犯无意地使用赋值运算符的错误：把第二个参数的值赋给第一个参数。因为它是一个逻辑问题，它将一直返回true且不会报错。

   if(var1 = var2){} // 返回true。把var2赋值给var1

3. JavaScript是弱类型，除了在switch语句中。当JavaScript在case比较时，它是非弱类型。

   var myVar = 5;
   if(myVar == '5'){ //返回true，因为JavaScript是弱类型
    alert("hi");  //这个alert将执行，因为JavaScript通常不在意数据类型
   }
   switch(myVar){
    case '5':
    alert("hi"); //这个alert将不会执行，因为数据类型不匹配
   }
   

换行

当心JavaScript中的硬换行。换行被解释为表示行结束的分号。即使在字符串中，如果在引号中包括了一个硬换行，那么你会得到一个解析错误（未结束的字符串）。

var bad  = '<ul id="myId">
  <li>some text</li>
  <li>more text</li>
  </ul>'; // 未结束的字符串错误

var good = '<ul id="myId">' +
 ‘<li>some text</li>‘ +
 ‘<li>more text</li>‘ +
 ‘</ul>’; // 正确

前面讨论过的换行被解释为分号的规则并不适用于控制结构这种情况：条件语句关闭圆括号后的换行并不是给其一个分号。

一直使用分号和圆括号，那么你不会因换行而出错，你的代码易于阅读，且除了那些不使用分号的怪异源码外你会少一些顾虑：所以当移动代码且最终导致两个语句在一行时，你无需担心第一个语句是否正确结束。

多余的逗号

在任何JavaScript对象定义中，最后一个属性决不能以一个逗号结尾。Firefox不会出错，而IE会报语法错误。

var theObj = {
        city : "Boston",
        state : "MA",//IE6和IE7中有“缺少标识符、字符串或数字”的错误，IE8 beta2修正了它
  }

HTML id 冲突

JavaScript DOM绑定（JavaScript DOM bindings）允许通过HTML id索引。在JavaScript中函数和属性共享同一个名字空间。所以，当在HTML中的一个id和函数或属性有相同的名字时，你会得到难以跟踪的逻辑错误。然而这更多是一个CSS最佳实践的问题，当你不能解决你的JavaScript问题时，想起它是很重要的。

<ul>
<li id="length">1</li>
<li id="thisLength">2</li>
<li id="thatLength">3</li>
</ul>
<script>
var listitems = document.getElementsByTagName('li');
var liCount = listitems.length; //IE下返回的是<li id="length">1</li>这个节点而不是所有<li的数量

var thisLength = document.getElementById('thisLength');
    thatLength = document.getElementById('thatLength');
    //IE下会出现“对象不支持此属性和方法”的错误，IE8 beta2下首次加载页面会出错，刷新页面则不会
    //在IE中thisLength和thatLength直接表示以其为id值的DOM节点，
    //所以赋值时会出错，当有var声明时，IE会把其当着变量，这个时候就正常了。
</script>

如果你要标记(X)HTML，绝不要使用JavaScript方法或属性名作为id的值。并且，当你写JavaScript时，避免使用 (X)HTML中的id值作为变量名。

变量作用域

JavaScript中的许多问题都来自于变量作用域：要么认为局部变量是全局的，要么用函数中的局部变量覆盖了全局变量。为了避免这些问题，最佳方案是根本没有任何全局变量。但是，如果你有一堆，那么你应该知道这些陷阱。

不用var关键字声明的变量是全局的。记住使用var关键字声明变量，防止变量具有全局作用域。在下面例子中，在函数中声明的变量具有全局变量，因为没有使用var关键字声明：

anonymousFuntion1 = function(){
 globalvar = 'global scope'; //全局声明，因为“var”遗漏了
 return localvar;
}();
alert(globalvar); //弹出“global scope”，因为函数中的变量是全局声明

anonymousFuntion2 = function(){
 var localvar = 'local scope'; //使用“var”局部声明
 return localvar;
}();
alert(localvar); //错误 “localvar未定义”。没有全局定义localvar

作为参数引进到函数的变量名是局部的。如果参数名也是一个全局变量的名字，像参数变量一样有局部作用域，这没有冲突。如果你想在函数中改变一个全局变量，这个函数有一个参数复制于这个全局变量名，记住所有全局变脸都是window对象的属性。

var myscope = "global";
function showScope(myscope){
 return myscope; //局部作用域，即使有一个相同名字的全局变量
}
alert(showScope('local'));

function globalScope(myscope){
 myscope = window.myscope; //全局作用域
 return myscope;
}
alert(globalScope(’local’));

你甚至可以在循环中声明变量：

for(var i = 0; i < myarray.length; i++){}

覆盖函数/重载函数

当你不止一次的声明一个函数时，这个函数的最后一次声明将覆盖掉该函数的所有前面版本且不会抛出任何错误或警告。这不同于其他的编程语言，像Java，你能用相同的名字有多重函数，只要它们有不同的参数：调用函数重载。在JavaScript中没有重载。这使得不能在代码中使用JavaScript核心部分的名字极其重要。也要当心包含的多个JavaScript文件，像一个包含的脚本文件可能覆盖另一个脚本文件中的函数。请使用匿名函数和名字空间。

(function(){
 // creation of my namespace 创建我的名字空间
 if(!window.MYNAMESPACE) {
  window['MYNAMESPACE'] = {};
 }
 //如果名字空间不存在，就创建它
 //这个函数仅能在匿名函数中访问
 function myFunction(var1, var2){
  //内部的函数代码在这儿
 }
 // 把内部函数连接到名字空间上，使它通过使用名字空间能访问匿名函数的外面 
 window['MYNAMESPACE']['myFunction'] = myFunction;
})(); // 圆括号 = 立即执行
// 包含所有代码的圆括号使函数匿名

这个例子正式为了实现解决上一个陷阱“变量作用域”的最佳方案。匿名函数详细内容请看《Javascript的匿名函数》。YUI整个库只有YAHOO和YAHOO_config两个全局变量，它正是大量应用匿名函数和命名空间的方法来实现，具体请看《Javascript的一种模块模式》。

字符串替换

一个常见错误是假设字符串替换方法的行为会对所有可能匹配都产生影响。实际上，JavaScript字符串替换只改变了第一次发生的地方。为了替换所有发生的地方，你需要设置全局标识。同时需要记住String.replace()的第一个参数是一个正则表达式。

var myString = "this is my string";
myString = myString.replace("","%20"); // "this%20is my string"
myString = myString.replace(/ /,"%20"); // "this%20is my string"
myString = myString.replace(/ /g,"%20"); // "this%20is%20my%20string"

parseInt

在JavaScript得到整数的最常见错误是假设parseInt返回的整数是基于10进制的。别忘记第二个参数基数，它能是从2到36之间的任何值。为了确保你不会弄错，请一直包含第二个参数。

parseInt('09/10/08'); //0
parseInt(’09/10/08′,10); //9, 它最可能是你想从一个日期中得到的值

如果parseInt没有提供第二个参数，则前缀为 ‘0x’ 的字符串被当作十六进制，前缀为 ‘0′ 的字符串被当作八进制。所有其它字符串都被当作是十进制的。如果 numString 的前缀不能解释为整数，则返回 NaN（而不是数字）。

‘this’

另一个常见的错误是忘记使用“this”。在JavaScript对象中定义的函数访问这个对象的属性，但没有使用引用标识符“this”。例如，下面是错误的：

function myFunction() {
 var myObject = {
  objProperty: "some text",
  objMethod: function() {
   alert(objProperty);
  }
 };
 myObject.objMethod();
} 

function myFunction() {
 var myObject = {
  objProperty: "some text",
  objMethod: function() {
   alert(this.objProperty);
  }
 };
 myObject.objMethod();
}

有一篇A List Apart文章用通俗易懂的英文表达了this绑定的问题。

对this使用最大的陷阱是this在使用过程中其引用会发生改变：

<input type="button" value="Gotcha!" id="MyButton">
<script>
var MyObject = function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function() {
        alert(this.alertMessage );
        //返回结果不是”JavaScript rules”，执行MyObject.ClickHandler时，
        //this的引用实际上指向的是document.getElementById("theText")的引用
  }
}();
document.getElementById(”theText”).onclick =  MyObject.ClickHandler
</script>

其解决方案是：

var MyObject = function () {
    var self = this;
    this.alertMessage = “Javascript rules”;
    this.OnClick = function() {
        alert(self.value);
    }
}();

类似问题的更多细节和解决方案请看《JavaScript作用域的问题》。

遗漏的参数

当给函数增加一个参数时，一个常见的错误是忘记更新这个函数的所有调用。如果你需要在已经被调用的函数中增加一个参数来处理一个特殊情况下的调用，请给这个函数中的这个参数设置默认值，以防万一在众多脚本中的众多调用中的一个忘记更新。

function addressFunction(address, city, state, country){
 country = country || “US”; //如果没有传入country,假设 “US”
 span>//剩下代码
}

你也能通过获取arguments来解决。但是在这篇文章我们的注意力在陷阱上。同时在《Javascript风格要素（2）》也介绍了||巧妙应用。

for关键字

在JavaScript中关键字for有两种使用方式，一个是for语句，一个是for/in语句。for/in语句将遍历所有的对象属性（attribute），包括方法和属性（property）。决不能使用for/in来遍历数组：仅在当需要遍历对象属性和方法时才使用for/in。

1. for(var myVar in myObject)语句用一个指定变量无任何规律地遍历对象的所有属性。如果for/in循环的主体删除了一个还没有枚举出的属性，那么该属性就不在枚举。如果循环主体定义了新属性，那么循环是否枚举该属性则是由JavaScript的实现决定。
2. for(var 1=0; i < myArray.length; i++)语句会遍历完一个数组的所有元素。

为了解决这个问题，大体上你可以对对象使用 for … in，对数组使用for循环：

listItems = document.getElementsByTagName('li');
for (var listitem in listItems){
 //这里将遍历这个对象的所有属性和方法，包括原生的方法和属性，但不遍历这个数组：出错了！
}
//因为你要循环的是数组对象，所用for循环
for ( var i = 0; i < listItems.length; i++) {
 //这是真正你想要的
}

对象的有些属性以相同的方式标记成只读的、永久的或不可列举的，这些属性for/in无法枚举。实际上，for/in循环
会遍历所有对象的所有可能属性，包括函数和原型中的属性。所有修改原型属性可能对for/in循环带来致命的危害，所以需要采用hasOwnProperty和typeof做一些必要的过滤，最好是用for来代替for/in。

switch语句

Estelle Weyl写了一篇switch statement quirks，其要点是：

1. 没有数据类型转换
2. 一个匹配，所有的表达式都将执行直到后面的break或return语句执行
3. 你可以对一个单独语句块使用多个case从句

undefined ≠ null

null是一个对象，undefined是一个属性、方法或变量。存在null是因为对象被定义。如果对象没有被定义，而测试它是否是null，但因为没有被定义，它无法测试到，而且会抛出错误。

if(myObject !== null  && typeof(myObject) !== 'undefined') {
 //如果myObject是undefined，它不能测试是否为null，而且还会抛出错误
}
if(typeof(myObject) !== 'undefined' && myObject !== null) {
 //处理myObject的代码
}

Harish Mallipeddi对undefined和null有一个说明。

事件处理陷阱

刚接触事件处理时最常见的写法就是类似：

window.onclick = MyOnClickMethod

这种做法不仅非常容易出现后面的window.onclick事件覆盖掉前面的事件，还可能导致大名顶顶的IE内存泄露问题。为了解决类似问题，4年前Simon Willison就写出了很流行的addLoadEvent()：

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 }else {
  window.onload = function() {
   oldonload();
   unc();
  }
 }
}
addEvent(window,'load',func1,false);
addEvent(window,'load',func2,false);
addEvent(window,'load',func3,false);

当然在JavaScript库盛行的现在，使用封装好的事件处理机制是一个很好的选择，比如在YUI中就可以这样写：

YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);

在Javascript定义一个函数一般有如下三种方式：

1. 函数关键字(function)语句：

   function fnMethodName(x){alert(x);}

2. 函数字面量(Function Literals)：

   var fnMethodName = function(x){alert(x);}

3. Function()构造函数：

   var fnMethodName = new Function('x','alert(x);')

上面三种方法定义了同一个方法函数fnMethodName，第1种就是最常用的方法，后两种都是把一个函数复制给变量fnMethodName，而这个函数是没有名字的，即匿名函数。实际上，相当多的语言都有匿名函数。

二、函数字面量和Function()构造函数的区别

1. 虽然函数字面量是一个匿名函数，但语法允许为其指定任意一个函数名，当写递归函数时可以调用它自己，使用Function()构造函数则不行。

   var f = function fact(x) {
     if (x < = 1) return 1;
     else return x*fact(x-1);
   };

2. Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。
3. Function()构造函数每次执行时都解析函数主体，并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反，函数字面量却不是每次遇到都重新编译的。
4. 用Function()构造函数创建一个函数时并不遵循典型的作用域，它一直把它当作是顶级函数来执行。

   var y = "global";
   function constructFunction() {
       var y = "local";
       return new Function("return y");  //  无法获取局部变量
   }
   alert(constructFunction()());  // 输出 "global"
   

和函数关键字定义相比Function()构造器有自己的特点且要难以使用的多，所以这项技术通常很少使用。而函数字面量表达式和函数关键字定义非常接近。考虑前面的区别，虽然有消息说字面量的匿名函数在OS X 10.4.3下的某些webkit的引擎下有bug，但我们平常所说的匿名函数均指采用函数字面量形式的匿名函数。更多详细内容可以阅读《JavaScript: The Definitive Guide, 5th Edition》的Functions那章。

三、匿名函数的代码模式

昨天hedger wang在他的blog介绍了几种匿名函数的代码模式：

错误模式：其无法工作，浏览器会报语法错。

function(){
  alert(1);
}();

1. 函数字面量：首先声明一个函数对象，然后执行它。

   (function(){
     alert(1);
   } ) ( );

2. 优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。

   ( function(){
     alert(2);
   } ( ) );

3. Void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。

   void function(){
     alert(3);
   }()

这三种方式是等同的，hedger wang因为个人原因比较喜欢第3种，而在实际应用中我看到的和使用的都是第1种。

四、匿名函数的应用

1. 《Javascript的一种模块模式》中的第一句话就是“全局变量是魔鬼”。配合var关键字，匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。实际上，YUI以及其相应的范例中大量使用匿名函数，其他的Javascript库中也不乏大量使用。
2. Javascript的函数式编程(functional programming)的基石。具体请看《用函数式编程技术编写优美的 JavaScript》和《函数式JavaScript编程指南》。

使用==时，当心强制转换

考虑下面函数：

function gw(f) {
 if (d.w.sv.checked == true) {
  zv = 'on';
 } else {
  zv = 'off';
 }
 procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
 escape(f.p.value) + "&sv=" + zv);
 return false;
}

==运算符不应该被用着和true比较值，因为它要执行强制转换。如果我们想确定d.w.sv.checked是否是布尔值
true，我们必须用===运算符。如果我们仅在意一个值是真实存在的不是假的，最好不要用相等运算符。

例如，由于强制转换：1 == true是真，1 === true是假。==运算符隐藏了类型错误。

使用?:运算符选择两值之一

if语句通常被用来从两个值中选择一个。这应该是三元操作符?:最适合的。

zv = d.w.sv.checked ? 'on' : 'off';

绝不使用隐含的全局变量

变量zv不是作为一个var或函数参数来声明的，所以它是一个隐式的全局变量。如果这个页面的另一个函数使用了同样名字的全局变量，则可能得到一个失败的结果。这样的臭虫（bug）是非常难以发现，却很容易避免。这个例子中，我们既可以声明zv为一个var，也可以发现它仅仅被使用过一次而整个去掉它。

function gw(f) {
 procframe.location.replace("http://b.www.yahoo.com/module/wtr_tr.php?p=" +
 escape(f.p.value) + "&sv=" + d.w.sv.checked ? 'on' : 'off');
 return false;
}

绝不使用?:运算符选择两种行为之一

我们常质疑那些返回一个常量的函数，但这有时是在浏览器环境下所必需的。

下面我们看一个不正确使用?:运算符的例子。它常被用于在两个任务间选择。

function u(o, z) {
 var em = o.id.substring(1);
 var p = d.getElementById('e' + em);
 if (p) {
  (z == 0) ? p.style.backgroundColor = '#fff' :
  p.style.backgroundColor = '#989898';
 }
 p = d.getElementById('e' + (em - 1));
 if (p) {
  (z == 0) ? p.style.backgroundColor = '#fff' :
  p.style.backgroundColor = '#989898';
 }
}

对Z的判断是模糊不清的。Z正好等于0时我们选择#fff颜色，那么，Z不等于时？如上所述似乎指明的是前者，但它实际上是后者。在这个例子中幸运的是，我们大概想要的就是后者，所以它不是技术上错误（这次）。但是在文体上只糟糕的。

我们可以用if代替?:，但碰巧的是这些值对应的是同一个左值(lvalue)，所以我们无需if就可以改正这个错误。

function u(o, z) {
 var em = o.id.substring(1),
 p = d.getElementById('e' + em);
 if (p) {
  p.style.backgroundColor = z ? '#fff' : '#989898';
 }
 p = d.getElementById('e' + (em - 1));
 if (p) {
  p.style.backgroundColor = z ? '#fff' : '#989898';
 }
}

使用||运算符指定一个默认值

事件处理程序依赖于浏览器。理想情况下，应用程序应该通过公共库隔绝对浏览器的依赖。当没有这样的库时，就会有些函数发生如下情况：

function md(e) {
 (window.event) ? ev = window.event : ev = e;
 (ev.target) ? sr = ev.target : sr = ev.srcElement;
 if (ev && sr && sr.id == "fp" || sr.id == "sb") st = 1;
 if (sr.className.indexOf("pllist") < 0 && sr.className != "more" &&
  sr.className != "plinkc" && sr.tagName != "scrollbar " &&
  _toClose && _toCloseNorgie) {
  d.getElementById(_toClose).innerHTML = "";
  _toClose = "";
  _toCloseNorgie.parentNode.className = '';
  _toCloseNorgie = '';
 }
}

一些浏览器把事件对象作为一个参数传给事件管理程序。微软选用把事件对象放入到一个全局的事件变量中。在Javascript中，全局变量是全局对象的成员。在浏览器中，全局对象始终包含一个window对象成员，其值是全局对象。当测试一个变量是否存在时，通过window访问全局变量是避免未定义变量错误的一种方法。无论如何，做这样的测试不应该是必要的。

我们能通过问它是否是另外一种，来代替首先判断是否是微软事件。

ev = e || event;

我们用||(默认)运算符。如果e是真，我们将有它的值，但是如果e是假，则我们将用event。

在下一个语句，我们又用||运算符去确定sr是哪个值。

我们应该用var去声明ev和sr来避免全局冲突：

function md(e) {
 var ev = e || event,
  sr = ev.target || ev.srcElement;
 if (sr && (sr.id == 'fp' || sr.id == 'sb')) {
  st = 1;
 }
 if (sr.className.indexOf('pllist') < 0 && sr.className != 'more' &&
 sr.className != 'plinkc' && sr.tagName != 'scrollbar ' &&
 _toClose && _toCloseNorgie) {
  d.getElementById(_toClose).innerHTML = '';
  _toClose = '';
  _toCloseNorgie.parentNode.className = '';
  _toCloseNorgie = '';
 }
}

全局变量是魔鬼

下面我们看到另一个时间处理程序。正如你所料，它重复像前面一样破坏风格。

function kd(e) {
 (window.event) ? ev = window.event : ev = e;
 (ev.target) ? el = ev.target : el = ev.srcElement;
 if (ev && el) {
  code = ev.keyCode;
  id = el.id;
 } else {
  return;
 }
 ctn = lt.id.substring(1);
 if (code == 13) {
  return;
 } else if ((code == 191 || code == 222) && id != 'fp') {
  _ffs = 1;
  gk = 0;
 } else if ((code < 31 || code > 41) &&
 (code < 16 || code > 18) && code != 9 && code != 8 ) {
  gk = 1;
 } else {
  gk = 0;
 }
 if (!_ffs && (id == 'fp' || id == 'st')) {
  if (code == 9) {
   if (box.value == '' || (box.value != '' && (at == 1 || ev.shiftKey))) {
    mt(ctn);
   } else if (id == 'st' && box.value != '' && at == 0) {
    at = 1;
    mt(ctn);
   }
  } else if (id == 'fp' && gk == 0 &&  (box.value == '' && st == 0)
    && !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
    d.getElementById('mk').focus();
    d.getElementById('mk').blur();
  } else if (gk == 1) {
  at = 0;
 }
 } else if ((id == 'mk2' && box.value != '' && ev.shiftKey && code == 9) ||
   (id == 'm6' && !ev.shiftKey && code == 9)){
    d.getElementById('mk').focus();
   } else if (!_ffs && gk == 1 && el.type != 'text' && !ev.ctrlKey && !ev.altKey){
    box.value = '';
    box.focus();
  }
}
function mt(ctn) {
 if ((ev && !ev.ctrlKey && !ev.altKey) || !ev) {
  if (ev.shiftKey){
   nextTab = parseInt(ctn) - 1;
  } else {
   nextTab = parseInt(ctn) + 1;
  }
  if (nextTab == 0) {
   d.getElementById('mk').focus();
  } else if (nextTab < 8 ) {
   t(d.getElementById('v' + nextTab));
  } else {
   return;
  }
 }
}

有意思的是它有一个同伴函数mt，它仅被kd调用。mt被传给一个参数ctn，但kd和mt之间的通讯大部分是通过全局变量。

使用内部函数避免全局变量

我们可以通过增加传递给mt的参数数量来除掉所有的全局变量。但代替方案，我们将使mt变成kd的内部函数。作为一个内部函数，mt能访问kd的所有变量。

unction kd(e) {
    var ev = e || event,
        el = ev.target || ev.srcElement,
        cnt,
        code = ev.keyCode,
        gk,
        id = el.id,
        ctn = lt.id.substring(1);

    function mt() {
        var nextTab;
        if (!ev.ctrlKey && !ev.altKey) {
            nextTab = parseInt(ctn) + ev.shiftKey ? -1 : 1;
            if (!nextTab) {
                d.getElementById('mk').focus();
            } else if (nextTab < 8 ) {
                t(d.getElementById('v' + nextTab));
            }
        }
    }

    if (code == 13) {
        return;
    } else if ((code == 191 || code == 222) && id != 'fp') {
        _ffs = 1;
        gk = 0;
    } else if ((code < 31 || code > 41) &&
            (code < 16 || code > 18) && code != 9 && code != 8 ) {
        gk = 1;
    } else {
        gk = 0;
    }
    if (!_ffs && (id == 'fp' || id == 'st')) {
        if (code == 9) {
            if (box.value == '' ||
                    (box.value != '' && (at == 1 || ev.shiftKey))) {
                mt();
            } else if (id == 'st' && box.value != '' && at == 0) {
                at = 1;
                mt();
            }
        } else if (id == 'fp' && gk == 0 && (box.value == '' && st == 0) &&
                !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
            d.getElementById('mk').focus();
            d.getElementById('mk').blur();
        } else if (gk == 1) {
            at = 0;
        }
    } else if ((id == 'mk2' && box.value != '' && ev.shiftKey && code == 9) ||
            (id == 'm6' && !ev.shiftKey && code == 9)){
        d.getElementById('mk').focus();
    } else if (!_ffs && gk == 1 && el.type != 'text' && !ev.ctrlKey &&
            !ev.altKey) {
        box.value = '';
        box.focus();
    }
}

在函数kd中，从两个地方调用函数mt。通过使它成为一个内部函数，我们能有效的减少kd所用到的全局变量的数目，这将降低了干扰其他组件的可能性。kd依旧是一个烂摊子，但它现在不是一无是处的烂摊子。

原文：Douglas Crockford的The Elements of JavaScript Style Part Two: Idioms

好的体系架构是必需给程序足够的结构使其健壮而不会陷入混乱的泥淖，但我们表达一个程序细节的方式是同等重要的。一个程序的本质会被不良的编码所隐藏。只有当一个程序的表达清晰时，我们才能有希望正确的推理出它的效率、安全和正确性。

William Strunk的《风格要素》(The Elements of Style)是关于文学风格的经典著作，它是一本关于英文写作的薄手册，在用法、组织和形式上提出忠告。风格的理念应用于编程，在1972年Kreitzberg和Shneiderman的《FORTRAN风格要素》（The Elements of FORTRAN Style）中是不成功的，但在1978年的Kernighan和Plauger的《编程风格要素》（The Elements of Programming Style）中是非常成功的：

好的编程不能通过笼统的说教。学习编程的好方法是一次又一次的思考：真正的编程是如何通过一些良好实践的原则和一点常识来进行改进的。

他们从他们批评和改进的其他的编程教科书中筛选程序。

当我们在这里谈论风格时，我们谈论的不是潮流或者时尚，也不是CSS、布局惯例或排版。我们正在谈论的是能真正提高代码价值的表达式的永恒品质。对于公司来说，他们的评估和他们的代码是息息相关的，风格应该是一个至关重要的受关注内容。

我们使用许多编程语言，但在某一方面，Javascript是最重要的，它是浏览器的语言。当人们访问我们的站点时，他们将邀请我们的Javascript程序在他们的机器中执行。我们有义务使那些程序执行好。

没有好的关于Javascript编程的课本。在网页使用Javascript的大多数人学习它是通过从糟糕的书、糟糕的站点和糟糕的工具中复制相当糟糕的例子。我们这里有极好的Javascript程序员社区，但我们依旧能从较好的风格实践中获益。

为了证明这个问题，我将从公共网站中抽取一些程序，展示它们如何能被改进。这并不是我有意为难任何人。我的意图仅是通过例子展示风格的价值。我不会保留任何秘密：我展示给你的是我们已经传送给世界上的每一个人。

淘汰过时结构

下面的例子是2005-09-19摘自www.yahoo.com：

<script language=javascript><!--
     lck='',
     sss=1127143538,
     ylp='p.gif?t=1127143538&_ylp=A0Je5ipy2C5D54AAwVX1cSkA',
     _lcs='';
--></script> 

这个脚本块用了language属性。这个特性是微软为了支持VBScript引入的。然而Netscape采用它是为了支持非标准偏差。W3C不采取这个language属性，倾向使用MIME类型的type属性取代。不幸的是，MIME类型未得到标准化，所以它有时是”text/javascript”、”application/ecmascript”或其他。幸运的是所有的浏览器都选择Javascript作为默认的编程语言，所以简单的写<script>是最好的。它最小，且工作在最多的浏览器。在脚本中使用HTML的注释的时间要回溯到Netscape Navigator和Netscape Navigator 2的兼容问题上来。后者引入了<script>标签。然而，前者的用户能像文本一样看到脚本，因为在HTML惯例中不能识别的标签被忽略。<!–注释hack在Netscape Navigator 3出现的时候是需要的，现在它不被需要了。它是丑陋的且浪费空间的。

逗号运算符像Javascript语法的大多数一样从C语言中借用。逗号运算符获得两个值，且返回第二个。在语言的定义中它的存在易于掩盖一定的编码错误，编译器也易于对一些错误视而不见。最好避免逗号运算符，并以分号运算符代替。

在这个案例里，我们定义了一些全局变量。当指定一个未知（匿名）的变量时，Javascript会创建一个新的全局变量来替代产生的错误。事后看来，这是一个错误。即使当他们是一个标准错误，这是避免错误的最好办法。我们应该明确的声明变量。它花费我们四个字符，但是它正是要做的正确的事。

<script>
var lck = '3ek6b0i2he2a5eh3/o',
    sss = 1126894256,
    ylp = 'p.gif?t=1126894256&_ylp=A0Je5iOwCitDw2YBX331cSkA',
    _lcs = '94040';
</script>

从上面我们能得出这样的原则：淘汰过时结构

结构化语句要始终使用区块

下面这个例子是一个cookie类构造器。它创建了一个有get和set方法的对象。

function yg_cookie() {
    this.get = function (n) {
        var s,
            e,
            v = '',
            c = ' ' + document.cookie + ';';
        if ((s = c.indexOf((' ' + n + '='))) >= 0) {
            if ((e = c.indexOf(';',s)) == -1)
                e = c.length;
            s += n.length + 2;
            v = unescape(c.substring(s, e));
        }
        return (v);
    }
    this.set = function (n,v,e) {
        document.cookie = n + "=" + escape(v) +
            ";expires=" + (new Date(e * 1000)).toGMTString() +
            ";path=/" + ";domain=www.yahoo.com";
    }
}
var _yc = new yg_cookie();

Javascript的if语句和C语言的相似：它能执行一个语句或一个区块。关于用语句的问题是一个普通的错误非常难以探测。最好把

if ((e = c.indexOf(';', s)) == -1)
    e = c.length;

写成

if ((e = c.indexOf(';', s)) == -1) {
    e = c.length;
}

区块的用处是避免了下面的情况：

if ((e = c.indexOf(';', s)) == -1)
    e = c.length;
    s += n.length + 2;

它将出现当indexOf返回-1是，s是只被增加，但这不是实际情形。像这样的bug被发现代价是非常高的，但是可以通过一直使用大括号声明结构来廉价的避免。

避免赋值表达式

Javascript从C继承的另一个坏习惯是赋值表达式。它出现在流线型代码中，但它能使控制流更难以理解。如果我们从他们的使用中分离了s和e的计算，get方法会变得更清晰。

this.get = function (n) {
    var v = '',
        c = ' ' + document.cookie + ';',
        s = c.indexOf((' ' + n + '=')),
        e = c.indexOf(';', s);
    if (s >= 0) {
        if (e == -1) {
            e = c.length;
        }
        s += n.length + 2;
        v = unescape(c.substring(s, e));
    }
    return (v);
}

我们现在能看到当s被计算时，在indexOf参数两边有多余的括号。（在return语句中也有非必须的括号。）但是更重要的是，能容易的看出if (e == -1)的目的是什么：如果cookie中末尾的分号不存在，假定cookie结束在字符串的末端。然而，当我们计算c时，我们在cookie中加入了一个分号，它保证了预料的if条件将绝不会发生。所以我们能移除if。

使用对象参数

当一个函数被指定一个值，像在this.get = function (n) { … }中，它应该以一个分号来结束所有的赋值语句。

function yg_cookie() {
    this.get = function (n) {
        var v = '',
            c = ' ' + document.cookie + ';',
            s = c.indexOf((' ' + n + '='));
        if (s >= 0) {
            s += n.length + 2;
            v = unescape(c.substring(s, c.indexOf(';', s)));
        }
        return v;
    };
    this.set = function (n,v,e) {
        document.cookie = n + "=" + escape(v) +
            ";expires=" + (new Date(e * 1000)).toGMTString() +
            ";path=/" + ";domain=www.yahoo.com";
    };
}
var _yc = new yg_cookie();

最后，我们看到yg_cookie是一个能产生一个无状态对象的构造器。我们一点也不需要构造器函数。我们能简单创建一个空对象，通过指派方法的方式来增加它。

var _yc = new Object();
_yc.get = function (n) {
    var v = '',
        c = ' ' + document.cookie + ';',
        s = c.indexOf((' ' + n + '='));
    if (s >= 0) {
        s += n.length + 2;
        v = unescape(c.substring(s, c.indexOf(';', s)));
    }
    return v;
};
_yc.set = function (n,v,e) {
    document.cookie = n + "=" + escape(v) +
        ";expires=" + (new Date(e * 1000)).toGMTString() +
        ";path=/" + ";domain=www.yahoo.com";
};

如果我们不需要支持Netscape3和IE4，我们能通过对象字面量来实现的更加优雅。

var _yc = {
    get: function (n) {
        var v = '',
            c = ' ' + document.cookie + ';',
            s = c.indexOf((' ' + n + '='));
        if (s >= 0) {
            s += n.length + 2;
            v = unescape(c.substring(s, c.indexOf(';', s)));
        }
        return v;
    },
    set: function (n,v,e) {
        document.cookie = n + "=" + escape(v) +
            ";expires=" + (new Date(e * 1000)).toGMTString() +
            ";path=/" + ";domain=www.yahoo.com";
    }
};

使用通用库

此时对于处理cookies我们有几种方法。我们发现下一个事情是令人惊奇的，它是没有利用我们定义的方法的cookies处理方式代码。

var b,
    l = '',
    n = '0',
    y;
y = ' ' + document.cookie + ';';
if ((b = y.indexOf(' Y=v')) >= 0) {
    y = y.substring(b, y.indexOf(';', b)) + '&';
    if ((b = y.indexOf('l=')) >= 0) {
        l = y.substring(b + 2, y.indexOf('&', b));
        if ((b = y.indexOf('n=')) >= 0)
            n = y.substring(b + 2, y.indexOf('&', b));
    }
}

它甚至复制了我们早前看到的同样技术。很有可能两块代码都改写自同一个有缺点的原稿。我们可以利用我们最近的工作来改进它：

var l = '',
    n = '0',
    y = _yc.get('Y') + '&',
    b = y.indexOf('l=');
if (b >= 0) {
    l = y.substring(b + 2, y.indexOf('&', b));
    b = y.indexOf('n=');
    if (b >= 0) {
        n = y.substring(b + 2, y.indexOf('&', b));
    }
}

代码重用是软件工程的圣杯。我们可以想象通过最先进的技术避免大量的必需的手工工作来得到高效率。这里我们发现一种失败，使用一种方法需要在相邻需要它的地方进行定义。

软件的体系结构倾向于反映生产他们的组织结构。在这种情况下，我们看到一个组织由于缺乏流程的连通意识而导致的明显低效的证据。风格的应用是吹毛求疵的，因为如果我们理解这几条是什么才有可能正确的一起使用这几条。

原文：Douglas Crockford的The Elements of JavaScript Style Part One

Douglas Crockford已经传授了一个有用的单例模式（singleton pattern）实现此规则，我认为他的模式有益于你基于YUI的那些应用。Douglas叫它模块模式（module pattern）。它是如下工作的：

1. 创建一个命名空间对象：如果你使用YUI，可以用YAHOO.namespace()方法： YAHOO.namespace("myProject");这分配了一个空的myProject对象，是YAHOO的一个成员（如 果myProject已存在的话，则不会被覆盖）。现在我们可以开始添加YAHOO.myProject的成员。
2. 对你的命名空间对象分配一个匿名函数返回值：

   YAHOO.myProject.myModule = function () {
   return  {
     myPublicProperty: "我作为YAHOO.myProject.myModule.myPublicProperty被访问。";
     myPublicMethod: function () {
       YAHOO.log("我作为YAHOO.myProject.myModule.myPublicMethod被访问。");
     }
   };
   }(); // 这个括号导致匿名函数被执行且返回
   

   注意有闭合大括号和紧接着的括号()的最后一行—这种符号导致了匿名函数的立即执行，返回包含myPublicProperty和myPublicMethod的对象。只要这个匿名函数一返回，返回对象就作为YAHOO.myProject.myModule被访问。

3. 在匿名函数中，在返回语句前加入“私有”方法和变量。到目前为止，我们只是将myPublicProperty和myPublicMethod直接分配到YAHOO.myProject.myModule中。此外，当我们在返回语句之前放置一些代码时，这个模式还支持被增加的效用。

   YAHOO.myProject.myModule = function () {
   //“私有”变量：
   var myPrivateVar = "我仅能在YAHOO.myProject.myModule内被访问。";
   //私有方法：
   var myPrivateMethod = function () {
       YAHOO.log("我仅能在YAHOO.myProject.myModule内被访问。");
   }
   
   return  {
       myPublicProperty: "我作为YAHOO.myProject.myModule.myPublicProperty能被访问。"
       myPublicMethod: function () {
       YAHOO.log("我作为YAHOO.myProject.myModule.myPublicMethod能被访问。");
       //在myProject,我能访问私有的变量和方法
       YAHOO.log(myPrivateVar);
       YAHOO.log(myPrivateMethod());
       //myPublicMethod的原生作用域是myProject，我们可以用“this”来访问公共成员。
       YAHOO.log(this.myPublicProperty);
       }
   };
   }();

   在上面的代码中，我们从一个匿名函数返回有两个成员的一个对象。在YAHOO.myProject.myModule内部，可以分别用this.myPublicProperty和this.myPublicMethod来访问。在YAHOO.myProject.myModule外部，公共成员可以用YAHOO.myProject.myModule.myPublicProperty和YAHOO.myProject.myModule.myPublicMethod来访问。
   私有变量myPrivateProperty和myPrivateMethod只能被匿名函数本身或返回对象的成员访问。尽管匿名函数会立即执行和终止，但它们依然是保留着，凭借闭包（closure）的力量——通过一个函数的局部变量在这个函数返回后是保留的规则。只要 YAHOO.myProject.myModule需要它们，我们的两个私有变量就不会被销毁。

4. 实践这个模式。让我们来看看这个模式的一个常见应用案例。假设你有一个列表，列表上的一些项可以被拖拽。应用拖拽的项上有拖拽的CSS类。

   <!--这个脚本文件包含所有的YUI实用程序-->
     <script type="text/javascript"
   src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
   <ul id="myList">
      <li class="draggable">一项</li>
      <li>二项</li> <!--二项将不能被拖拽-->
      <li class="draggable">三项</li>
      </ul>
   <script>
     YAHOO.namespace("myProject");
     YAHOO.myProject.myModule = function () {
    //YUI实用程序的私有简写引用：
     var yue = YAHOO.util.Event,
     yud = YAHOO.util.Dom;
    //私有方法
     var getListItems = function () {
    // 注意这个地方使用其他的私有变量，包括"yud"YAHOO.util.Dom的简写：
     var elList = yud.get("myList");
     var aListItems = yud.getElementsByClassName(
     "draggable", //得到仅有CSS类"draggable"的项
     "li", //仅返回列表项
     elList //限定搜索改元素的子
     );
     return aListItems;
     };
    //这个放回的对象将变成YAHOO.myProject.myModule:
     return  {
    aDragObjects: [], //可对外访问的，存储DD对象
    init: function () {
     //直到DOM完全加载好，才实现列表项可拖拽：
     yue.onDOMReady(this.makeLIsDraggable, this, true);
     },
    makeLIsDraggable: function () {
     var aListItems = getListItems(); //我们可以拖拽的那些元素
     for (var i=0, j=aListItems.length; i<j; i++) {
     this.aDragObjects.push(new YAHOO.util.DD(aListItems[i]));
     }
     }
    };
     }();
   //上面的代码已经执行，所以我们能立即访问init方法：
     YAHOO.myProject.myModule.init();
     </script>

   这是一个简单的例子，特意写的详细一些——如果按照这种方式做，我们无疑能把它写的更紧凑。当项目变得更加复杂和它的API增加，这个模式缩放的很好。通过这种方式，它避免了全局命名空间，提供了对外的可以访问的API方法，支持受保护或“私有”的数据和方法。

• [1]原文：《a javascript module pattern》。这是在YUI blog上的，有的地方可能打不开，可以搜一下英文的转载或者利用搜索引擎的缓存也能看。
• [2]《A JavaScript Module Pattern – JavaScript的一种模组模式》这是别人的翻译，参考了不少，不过感觉挺不方便看的，这是我翻译的这篇文章的一个原因，当然最主要的原因是这篇文章算是学习YUI的最基础的文章了，整个YUI的模块模式都基于此。

dwnTree是一个可记忆的无限级树型菜单，它的特点如下：

1. 菜单数据采用XML格式，依据XML文档树结构生成树型菜单，可在XML文档中设置子菜单在加载时是否展开和菜单链接的target方式
2. 可启用记录菜单的打开状态（需要Cookie的支持）,记住用户最后的菜单操作状态
3. 支持WEB标准，考虑语义化，支持IE5.5+，Firefox，Opera
4. 使用简单，同一页面无限次使用

可以任意使用（因为涉及到cookie和ajax获取数据，本地请在虚拟环境下打开），请保留说明和链接，谢谢！

在线演示下载源码

使用

1. 下载源码，把图片、JS和CSS文件放入到相应的文件夹中
2. 修改XML文件，建立需要的XML文档，比如dwnTree.xml
3. 在HTML文档中加入如下代码，用以加载Javascript和CSS文件

   <style type="text/css">
   <!--
   @import "dwnTree.css";
   -->
   </style>
   <script type="text/javascript" src="dwnTree.js"></script>
   

4. 在页面需要加入dwnTree的地方，建立容器标签，并随之调用dwnTree代码

   <div id="dwnTree" class="dwnTree"></div>
   <script type="text/javascript">//<![CDATA[
   new dwnTree('dwnTree.xml','dwnTree');//调用dwnTree
   //如果希望dwnTree记录菜单的状态，需要cookie的支持
   //如果把这个cookie叫dwnTreeCookie,那么上面的代码变成：
   new dwnTree('dwnTree.xml','dwnTree',{name:'dwnTreeCookie'});
   //]]></script>
   

参数

1. dwnTree XML：

   <item caption="关注" unfolded="">
       <item caption="互联网 &amp; IT" url="" target="_blank" />
       <item caption="电影 &amp; 电视" url="" target="_blank" />
   </item>
   

   参数	值	说明
   caption	菜单名
   unfold	空值或unfold	控制其子菜单加载时是否展开，为空时是不展开
   url	菜单的链接	合法的URL
   target	菜单链接的打开方式

2. dwnTree Javascript：

   new dwnTree('dwnTree.xml','dwnTree',
   	{name:'dwnTreeCookie',hours:24,path:null,domain:null,secure:false});
   

参数	值	说明
dwnTree.xml	xml的路径	必须
dwnTree	菜单容器标签的ID	必须
name	cookie名	当有该值时，dwnTree开始记录菜单的状态
hours	cookie保留时间	默认是一年，即365*24
path	cookie路径
domain	cookie域
secure	cookie传输状态

问题

1. 以dwnTree来庆祝2007年的劳动节，祝大家劳动节快乐
2. 因为劳动节需要回家的原因，匆忙推出，未经非常仔细的测试，只在IE5.5、IE6、IE7、Firefox2、Oprea9下粗略测试
3. 肯定会存在一些BUG和不足，请留言指出，我非常乐意看到建议，谢谢

更新记录

1. 2007.04.30 发布1.0版本
2. 2007.07.01 发布1.1版本，解决当未在虚拟环境下运行或者Ajax获取链接出错时，浏览器报“未定义”错误问题

撬出大写锁定键肯定很多人舍不得，即使是软件实现也很少有人去做，因此在用户输入密码时如果按下大写锁定键进行提示应该是一个不错的主意。代码如下：

<script type="text/javascript">//<![CDATA[
function  detectCapsLock(event){
var e = event||window.event;
var o = e.target||e.srcElement;
var oTip = o.nextSibling;
var keyCode  =  e.keyCode||e.which; // 获取按键的keyCode
var isShift  =  e.shiftKey ||(keyCode  ==   16 ) || false ;
// 判断shift键是否按住
if (
((keyCode >=   65   &&  keyCode  <=   90 )  &&   !isShift)
 	// Caps Lock 打开，且没有按住shift键
|| ((keyCode >=   97   &&  keyCode  <=   122 )  &&  isShift)
	// Caps Lock 打开，且按住shift键
){oTip.style.display = '';}
else{oTip.style.display  =  'none';}
}
document.getElementById('password').onkeypress = detectCapsLock;
//]]></script>

演示实例