读《编写可维护的JavaScript》的收获

第一部分 编程风格

第一章 基本的格式化

1.使用tab/4个空格作为一个缩进层级

2.不要省略分号

3.单行长度不超过80个字符

若单行长度超出，则手动拆成两行，通常在运算符后换行，下一行增加两个层级的缩进

在给变量赋值的时候若超出，拆分之后第二行的位置应该跟赋值运算符对齐，例如：

var a = heheda + memeda +
lalada + heiheida;

4.变量名应该使用小驼峰法进行命名，且应该是名词。以区别变量和函数。

5.函数名实用小驼峰法进行命名，且第一个词应该是动词，以表明他是函数。

6.使用大写字母和下划线来命名常量，其实JavaScript中没有严格的常量，我们用命名来表明该量是常量：

var MAX_COUNT = 10;

7.构造函数（用于创建对象的new后边的）用大驼峰法命名。

8.使用双引号来包裹字符串，如果字符串中需要用到双引号，要进行转义：

var name = " ta shuo, \"hehe\"";
var name = 'ta shuo, "hehe"';  //这样也可以，但是推荐双引号
//多行字符串像下边这样写
var longstring = "Here's the story,of a man" +
"named Creabine.";

9.null作为对象的占位符。初始化一个可能被赋值为对象的变量的时候，可以使用null

10.避免使用undefined

11.定义对象时不要使用先显式创建对象实例然后添加属性的做法，而是推荐直接写出：

var book = {
title:"hehe",
author:"creabine"
}

12.创建数组的时候，同样不要使用显式Array，而是直接：

var colors = ["red","yellow","blue","green"];

第二章 注释

单行注释

1.单独成行的注释前边加一行空行，并且注意缩进。

2.跟在语句后边的注释，跟语句之间加空格。

多行注释

3.多行注释前也应该插入一个空行。

4.推荐的写法：注释上边加一行空行，多行注释的开头结尾独立成行：

if(a == 1){

/*
allowed();
*/
}

5.显而易见的代码不要加注释，难以理解的才需要加。不要滥用

6.可能被认为是错误的代码，要加上注释，以防止其他人看到误解并顺手“改正”

第三章 语句和表达式

1.所有的块状语句都应该使用花括号，包括：if for while do…while try…catch…finally

2.花括号的对齐方式：

if(a==1){
dosomething();
}

3.使用switch语句的时候，如果是有意为之并且加了注释，就可以使用case语句连续执行，否则不建议。在没有默认行为且写了注释的情况下，可以省略default。

4.避免使用with语句

5.for循环中可以使用continue来终止单次循环，进入下一次循环；还可以使用break来一次性跳出整个循环。这里建议少使用continue，而采用if条件判断来代替它，以提高可读性。但也不完全禁止。

6.for-in循环用来遍历对象的属性。但是它不仅遍历对象的实例属性，海惠便利从原型继承来的属性，这样有可能因为意外的结果而终止遍历。所以推荐使用hasOwnProperty()方法来为for-in属性过滤出实例属性：

var prop;
for(prop in object){
if(object.hasOwnProperty(prop)){
console.log("Property name is " + prop);
console.log("Property value is " + object[prop]);
}
}

注意：for-in循环使用来遍历对象的，不要用它去遍历数组。

第四章 变量、函数和运算符

1.JavaScript引擎会把变量声明提前，写在后边也可以。但是建议总是将局部变量的定义作为函数内第一条语句。

2.将很熟内所有的var合并为一个语句，每个变量初始化独占一行，赋值运算符对齐，没初值的变量放在最后写：

function todosomething(items){
var value = 10,
result = value + 10,
i,
len;
}

这样可以保持成本最低，让代码更短下载更快。但是不习惯的时候注意别写错了。

3.跟变量一样，JavaScript引擎会把函数声明也提前，但是依然要先声明再调用。

4.因为JavaScript的强制类型转换机制，使得比较的时候不用类型的值会先转换类型再进行比较。这里推荐不要使用 == 和 != ；而是使用 === 和 !== 来进行比较。后者不会强制类型转换，这样可以让你的比较语句执行时行为一致。

//数字5和字符串5
console.log(5 == "5"); //true
console.log(5 === "5"); //false

5.尽量避免使用eval（）

6.禁止使用原始包装类型

第二部分 编程实践

第五章 UI层的松耦合

1.让不用的组件之间不需要相互依赖，修改其中一个组件的时候，不需要更改其他组件，就做到了松耦合。如果一个web UI是松耦合的，就很容易调试，文本结构的问题去找html，样式去找css，行为去找JavaScript，这是web界面的可维护性的核心部分。

2.将css从JavaScript中抽离：

经常需要通过JavaScript改变css的属性，这里的抽离，建议将所有的样式信息都保存在css中，当需要通过JavaScript来修改元素样式的时候，最好的方法是操作css的classname，通过给html标签动态增删classname来达到改变样式的效果。这样JavaScript不直接操作样式，保持了和css的松耦合

这里注意，当需要通过JavaScript给元素重新定位的时候，是无法通过改变classname来完成的。这种情况下允许在css中定义这个元素的默认属性，再用JavaScript来改变默认的值。

3.将JavaScript从HTML中抽离：不要在html标签中使用onclick=”todosomething()” 这种，而是在外部绑定事件函数。

//未抽离
<div id="div1" onclick="todosomething" ></div>
//抽离
$("#div1").on("click",todosomething);

