现代 JavaScript 开发编程风格Idiomatic.js指南中文版

你为项目所择风格都应为最高准则。作为一个描述放置于你的项目中,并链接到这个文档作为代码风格一致性、可读性和可维护性的保证。

一、空白

1.永远都不要混用空格和Tab。
2.开始一个项目,在写代码之前,选择软缩进(空格)或者 Tab(作为缩进方式),并将其作为最高准则。
a).为了可读, 我总是推荐在你的编辑中设计2个字母宽度的缩进 — 这等同于两个空格或者两个空格替代一个 Tab。
3.如果你的编辑器支持,请总是打开 “显示不可见字符” 这个设置。好处是:
a).保证一致性
b).去掉行末的空格
c).去掉空行的空格
d).提交和对比更具可读性

二、美化语法

A. 小括号, 花括号, 换行

复制代码 代码如下:


// if/else/for/while/try 通常都有小括号、花括号和多行
// 这有助于可读

// 2.A.1.1
// 难辨语法(cramped syntax)的例子

if(condition) doSomething();

while(condition) iterating++;

for(var i=0;i<100;i++) someIterativeFn();

// 2.A.1.1
// 使用空格来提升可读性

if ( condition ) {
  // 语句
}

while ( condition ) {
  // 语句
}

for ( var i = 0; i < 100; i++ ) {
  // 语句
}

// 更好的做法:

var i,
  length = 100;

for ( i = 0; i < length; i++ ) {
  // 语句
}

// 或者...

var i = 0,
  length = 100;

for ( ; i < length; i++ ) {
  // 语句
}

var prop;

for ( prop in object ) {
  // 语句
}

if ( true ) {
  // 语句
} else {
  // 语句
}


B. 赋值, 声明, 函数 ( 命名函数, 函数表达式, 构建函数 )

复制代码 代码如下:


// 2.B.1.1
// 变量
var foo = "bar",
  num = 1,
  undef;

// 字面量标识:
var array = [],
  object = {};

// 2.B.1.2
// 在一个作用域(函数)内只使用一个 `var` 有助于提升可读性
// 并且让你的声明列表变得有条不紊 (还帮你省了几次键盘敲击)

// 不好
var foo = "";
var bar = "";
var qux;

// 好
var foo = "",
  bar = "",
  quux;

// 或者..
var // 对这些变量的注释
foo = "",
bar = "",
quux;

// 2.B.1.3
// `var` 语句必须总是在各自作用域(函数)顶部
// 同样适应于来自 ECMAScript 6 的常量

// 不好
function foo() {

// 在变量前有语句

var bar = "",
    qux;
}

// 好
function foo() {
  var bar = "",
    qux;

// 所有语句都在变量之后
}
// 2.B.2.1
// 命名函数声明
function foo( arg1, argN ) {

}

// 使用方法
foo( arg1, argN );

// 2.B.2.2
// 命名函数声明
function square( number ) {
  return number * number;
}

// 使用方法
square( 10 );

// 非常不自然的连带传参(continuation passing)风格
function square( number, callback ) {
  callback( number * number );
}

square( 10, function( square ) {
  // 回调内容
});

// 2.B.2.3
// 函数表达式
var square = function( number ) {
  // 返回有价值的、相关的内容
  return number * number;
};

// 带标识符的函数表达式
// 这种首选形式有附加的功能让其可以调用自身
// 并且在堆栈中有标识符
var factorial = function factorial( number ) {
  if ( number < 2 ) {
    return 1;
  }

return number * factorial( number-1 );
};

// 2.B.2.4
// 构造函数声明
function FooBar( options ) {

this.options = options;
}

// 使用方法
var fooBar = new FooBar({ a: "alpha" });

fooBar.options;
// { a: "alpha" }

C. 异常, 细节

复制代码 代码如下:


// 2.C.1.1
// 带回调的函数
foo(function() {
  // 注意:在第一函数调用的小括号和 `function` 处并没有空格
});

// 函数接受 `array` 作为参数,没有空格
foo([ "alpha", "beta" ]);

// 2.C.1.2
// 函数接受 `object` 作为参数,没有空格
foo({
  a: "alpha",
  b: "beta"
});

// 函数接受 `string` 字面量作为参数,没有空格
foo("bar");

// 分组用的小括号内部,没有空格
if ( !("foo" in obj) ) {

}


D. 一致性(统一)总是笑到最后的(Consistency Always Wins)

在 2.A-2.C 节,留白作为一个推荐方式被提出,基于单纯的、更高的目的:统一。值得注意的是格式化偏好,像“内部留白”必须是可选的,但在整个项目的源码中必须只存在着一种。

复制代码 代码如下:


// 2.D.1.1

if (condition) {
  // 语句
}

while (condition) {
  // 语句
}

for (var i = 0; i < 100; i++) {
  // 语句
}

if (true) {
  // 语句
} else {
  // 语句
}


E. 引号

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgpfwy.html