`
hideto
  • 浏览: 2683383 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[译]JavaScript代码规范

阅读更多
原文: Code Conentions for the JavaScript Programming Language

这是一篇JavaScript编程代码规范,它由Sun公司的文档Code Conventions for the Java Programming Language激发而来。
由于JavaScript is not Java,这篇规范和Java规范相比有很大改动。

代码质量在软件质量中占很大比例。在软件生命周期里,一个程序会被许多人接手。如果一个程序可以很好的表达自己的结构和特性,则在
不久的将来修改它时就会减少程序崩溃的可能。

代码规范可以帮助减少程序的脆弱性。

我们所有的JavaScript代码都直接发布给公众,它应该具有发布质量。

Neatness counts.


目录:
JavaScript文件
缩进
行宽
注释
变量声明
方法声明
命名
语句
- 简单语句
- 复合语句
- 标签
- return语句
- if语句
- for语句
- while语句
- do语句
- switch语句
- try语句
- continue语句
- with语句
空格
额外的建议
- {}和[]
- 逗号操作符
- 块作用域
- 赋值表达式
- ===和!==操作符
- 令人混淆的加和减
- 邪恶的eval


JavaScript文件
JavaScript程序应该作为一个.js文件存储和发布。

JavaScript代码不应该嵌入在HTML文件里,除非那些代码是一个单独的会话特有的。HTML里的JavaScript代码大大增加了页面的大小,并且
很难通过缓存和压缩来缓解。

<script src=filename.js>标签应该在body里越靠后的位置越好。这减少了由于加载script而导致的其它页面组件的延迟。没有必要使用
language或者type属性。由服务器而不是script标签来决定MIME类型。


缩进
缩进的最小单位是4个空格。不要使用tab键,because (as of this writing in the 21st Century) there still is not a standard
for the placement of tabstops. 使用空格会引起文件变大,但是这点大小对局域网无关紧要,而且差别被minification消除了。

行宽
不要让一行代码超过80个字符。当一条语句不能在单独一行写完时,可能有必要拆分它。在操作符后进行拆分,最好是在逗号后面拆分。
操作符后面进行拆分减少了通过插入分号伪装copy-paste错误的可能性。下一行应该缩进8个空格。

注释
慷慨的写注释。留下一些供需要理解你做了什么的人们(可能是你自己)下次阅读的信息是有用的。注释应该书写良好和清晰,就像它们
标注的代码一样。偶尔小幽默一把也是可以的。挫折和怨恨就别写了。

更新注释非常重要。错误的注释让程序更难读懂和理解。

让注释有意义。更多的关注于不能马上可见的东西。不要用如下内容浪费读者的时间:
i = 0; // Set i to zero.

一般使用行注释。把块注释用于正式文档或外部注释。

变量声明
所有的变量应该在使用前声明。JavaScript不强求这点,但是这样做会让程序更易读,并且会让探测未声明的可能变成隐式的globals
变量更容易。

var语句应该为方法体内的第一个语句。

每个变量声明应该自己占一行并有注释。它们应该按字母顺序排列。
var currentEntry; // currentyly selected table entry
var level;        // indentation level
var size;         // size of table

JavaScript没有块作用域,所以在块里定义变量可能会让有其它C家族语言经验的程序员迷惑。在方法顶端定义所有变量。

尽量少使用全局变量。隐式的全局变量应该从来不使用。

方法声明
所有的方法应该在它们使用前声明。内部方法应该位于var语句后面。这让哪些变量包含在它的scope里更清楚。

方法名和参数列表的“(”(左圆括号)之间不应该有空格。在“)”(右圆括号)和“{”(左大括号)之间有一个空格。
方法体本身缩进4个空格。“}”(右大括号)应该和方法声明处对齐。
function outer(c, d) {
  var e = c * d;

  function inner(a, b) {
    return (e * a) + b;
  }

  return inner(0, 1);
}

这个规范可以和JavaScript很好的工作,因为在JavaScript里方法和对象字面量可以放在允许表达式的任何位置。它使用内部方法和复杂
结构提供最好的可读性。
function getElementsByClassName(className) {
    var results = [];
    walkTheDOM(document.body, function (node) {
        var a;                  // array of class names
        var c = node.className; // the node's classname
        var i;                  // loop counter
// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.
        if (c) {
            a = c.split(' ');
            for (i = 0; i < a.length; i += 1) {
                if (a[i] === className) {
                    results.push(node);
                    break;
                }
            }
        }
    });
    return results;
}

如果一个方法字面量为匿名的,则在“function”和“(”(左圆括号)之间应该有一个空格。如果省略空格,则它可能看起来方法名是
“function”,而这是错误的。
div.onclick = function (e) {
    return false;
};
that = {
    method: function () {
        return this.datum;
    },
    datum: 0;
};

尽量少用全局方法。

命名
命名应该由26个大小写字母(A .. Z, a .. z),10个数字(0 .. 9)和_(下划线)组成。不要使用国际字符,因为它们可能不易读或者不能在
任何地方都能容易理解。不要在名字里使用$(美元符号)或\(反斜线符号)。

不要使用_(下划线)作为名字的首字母。它有时被用来表示私有,但是它实际上不提供私有性。
如果私有性很重要,使用提供私有性的private members
Avoid conventions that demonstrate a lack of competence.

大多数变量和方法名应该以小写字母开始。

必须使用new前缀的构造函数应该以大写字母开始。JavaScript不会在省略new时报编译期警告或运行时警告。
不使用new时会发生坏事情,所以大写首字母规范是我们拥有的唯一的防御。

全局变量应该全部使用大写字母。(JavaScript没有宏或常量,所以没有多少要求使用大写字母来表示JavaScript的特性的场景)

语句

简单语句
每行应该包含至少一个语句。在每个简单语句末尾添加一个“;”(分号)。注意一个给方法字面量或对象字面量赋值的赋值语句仍然是
一个赋值语句,所以也必须以分号结尾。

JavaScript允许任何表达式作为语句使用。这可能产生一些错误,特别是在插入分号时。唯一可以当作语句使用的表达式是赋值表达式和
调用表达式。

复合语句
复合语句是包含一个用“{}”(大括号)包围语句列表的的语句。
1,包围的语句应该再缩进4个空格。
2,“{”(左大括号)应该位于开始复合语句的行的末尾。
3,“}”(右大括号)应该新起一行并且和相匹配的“{”所在那行的起始位置对齐
4,当语句是控制结构的一部分时,所有语句都应该用括号包围,即使是单行语句,例如if或for语句。这让添加语句更容易而且不会引起八哥。

标签
语句标签是可选的。只有如下语句需要被标签标识: while,do,for,switch。

return语句
具有值的return语句不应该使用“()”(圆括号)包围值。返回值表达式必须和return关键字在同一行从而避免插入分号。

if语句
if语句应该使用如下格式:
if (condition) {
    statements;
}

if (condition) {
    statements;
} else {
    statements;
}

if (condition) {
    statements;
} else if (condition) {
    statements;
} else {
    statements;
}


for语句
for语句应该使用如下格式:
for (initialization; condition; update) {
    statements;
}

for (variable in object) {
    statements;
}

第一种格式应该和数组使用。

第二种格式应该和对象使用。注意添加到对象的prototype中的成员将被包含在遍历中。通过使用hasOwnProperty方法来区分对象的
成员是明智的:
for (variable in object) {
    if (object.hasOwnProperty()) {
        statements;
    }
}


while语句
while语句应该使用如下格式:
while (condition) {
    statements;
}


do语句
do语句应该使用如下格式:
do {
    statements;
} while (condition);

不像其它复合语句,do语句始终使用“;”(分号)结尾。

switch语句
switch语句应该有如下格式:
switch (expression) {
case expression:
    statements;
default:
    statements;
}

每个case和switch对齐,这避免了缩进过度。

每组语句(除了default)应该以break,return或者throw结束。不要fall through。

try语句
try语句应该使用如下格式:
try {
    statements;
} catch (variable) {
    statements;
}

try {
    statements;
} catch (variable) {
    statements;
} finally {
    statements;
}


continue语句
不要使用continue语句。它会让方法的控制流程模糊。

with语句
不要使用with语句

空格
空行通过将逻辑相关的代码放到一起来增加可读性。

空格应该用于如下情况:
1,关键字后面跟“(”(左圆括号)时应该用一个空格隔开。
while (true) {

2,方法名和方法的“(”(左圆括号)之间不要有空格。这利于区分关键字和方法调用。
3,所有的二元操作符,除了“.”(圆点)、“(”(左圆括号)和“[”(左中括号),都应该使用一个空格来和操作数隔开。
4,一元操作符和操作数之间不应该使用空格隔开,除了操作符是一个单词时,如typeof。
5,for语句控制部分的每个“;”(分号)应该在后面跟一个空格。
6,每个“,”(逗号)后面应该跟一个空格。

额外的建议

{}和[]
使用{}替代new Object()。使用[]替代new Array()。
当成员名字为连续的整数时使用数组。当成员名字为任意的字符串或名字时使用对象。

逗号操作符
不要使用逗号操作符,除了for语句的控制部分的严格使用。(这不适合逗号操作符,它应该用于对象字面量,数组字面量,var语句和参数
列表。)

块作用域
在JavaScript里块没有作用域,只有方法有作用域。不要使用块,除了复合语句一定需要用到外。

赋值表达式
不要在if和while语句的条件部分做赋值。不要写不易懂的代码。

===和!==操作符
始终使用===和!==操作符会更好。==和!=操作符会做类型强制转换。特别是,不要使用==来和“假”值做比较。

令人混淆的加和减
注意不要在“+”后面跟“+”或“++”。这种模式令人混淆。在它们之间插入圆括号来让你的意图更清晰。
total = subtotal + +myInput.value;

// is better written as

total = subtotal + (+myInput.value);

这样“+ +”就不会被读错成“++”。

邪恶的eval
eval方法是JavaScript里最滥用的特性。不要使用它。
eval有别名。不要使用Function构造函数。不要传递字符串给setTimeout或者setInterval。
分享到:
评论
3 楼 i_love_sc 2007-07-19  
引用
缩进
缩进的最小单位是4个空格。不要使用tab键,because (as of this writing in the 21st Century) there still is not a standard
for the placement of tabstops. 使用空格会引起文件变大,但是这点大小对局域网无关紧要,而且差别被minification消除了。


这条受不了啊。
2 楼 julyboxer 2007-07-19  
太好了..正好学习下..以养成习惯
1 楼 dlee 2007-07-19  
辛苦了。

Dojo也有一个自己的编程规范:http://manual.dojotoolkit.org/Book111
以前也曾经想过翻译过来,不过一直没有时间。可以放在一起讨论一下。

相关推荐

    James Gosling,Bill Joy,Guy Steele 等 著;陈昊鹏 译 Java语言规范 (基于 Java SE 8).pdf

    9. ** Nashorn JavaScript引擎**:Java 8集成了Nashorn JavaScript引擎,允许Java代码直接执行JavaScript,促进了Java与JavaScript的互操作性。 10. **改进的枚举和注解**:Java 8对枚举和注解进行了增强,比如可以...

    Eloquent-Javascript

    最后,现代JavaScript开发离不开工具链,如Babel用于将新特性转换为向后兼容的代码,Webpack或Rollup进行模块打包,以及 ESLint进行代码风格检查和规范。 《Eloquent JavaScript》不仅涵盖了这些基础知识,还深入...

    js-deep:js深入学习

    前端进阶JavaScript基础:JavaScript数据类型JavaScript代码运行机制作用域和作用域链let/const/var的区别JavaScript高阶编程技巧原型和原型链的底层运行机制this指向数据类型检测JavaScript类的继承方案JavaScript...

    PHP实例开发源码—PHP有道在线英译汉源码.zip

    良好的编程实践中,代码应遵循一定的命名规范,注释清晰,结构清晰,易于维护。此外,代码的可扩展性和可重用性也是衡量其质量的重要因素。 综上所述,这个PHP有道在线英译汉源码实例涵盖了PHP基础、HTTP请求、API...

    毕设任务书(Web前端开发技术研究).docx

    2. 提交材料要求:包括服饰产品展示交互网页系统代码一套、提交符合规范的毕业设计论文一篇、外文文献翻译等。 五、主要参考文献: 1. [美]Tom Negrino Dori Smith 著.JAVAJavaScript 基础教程(第 8 版)(经典 ...

    ajax技术演示文稿

    Ajax,全称为"Asynchronous JavaScript And XML",中文译为“异步的JavaScript和XML技术”,它是一种让Web应用程序实现更快、更友好的用户界面的技术。通过Ajax,浏览器无需重新加载整个页面,就能与Web服务器进行...

    prueba:没有哈加索我们!

    9. 测试框架:如Jest、Mocha和Chai,用于编写和执行JavaScript代码的测试。 10. 模块化:CommonJS、AMD(RequireJS)和ES6模块系统,用于组织和共享代码。 11. 性能优化:包括事件委托、避免阻塞主线程、使用...

    frontend-project-lvl2

    项目可能遵循一定的文件结构规范,例如将JavaScript代码放在指定的js或src目录下,HTML和CSS分别放在对应的目录中,同时,可能存在构建脚本(如webpack配置)来管理和打包这些文件。 总的来说,"frontend-project-...

    Array.prototype.concat不是通用方法反驳[译]

    ECMAScript 5.1规范§15.4.4.4 中说到: 代码如下: concat函数是有意设计成通用的;它并不要求它的this值必须得是个Array对象.因此,它可以被转移到其它类型的对象上作为方法来调用. 本文中的代码都使用了[]来作为Array...

    MaterialDesign中文协同翻译

    Material Design,中文译为“材料设计”,是由Google在2014年的I/O大会上推出的全新设计语言,旨在为Android、Chrome以及其他多平台提供一个统一且直观的视觉与交互体验。这个设计规范不仅影响了UI(用户界面)设计...

    AST整理 (1).rar_ast

    - **代码生成**:从AST生成其他语言的代码,实现跨语言互操作,如将Python代码转换为JavaScript。 - **性能优化**:编译器和JIT(Just-In-Time)编译器通过分析AST进行优化,如消除冗余计算、内联函数等。 **5. AST...

    myclox:用C语言编写的Lox解释器,跟随手译人员

    5. **语义分析**:检查代码的逻辑意义,确保符合语言规范。 6. **代码生成**:解释器会根据解析结果执行代码,无需生成中间文件。 7. **内存管理**:在C语言中,手动管理内存,理解何时分配和释放内存是必要的。 8. ...

    angular-health-app

    这个项目还利用了Babel,一个转换JavaScript代码的工具,将ES6+的新特性转换为浏览器兼容的JavaScript版本,确保在旧浏览器中也能正常运行。Babel通常与Webpack结合使用,通过配置Webpack的loader来实现代码转换。 ...

    De facto standard 世界上不可思议的事实标准

    "De facto standard",中文译为“事实标准”,是指在某个领域或行业中,尽管没有官方正式的标准,但因为被广泛接受和使用,实际上已经成为大家默认遵循的行为规范。这些标准通常是由于历史原因、市场占有率或是技术...

    计算机基础 CSS样式表概述PPT学习教案.pptx

    遵循良好的CSS编码规范能提高代码可读性和可维护性。这包括合理命名、注释、避免冗余代码以及使用预处理器(如Sass或Less)来提高效率。 总结来说,CSS是Web开发中的核心组成部分,理解和熟练掌握CSS能够帮助创建...

    artem-chess:用StackBlitz创建:high_voltage:

    3. `index.html` - 项目的主入口点,连接到应用程序的JavaScript代码。 4. `package.json` - 定义项目依赖和其他元数据的文件,包括TypeScript编译器和其他必要的npm包。 5. `.gitignore` - 指定哪些文件和目录不应...

    HTML初识基础认知 + HTML标签

    Web标准中分成三个构成:结构(HTML)、表现(CSS)、行为(JavaScript)。 二、HTML基础认知 HTML(Hyper Text Markup Language)中文译为:超文本标记语言。专门用于网页开发的语言,主要通过HTML标签对网页中的...

    test-handlebars:Teste deintegraçãoexpress com车把

    此外,使用ESLint和Prettier等工具进行代码规范检查和格式化也是常见的做法。 综上所述,这个项目是一个用TypeScript编写的Express应用,其中整合了Handlebars模板引擎,用于生成动态Web内容。测试是验证整个系统...

    angular-larenga:创建于StackBlitz:high_voltage:

    【文件名称解析】:“angular-larenga-master”很可能是指一个Angular项目的主分支,遵循Git版本控制的命名规范,其中“master”是默认分支,通常包含最新的稳定代码。 **详细知识点** 1. **Angular框架**:...

    任务书_基于SSH的校园二手书交易系统word文档良心出品.docx

    通过该平台,用户可以方便快捷地进行二手书的买卖交易,同时系统也需要具备一定的管理功能来保障交易的安全性和规范性。 ##### 功能需求 - **用户端功能** - 用户注册与登录:支持用户通过手机号或邮箱进行注册,...

Global site tag (gtag.js) - Google Analytics