JavaScript编码风格

最近在看前端大牛Nicbolas C.Zakas的《编写可维护的JavaScript代码》一书。觉得里面的很多知识点都写的很好,所以,就写篇博文,总结一下吧!编码规范对于程序设计来说是很重要的,因为如果编码风格不一致的话,代码看上去就会很乱,是很难维护的。当然,不同的开发团队有着不同的编码规范,比较著名的有,Google编码规范,jQuery编码规范,dojo编码规范以及Yahoo!编码规范,等等。

第一,Indentation Levels缩进。目前比较流行的是2空格缩进和4空格缩进,比如谷歌的是2空格的,但是jQuery和Yahoo!是4空格的。而Nicbola建议使用4个空格的tab键缩进,他的理由是:

1.大多数编辑器默认是4个空格的

2.此外,两个空格缩进不够明显;

不管采用哪种方法哪种缩进方法,团队开发一定要采用相同的缩进,切忌同一个项目里面,有些采用两空格缩进,有些采用4空格缩进。

第二,line length and line breaking(行的长度和换行),不少开发者喜欢把一行代码写的很长很长,要拖动水平滚动条才可以看全一行的代码,事实上,这是不好的做法,在很多的编码规范里面,都对行长度做了限制的。一般的,一行代码的长度不要超过80个字符。当字母超过限制的长度时,(一般为80个字母),一定要换行。换行需要缩进,而且还是二级缩进(所谓二级缩进就是缩进再缩进,也即按下两个tab键)。比如下面的代码:

// 推荐写法,在运算符结尾处断行(逗号也是运算符),而且缩进也正确,用了二级缩进
callAFunction(document, element, window, "some string value", true, 123,
        navigator);

// 不推荐写法,因为只用了一级缩进
callAFunction(document, element, window, "some string value", true, 123,
    navigator);

// Bad: 不推荐写法,不是以运算符结尾处断行
callAFunction(document, element, window, "some string value", true, 123
        , navigator);

断行需要注意的是,为了避免JavaScript引擎自动在末尾添加分号导致出错,往往都是在运算符结尾处断行的;在这种断行规则在块级语句里同样适用的,如下是if语句的断行:

if (isLeapYear && isFebruary && day == 29 && itsYourBirthday &&
        noPlans) {
    waitAnotherFourYears();
}

不过有一个例外,就是为变量赋值的时候,第二行的起始位置要跟第一行的等号的右部的首个字符对齐,这样说有点儿拗口,直接来个例子说明吧,如下所示:

var result = something + anotherThing + yetAnotherThing + somethingElse +
             anotherSomethingElse;

我们为变量result赋值,第二行的anotherSomethingElse与第一行的等号右边的第一个字符(即something的第一个字符s)对齐的;

第三.naming(命名规则)

一般的,建议使用小写的字母开头的驼峰命名规则,如下

var schoolName;

变量的命名最好是以名词开头,如下:

var schoolName;

 

函数命名最好以动词开头,常用的有can, has, is, get, set,如下:

function getSchoolName() {

}

变量类型最好可以猜出变量的类型,比如:count, length, size等可以知道是Number类型的,而schoolName, title, color, type等都是字符String类型的,此外,循环的趟数常用i, j, k等;

但是有一类函数建议使用大写字母开头的,那就是construtor(构造函数)。构造函数是用来创建对象的,通常采用pascal的命名规则,即首字母大写的驼峰命名,以便跟普通函数可以区分开,如下:

// 推荐写法
function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    alert(this.name);
};
var me = new Person("Nicholas");

 

第四,String(字符串)

javascript的字符串既可以使用单引号包起来,也可以使用双引号。如下面都是允许的:

var name = "Nicholas says, \"Hi.\"";
var name = ‘Nicholas says, "Hi"‘;  

但是为了统一,不要有时使用双引号,有时使用单引号。如下面代码就不好的了:

var p1, p2;
p1 = "Tom";
p2 = "Jane"

关于字符串的使用还有一个问题,尽量不要使用multiline strings(多行字符串),而是应该把他们拆成多个字符串,然后是用“+”进行拼接,如下:

//不推荐写法
var longString = "Here‘s the story, of a man named Brady.";

//推荐写法
var longString = "Here‘s the story, of a man " +
                 "named Brady.";

作者建议使用双引号,因为,其他很多语言都是用双引号的。比如你既写JavaScript代码,又写Java言代码,如果你一直都用双引号的话,那就不用老是去想“我现在是在写JavaScript还是Java呢”!

第五,statement(块级语句)

块级语句主要包括下面这些:    • if     • for    • while    • do...while    • try...catch...finally等等,很多时候,当块级语句只有一条语句时,很多人都喜欢省略花括号,如下:

if (condition)
doSomething();

现在这个代码是没问题的,如果一段时间之后,我们想要为这个块级语句扩展代码,比如,在if里面添加多一个语句,如下:

if (condition)
doSomething();
doSomethingElse();

这时候,doSomethingElse();无论如何都是会执行的,因为他不是在if里面的,但这不是我们想要的。所以,为了避免扩展时出现类似的问题,应该养成无论何时都要添加花括号,哪怕只有一条语句,上面的例子推荐写法,应该如下:

if (condition) {
    doSomething();
}

