编写可维护的javascript(笔记)

发布于 24 天前  1 次阅读


基本的格式化

缩进层级

使用制表符缩进
使用空格缩进

语句结尾

依赖于分析器的自动分号插入(ASI)机制,javascript代码省略分号是可以正常工作的

是否省略还是看团队规范

行的长度

倾向于将行才控制在80个字符内

换行

在换行时通常在运算符后换行,下一行会增加两个层级的缩进
变量赋值时,第二行的位置应当和赋值运算符的位置保持对齐

空行

不同语义代码之间使用空行隔离
* 在方法之间
* 在方法中的局部变量和第一条语义之间
* 在多行或单行注释之前
* 在方法内的逻辑片段之间插入空行

命名

驼峰式命名(大驼峰,小驼峰)

变量和函数
* 通常命名应该尽量段,并抓住重点,尽量在变量名中体现值的数据类型
* 避免没有意义的命名
* 变量名应当遵循小驼峰命名,并且前缀名词
* 对于函数命名和方法命名来说,第一个单词应该是动词

动词含义
can函数返回一个布尔值
has函数返回一个布尔值
is函数返回一个布尔值
get函数返回一个非布尔值
set函数用来保存一个值
......

常量

使用大写字母和下划线来命名,下划线用以分隔单词

构造函数

构造函数遵循大驼峰命名法

直接量

javascript中包含一些类型的原始值: 字符串,数字,布尔值,null和nudefined。同样也包含对象直接量和数组直接量。这其中,只有布尔值是自解释(self-explanatory)的,其他类型或多或少都需要思考一下它们如何才能更精确的表示出来。

字符串

// 合法的javascript代码
var name = "Nicholas says, \"Hi.\""
// 也是合法的javascript代码
var name = 'Nicholas says, \"Hi.\"'

  • 使用单引号和双引号并无不同
  • 使用双引号括起来的字符串里需要对双引号转义
  • 使用单引号括起来的字符串里不需要对双引号转义

数字

不要忽略小数点之前后之后的数字

null

一下场景中应当使用null
* 用来初始化一个变量,这个变量可以是一个对象
* 用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象
* 当函数的参数期望是对象时,用作参数传入
* 当函数的返回值期望是对象时,用作返回值传出

以下场景不应当使用null
* 不要使用null来检测是否传入来某个值
* 不要使用null来检测一个未初始化的值

理解null是对象的占位符

// 好的用法
var person = null;

// 好的用法
function getPerson() {
    if (condition) {
        return new Person("nicholas");
    } else {
        return null;
    }
}

// 好的用法
var person = getPerson();
if (person !== null) {
    doSomething();
}

// 不好的写法: 用来和初始化的变量比较
var person;
if (person !== null) {
    doSomething();
}

// 不好的写法: 检测是否传入来参数
function doSomething(arg1, arg2, arg3, arg4) {
    if (arg4 != null) {
        doSomethingElse();
    }
}

undefined

变量声明中禁止使用undefined

对象直接量

创建对象推荐使用对象直接量, 更高效

// 好的写法
var book = {
    title: 'maintainable javascript',
    author: 'nicholas c. zakas'
}
// 不好的写法
var book = new Object()
book.title = 'maintainable javascript'
book.author = 'nicholas c. zakas'

数组直接量

不赞成使用new Array, 使用数组直接量[]

注释

单行注释

// 好的写法
if (condition) {

    //如果代码执行到这里,则表明通过了所有安全性检查
    allowed0()
}

// 不好的写法:注释之前没有空行
if (condition) {
    //如果代码执行到这里,则表明通过了所有安全性检查
    allowed()
}

// 不好的写法:错误的缩进
if (condition) {

// 如果代码执行到这里,则表明通过了所有安全性检查
    allowed()
}

// 好的写法
var result = something + somethingE1se // somethingEIse不应当取值为null

// 不好的写法:代码和注释之间没有间隔
var result = something + somethingE1se// somethingEIse不应当取值为null

// 好的写法
// if (condition) {
//  doSomething()
//  thenDoSomethingEIse()
// }

// 不好的写法:这里应当用多行注释
// 接下来的这段代码非常难,那么,让我详细解释一下
// 这段代码的作用是首先判断条件是否为真
// 只有为真时才会执行,这里的条件是通过
// 多个函数计算出来的,在整个会话生命周期内
// 这个值是可以被修改的
if (condition) {
    //如果代码执行到这里,则表明通过了所有安全性检查
    allowed0()
}

多行注释

推荐的注释格式

/**
 * 
 * 一段注释
 * 包含注释的文本
*/

使用注释

  • 当代码不够清晰时添加注释
  • 当代码很明了时不应该添加注释

难以理解的代码
可能被他人认为错误的代码
浏览器hack

文档注释

从技术角度讲,文档注释不是javascript的组成部分,但它们是一种普遍的实践。
强烈推荐使用文档生成工具为javascript生成文档

语句表达式


这个时间很美好,但它也很残酷