4.将HTML从JavaScript中抽离：使用JavaScript改变html结构也要尽量避免，但是实际项目中很可能会经常用到。此时有很多方法可以低耦合的完成这项工作。

当需要注入大段HTML标签到页面中的时候，使用远程调用的方式来加载标签，jQuery已经封装的一个load()方法

另外还有客户端模板的方式：这种方式简单来说就是把要用到的html标签部分写出来，再注释掉。JavaScript也可以用过dom取得注释，然后再修改插入，就可以了。

第六章 避免使用全局变量

1.全局变量可能带来的问题：1.随着代码量的增加，可能重名，且不利于维护。2.依赖于全局变量的函数会深度耦合于上下本环境中，若环境改变，函数很可能就会失效。3.依赖全局变量，测试变得困难。

2.如果给未被var声明过的变量赋值，JavaScript就会自动创建一个全局变量，所以一定要记得用var声明变量，以免不小心创造全局变量引起麻烦。

3.当需要创建全局变量的时候，可以选择创建一个唯一的全局对象。在需要的时候，只要把全局变量作为该对象的唯一属性。这样便于管理，可以避免全局污染。

第七章 事件处理-

1.隔离应用逻辑：

应用逻辑是和应用功能相关的逻辑部分，而不是和用户行为相关的。最好把应用逻辑从事件处理程序中抽离出来。例如当需要多个不同的事件触发同一应用逻辑的时候，不抽离的话，就要复制多分应用逻辑，代码冗余。另外，抽离出来也方便测试。

2.应用逻辑尽量不要依赖于event对象。

第八章 避免“空比较”

1.学会使用typeof运算符来检测4中原始类型（字符串，数字，布尔值，undefined）。

基本语法是：typeof variable，它会返回一个表示值的类型的字符串。不推荐带括号，因为他是运算符不是函数。

//检测数据类型的举例
if( typeof name === "string" ){
anotherName = name.substring（3）;
}

2.学会使用instanceof运算符检测引用值，也就是对象。

if( value instanceof Date ){
console.log(value.getFullYear());
}

3.学会使用in来检测对象的属性是否存在：

使用in运算符，只会简单的判断属性是否存在，而不会去读取该属性。

var object = {
count : 0,
related : null
}
//判断是否存在
if( "count" in object ){
//这里的代码会执行
}
if( "hehe" in object ){
//这里的代码不会执行
}

第九章 将配置数据从代码中分离出来

1.配置数据指的是应用中写死的值。例如：URL，需要展现给用户的字符串，重复的值，设置（比如每页的配置项），任何可能发生变更的值。

配置数据是可发生变更的，我们不希望有人突然想改页面中的信息，导致程序去修改JavaScript源码。

2.可以将这些可能改变的配置数据单独抽离出来保存在config当中（目前公司的项目也是这样做的，读到这里才明白为什么这样）。配置数据抽离出来意味着任何人都可以修改它们，而不会导致应用逻辑出错。同样我们可以将整个config对象放到单独的文件中，这样数据修改就可以完全跟代码根离开来。

//将配置数据抽离出来
var config = {
MSG:"Invalid value",
URL:"/errors/incalid/php",
CSS:"selected"
};
function validate(value,element){
if(!valyue){
alert(config.MSG);
location.href = config.URL;
addClass(element,config.CSS)
}
}

3.配置数据最好放在单独的JavaScript文件中，以便清晰地分隔数据和应用逻辑。

4.书中推荐使用java属性文件（java properties file）来存放配置数据。不是很懂。

第十章 抛出自定义错误

1.再觉得可能会发生很麻烦的错误的地方，手动抛出错误提示，会有助于调试。

第十一章 不是你的对象不要动

1.在多人开发的时候，不是你创建和维护的对象（例如jQuery中的对象，JavaScript原生对象，其他人的模块中的对象等等），不要去做任何改动，其他人不知道你的改动的情况下，很可能会导致错误。

2.对于不是你的对象，不覆盖，删除，新增方法。

3.如果需要扩充对象，比较好的实现方法是继承。即根据原对象创建一个新的对象，新对象就有用原对象的所有属性和方法，再为新对象追加需要的属性和方法来使用。这样就不会影响到原对象。

var person = {
name:"Bob",
sayName: function(){
alert(this.name);
}
}
//Object.create（）方法可以指定第二个参数，这个参数是一个对象，该对象中的属性和方法将添加到create出来的对象当中
var myPerson = Object.create(person,{
name:{
value:"Greg"
}
});
person.sayName();  //弹出“Bob”
myPerson.sayName();  //弹出“Greg”

第十二章 浏览器嗅探

见书

第三部分 自动化

第十三章 文件的目录结构

1.构建目录的最佳实践：

一个文件只包含一个对象，或者多个互相关联的对象。

保持第三方代码的独立，单独放在一个目录中。最好的方式是根本不引入，直接从CDN加载它。

确定创建位置，创建后的JavaScript文件应该放在一个完全独立的目录里。

其他见书本。

第十四—二十章讲了Ant和一些自动化的工具，现在有了很多新的而工具，而且各个公司使用的工具也不尽相同，目前我也没有用到，就先不看了。之后要专门了解一下。

书末尾的附录有JavaScript的编码风格指南，作者是4个空格党，不推荐使用Tab…

最后，本书封面是希腊陆龟….