编写可维护的JavaScript

基本的格式化

1. 行的长度： 代码但行长度不超过80个字符
2. 换行：超过单行最大字符限制，手动将一行拆成两行，下一行增加两个级别的缩进；
   规则例外： 变量赋值，第二行的位置应当和赋值运算符的位置保持对齐；

var  result = something + anotherthing + yetAnotherThing + someThingElse + 
                    anotherSomethingElse;

直接量

字符串

1. 在使用双引号括起来的字符串 内部需要对双引号进行转义
2. 代码应该保持一种风格
3. 多行字符串分成多份

//good
var longString = "here is the story of a man" +
                          "named Brady"

null

1. 不要使用null来检测是否传入了某个参数
2. 不要用null来检测一个未初始化的变量

数组直接量

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

对象直接量

var book = {
       title: "my book",
       author: "rachel"
};

代码注释

1. 单行注释
   1.1 注释之前有一行空行
   1.2 缩进与下一行代码保持一致
   1.3 单行注释不应该以多行注释的形式存在
2. 多行注释

/*
*多行注释前面加 * 加空行
*这段注释包含两行文本
*/

变量 函数 运算符

强制类型转换

var object = {
  toString : function() {
    return "ox19"
}
}
console.log(object == 25)  //true

编程规范

禁止使用eval() Function setTimeout() setInterval()
禁止使用原始包装类型

编程实践

用户界面？

html 定义页面数据和语义
css 添加样式 创建视觉特征
JavaScript 添加行为 交互性

1. 松耦合

1.1 将JavaScript 从css 中抽离

原因： 高频率重复计算css表达式，严重影响性能
错误不易查找

1.2 将css从JavaScript中抽离

使用class将样式添加到元素，不要逐个style操作

1.3 将JavaScript从html中抽离

<!--不好的写法-->
<button onclick="doSomething()">Click Me</button>

<!---解决方法-->
function doSomething() {
     //code write here
}
var btn = document.getElementById("action-btn");
btn.addEventListener("click", doSomething , false);

当函数需要修改，只需要修改一个文件；
点击发生需要增加额外操作，也只需要修改一个文件

将所有JavaScript代码都放入外置文件，确保不会有内联的js代码，方便紧急调试
如果html中包含JavaScript代码，会阻断工作流，必须先确定javascript代码是在html中还是在文件中，之后才能开始调试

1.4 将html从JavaScript中抽离

原因：

当调试一个文本结构问题时，我们更希望从html中开始调试

解决方法：

将模板放置于远程服务器，使用xmlhttp

不是你的对象不要动

继承方式

基于对象的继承

var person = {
    name: "Nickolas",
    sayName: function () {
        alert(this.name);
    }
};
var myPerson =Object.create(person);
myPerson.sayName();  //alert Nickolas

基于类型的继承

通过构造函数实现

function MyError(msg) {
   this.msg = msg;
}
MyError.prototype = new Error();

门面模式

此处没懂

阻止修改

书中有个地方写错了

//锁定对象
var person = {
    name: 'Nicholas'
}
Object.preventExtensions(person);
console.log(Object.isExtensible(person));
person.age = 18 ;
//正常模式下会悄悄的失败 strict模式下报错

浏览器嗅探

对于IE8和之前的版本执行特殊操作而不要试图检测IE9和更高版本

if(isInternetExplorer8OrEarlier) {
//处理IE 8 以及更早版本
}
else  {
//处理其他浏览器
}

正确的特性检测方法

不要通过UserAgent 进行进行特性检测，对特定功能进行检测
这样做的好处是： 当IE5 Netscape 6发布并支持 getElementById()的时候，代码无需改动

1. 探测标准的方法
2. 探测不同浏览器的特定方法
3. 当被探测方法不存在时提供合乎逻辑的备用方法