javascript的编程风格

John Doe
2019-09-09

javascript的编程风格

“计算机科学只存在两个难题：缓存失效和命名。”——Phil Karlton

一、基本的格式化

PascalCase 和 CamelCase 都表示驼峰命名
二者的区别：
PascalCase以大写字母开始，而CamelCase 以小写字母开始
缩进层级：使用4个空格符作为一个缩进层级
语句结尾：JS语句要以分号结尾
行的长度：推荐将行的长度限制在80个字符
换行
通常会在运算符后换行，下一行会增加两个层级的缩进。

1
2
callFunc(document, window, "some string value", true, 123
        navigator);

当给变量赋值时，第二行的位置应当和赋值运算符的位置保持对齐

1
2
var result = something + anotherThing + somthingElse +
             anotherSomethingElse

空行

在方法之间
在方法中的局部变量（local variable）和第一条语句之间
在多行或单行注释之前
在方法内的逻辑片段之间插入空行，提高可读性

命名

变量和函数
    变量：变量名应当总是遵守驼峰（Camel Case）命名法，并且命名前缀应当是名词
    函数：函数名应当总是遵守驼峰（Camel Case）命名法，并且命名前缀应当是动词
    常量: 使用大写字母和下划线来命名，下划线用以分割单词
    var MAX_COUNT = 10;
    构造函数：构造函数的命名遵照大驼峰命名法（Pascal Case）
直接量
   字符串：单引号和双引号均可，推荐使用双引号。（便于在Java和JavaScript之间切换，Java只允许使用双引号）
多行字符使用字符串连接符（+）将字符串分成多份

数字

不要省略小数点之前或之后的数字
禁止八进制直接量 

1
2
3
4
5
6
7
8
9
10
// 不推荐的写法
var price = .1;
var price = 10.;
var price = 010; // 八进制写法已经被弃用了

// 推荐写法
var price = 10.00;
var price = 10;
var num = 0xA2; // 十六制写法
var num = 1e23; // 科学计数法

null

应当使用null的场景
   始化一个变量，这个变量可能被赋值成一个对象
   一个已经初始化的变量比较，无论这个变量是否为一个对象
   的参数期望是对象时，用作参数传入
   的返回值期望是对象时，用作返回值传出                                                                       
不当使用null的场景
   不要使用null来检测是否传入了某个参数
   不要用null来检测一个未初始化的变量

1
2
3
4
5
6
7
8
9
10
11
// 不要用null来检测一个未初始化的变量
var person;
if (person != null) {
    doSomething();
}
// 不要使用null来检测是否传入了某个参数
function doSomething(arg1,arg2,arg3,arg4) {
    if (arg4 != null ){
        doSomething();
    }
}

undefined

 避免在代码中使用undefined，可以有效的确保只有在一种情况下typeof才会返回"undefined"：当变量未声明时。如何可以，则将其赋值为null。
当变量初始值赋值为null，则表明这个变量最终很可能赋值为对象，typeof null 返回"object"，这样就可以和undefined区分开了

对接直接量
避免使用构造函数创建对象

二、注释

单行注释
    独占一行的注释，用来解释下一行的代码。这行注释之前总是有一个空行，且缩进层级与下一行代码一致。
    在代码行的尾部注释。代码结束到注释之间至少有一个缩进。注释（包括之前的代码部分）不应当超过单行    最大字符数限制，如果超过了，就将这条注释放置于当前代码行的上方。
   被注释掉的大段代码
多行注释
   推荐Java风格的多行注释
使用注释
    难于理解的代码
    可能被误认为错误的代码
    浏览器特性hack
    推荐使用文档生成工具来为你的JavaScript生成文档。JavaScript代码注释必须符合你所用的工具支持的格式，很多文档生成工具都支持JavaDoc风格的文档注释。
文档注释
    需要添加注释的内容
    所有的方法
    应当对方法、期望的参数及可能的返回值添加注释描述
    所有的构造函数
    应当对自定义类型和期望的参数添加注释描述
    所有包含文档化方法的对象
    如果一个对象包含一个或多个附带文档注释的方法，那么对这个对象也应该适当地针对文档生成工具添加文档注释

三、语句和表达式

1.花括号的对齐方式