此外,对于块级元素的左花括号(“{”)的位置一般建议写在块级语句开始行的后面,Google JavaScript Style Guides,以及jQuery都是推荐这种写法的,如下:

if (condition) {
    doSomething();
} else {
    doSomethingElse();
}

而不要写在另起一行的开头,如下:

if (condition)
{
    doSomething();
}
else
{
    doSomethingElse();
}

还有就是,左花括号前面要添加一个空格,如下所示

if (condition) {
    doSomething();
}

第六,函数调用时,函数名和左括号之间不要有空格

// 推荐写法
doSomething(item);
// 不推荐写法,这看起来像块级语句了
doSomething (item);

第七,等式( equality)

一般的,在比较两个不同类型的数值是否相等时,建议使用“===”和“!==”,而不要使用“==”和"!="。因为,如果比较两个不同类型的数值时,"=="和"!="会发生强制类型转换的,所以这样的比较结果有时候是不太准确的。比如,数字跟字符串的比较,会自动把字符串转换成数字的:

// The number 5 and string 5
console.log(5 == "5"); // true
// The number 25 and hexadecimal string 25
console.log(25 == "0x19"); // true

 

时间: 2024-10-12 13:13:17

JavaScript编码风格的相关文章

JavaScript 编码风格指南

A.1  缩进 // 4个空格的层级缩进 if (true) { doSomething(); } A.2  行的长度 // 每行限于80个字符,超出则在运算符后换行,缩进2个层级(8个空格) doSomething(argument1, argument2, argument3, argument4, argument5); A.3  原始值 // 字符串使用双引号及长字符串的链接 var name = "Nicholas", longStr = "this is a lo

JavaScript编码风格指南(中文版)

前言:程序语言的编码风格对于一个长期维护的软件非常重要,特别是在团队协作中.如果一个团队使用统一规范的编码分风格,可以提高团队的协作水平和工作效率.编程风格指南的核心是基本的格式化规则,这些规则决定了如何编写高水准的代码.本指南来自于<编写可维护的JavaScript>这本书,基于"Java语言编码规范"和Crockford的JavaScript编程规范,还有Nicbolas的一些个人经验和喜好.写作本文旨在加深自己印象,也为了更多人的了解到JS编码风格,提高自己的编码质量

【荐】JavaScript编码风格

作者:阮一峰 Douglas Crockford是 JavaScript 权威,Json 格式就是他的发明. 去年 11 月他有一个演讲(Youtube),谈到了好的 JavaScript 编程风格是什么. 我非常推荐这个演讲,它不仅有助于学习 JavaScript,而且能让你心情舒畅,因为 Crockford 讲得很幽默,时不时让听众会心一笑. 下面,我根据这个演讲和 Crockford 编写的代码规范,总结一下"JavaScript 编程风格". 所谓"编程风格"

《编写可维护的 Javascript》读书笔记(附录 A 部分):Javascript 编码风格指南(1)原始值

记录一下比较有用的编码规范(该指南是基于 Java 语言编码规范和 Javascript 编程规范,同时结合作者 Nicholos Zakas 的个人经验和喜好). 一些关于格式(包括缩进.行的长度.运算符间距.括号间距.对象直接量.注释.单行注释.多行注释等类似的规范)的规范这里不做记录. A.3 原始值 // 好的写法 var name = "Nicholos"; // 不好的写法:单引号 var name = 'Nicholos'; // 不好的写法:字符串结束之前换行 var

Airbnb JavaScript 编码风格指南(2018年最新版)

原网址 :  https://segmentfault.com/a/1190000013040555 类型 基本类型:直接存取 string number boolean null undefined symbol const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 symbol 类型不能完全polyfilled,所以请谨慎使用 复杂类型: 通过引用的方式存取 object array function

JavaScript 编码风格

缩进每一行的层级由4个空格组成 行的长度每行长度不超过80字符.如果一行超过80字符,在一个运算符(逗号,加号)后换行,下一行增加2个缩进 原始值避免使用特殊值undefined,判断一个变量是否定义用typeof操作符 注释a) 独占一行的注释,用来解释下一行代码:b) 在代码行尾部的注释,用来解释它之前的代码:c) 多行,用来注释掉一个代码 /* * 如果 * 那么 */ 严格模式严格模式应当在函数内部使用,千万不要在全局使用 // 好的写法 function doSomething() {

web项目开发 之 前端规范 --- JavaScript编码规范

JavaScript编码规范 此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 场景:web前端开发中 一些Javascript的注意事项 和 规格建议: [参考百度资料 和个人一些总结] 1 前言 JavaScript 在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使 JavaScript 代码风格保持一致,容易被理解和被维护. 虽然本文档是针对 Java

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&

学习一份百度的JavaScript编码规范

JavaScript编码规范 1 前言 2 代码风格 2.1 文件 2.2 结构 2.2.1 缩进 2.2.2 空格 2.2.3 换行 2.2.4 语句 2.3 命名 2.4 注释 2.4.1 单行注释 2.4.2 多行注释 2.4.3 文档化注释 2.4.4 类型定义 2.4.5 文件注释 2.4.6 命名空间注释 2.4.7 类注释 2.4.8 函数/方法注释 2.4.9 事件注释 2.4.10 常量注释 2.4.11 复杂类型注释 2.4.12 AMD 模块注释 2.4.13 细节注释 3