所有的块语句都应当使用花括号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// java 风格，推荐这种风格
if (condition) {
    doSomething();
} else {
  doSomethingElse();
}

// c#风格、不推荐这种风格，以避免错误的分号自动插入
if (condition)
{
    doSomething();
}
else
{
   doSomethingElse();
}

2.块语句间隔

1
2
3
4
5
6
7
8
9
10
11
12
// 在语句名、圆括号和左花括号之间没有空格
if(condition){
    doSomething();
}
// 在左圆括号和右边圆括号之后各自添加一个空格（推荐）
if (condition) {
    doSomething();
}
// 在左圆括号后和右前各添加一个空格
if ( condition ) {
    doSomething();
}

3.swith 语句

1>.缩进

1
2
3
4
5
6
7
8
9
10
11
// java风格（推荐）
switch (condition) {
    case "first":
         // 代码
         break;
    case "second":
         // 代码
         break;
     default:
         // 代码
}

2>. case语句的‘连续执行’

1
2
3
4
5
6
7
8
9
10
11
// 只要事是有意为之并且添加了注释，就可以使用case语句的连续执行
switch (condition) {
    case "first":
         // 代码
         break;
    case "second":
         // 代码
         break;
     default:
         // default 中没有逻辑
}

3>. default

1
2
3
4
5
6
7
8
9
10
11
// 从语法结构角度考虑，即使default中什么也不做，也不应当省略default
switch (condition) {
    case "first":
         // 代码
         break;
    case "second":
         // 代码
         break;
     default:
         // 代码
}

4.with 语句

避免使用with语句
在严格模式下(‘use strict’)，with语句是被明确禁止的，如果使用则报语法错误

5.for 循环

Dojo编程风格指南明确指出可以使用continue和break
推荐尽可能避免使用continue，但也没有理由完全禁止使用，应该根据代码可读性来决定。

6.for-in 循环

for-in 循环是用来遍历对象属性的，避免用它来遍历数组
所有的for-in 循环必须使用hasOwnProperty()方法过滤触实例属性

1
2
3
4
5
6
for (var prop in object) {
     if (object.hasOwnProperty(prop)) {
          console.log('Property name is' + prop);
          console.log('Property value is' + object[prop]);
     }    
}

三、变量和函数运算符

1.变量声明

注意：变量声明的提升

1
2
3
4
5
6
7
8
9
10
11
12
function doSomethingWithItems(items){
    for (var i = 0, len = items.length; i < len; i++) {
         doSomething(item[i]);
    }
}
// 等价于以下代码
function doSomethingWithItems(items){
    var i, len;
    for (i = 0, len = items.length; i < len; i++) {
         doSomething(item[i]);
    }
}

2.函数声明

注意：函数声明的提升
函数不应该出现在语句块之内
函数声明应该在条件语句的外部使用

1
2
3
4
5
6
7
8
9
10
// 这段代码在不同的浏览器中运行的结果不尽相同
if (condition) {
    function doSomething() {
        alert('hi');
    }
} else {
   function doSomething() {
       alert('Yo');
   }
}

3.函数调用间隔

推荐风格：在函数名和左括号之间没有空格
doSomething(item);

1>. 立即调用函数 将函数用一对圆括号包裹起来

1
2
3
4
5
6
7
// 将函数用一对圆括号包裹起来 
var value = (function (){
    // 函数体
    return {
        message: 'Hi'
    }
})();

2>.严格模式

‘use strict’;
推荐尽量使用严格模式
尽量不要在全局作用域中使用严格模式
如果希望在多个函数中应用严格模式可以使用立即执行函数

1
2
3
4
5
6
7
8
9
(function() {
    'use strict';
    function doSometing() {
        // 代码
    }
    function doSomethingElse() {
        // 代码
    }
})();

3>.相等

==和!=比较会发生强制类型转换
推荐使用===和!==进行比较
尽量避免使用eval()函数
尽量避免使用原始包装类型创建对象

1
2
3
4
5
6
7
8
// 不好的做法（应该尽量避免）
eval("alert('hi')");
var muFunc = new Function('alert('Hi')');
setTimeout( 'document.body.style.background="red"',50);
setInterval('document.title="it is now"' + (new Date()),1000);
var name = new String('Nicholas');
var auther = new Boolean(true);
var count = new Number(10);
 上一页

mysql