《编写可维护的JavaScript》读书笔记

第一章  基本格式化

　　程序是写给人看的，只是偶尔让机器执行一下而以 ----Donald Knuth

 

一、代码缩进格式

　　以四个字符为缩进代码

 

二、语句结尾写“ ; ”号

 

三、行的长度：一行最好不要超过80个字符。

 

四、换行：

　　当一行的长度达到了单行最大字符，需要手动将拆成两行，通常在拆行后增加两个缩进

　　if语句拆成最后要是一个运算符，如果是变量相加，拆行要与开头

if(a != undefined || b != undefined || c != undefined || d != undefined ||
        e != undefined || f != undefined || g != undefined || f != undefined)

var sHTMl = "name" + "name" + "name" + "name" + "name" + "name" + "name" + 
            "name" + "name";

 

五、空行： 

// 1、语句之间使用空行
for(var i= 0, len=oArr.length; i<len; i++){

    if(oArr[i] == "10"){
        console.log("ok");
    }

}

// 2、两个方法之间使用空行
var obj = {
    fn1: function(){

    },

    fn2: function(){

    }
}

// 3、方法中的局部变量第一条语句使用空行
function fn3(){
    var sN = 2;

    if(sN == 2){
        return true;
    }
}

// 4、多行和单行注释之前使用空行
var aa = "name is who";

/* 这里是单行注释 */

// 5、方法内的逻辑片段之间插入空行

 

六、命名：

　　1、驼峰式命名：getName

　　2、匈牙利命名法：sName，s表示字符串，n表示整数，o表示对象，b表示布尔值，

 

七、变量和函数命名：

　　1、变量好的写法：var nCount = 10; var sName = "siguang";　　  不好的写法：var getCount = 10; var isFound = true;  看起来象方法，前缀名要用名词

　　　　　　　　　例：name、count、length、size，title、message、

　　2、函数好的定法：function getName() {  return sName; }　　　　前缀使用动词，如get、set、is、has、can

　　3、单个字符命名通常用在循环中使用，如i，j，k

 

八、常量：

　　JS中没有真正的常量，不被改变的

　　常量使用大写字母和下划线来命名： MAX_COUNT

 

九、构造函数：

　　函数名以大写字母为开头： function Person(name) { this.name = name; }

 

十、null和undefined

　　console.log(null == undefined);　　// true;

　　console.log(null === undefined);　// false

　　它当作对象的点位符：var oFun = null; 　　oFun = function(){ return sName; }

　　变量的如果不定义值 var oFun;　　console.log(oFun);　　// 会返回报错undefined

var person;
console.log(person == undefined);           // 不好的写法
console.log(typeof person == "undefined");    // 好的写法，注意typeof 返回的是字符串

 

十一、对象直接量

　　不推荐的写法：

　　　　var book = new Object();

　　　　book.title = "javasript";

　　　　book.autor = "Nick";

　　推荐的写法：

　　　　book = { title: "javascript", autor:"Nick" };

 

十二、数组直接量

　　不推荐的写法：

　　　　var oArr =  new Array(1, 2, 4, 6);

　　推荐写法：

　　　　var oArr = [1, 2, 4, 6];

 

第二章  注释

一、单行、多行注释

　　单行：

　　1、独占一行注释，用来解释下一行代码注释之前总是有一行空格

　　2、代码行尾部，代码结束到注释至少有一个缩进

　　3、被注释掉的多行

<script>
    if(condtion){

        // 解释下一行语句注释
        allowed();
    }

    if(condtion){
        var result = something;     // 这里放注释
    }
</script>

　　

　　2、多行注释

　　要与上一行之间空一行

<script>    
    /*
     * 这里是一个购物类
     * /
    (function(){
        function shoping(){
            if(condtion){

                // 解释下一行语句注释
                allowed();
            }
        }        
    })();
</script>

 

　　3、难于理解的代码

　　对于逻辑性较强的代码需要用注释来说明，以便后续人员来维护

 

二、文档注释

　　来描述整个文档的信息，包括文档的功能模块，作者、创建日期，大概描述

 

三、注释声明

　　1、TODO：说明代码还未完成，应当包含下一步要做的事情

　　2、HACK：包含为什么使用hack的原因

　　3、XXX：说明代码有问题尽快修复

　　4、FIXME：说明代码有问题尽快修复，重要性略次于XXX

　　5、REVIEW：说明代码任何可能改动需要代码评审

 

// TODO 希望找到更好的方法解决
doSomeing();

/*
*  hack：不能针对IE做出处理，计划有时间重写这块
*/
if (document.all) {
　　doSomeing();
}

 

第三章  语句和表达式

一、语句

　　无论是if、for、while、do...while、try... catch都需要加 ｛｝

 

二、花括号的对齐方式

<script>
    for(var i=0; i<len; i++){
        if(condtion){
            allowed();
        }else{
            doSomeing
        }
    }    
</script>

 

三、switch语句中是否需要default语句

　　无论defalut语句中是否存在意义，都需要添加，每个case语句之间都加一个空行

switch (name) {
    case "1":
        console.log("aa");
        break;
    
    case "2":
        console.log("aa");
        break;
    
    default :
        break;
}

 

四、if语句间隔

　　if括号的前端都加一个空格

if (condition) {
    ....        
} else if (conditions) {
    ....
}

 

五、运算符前后使用空格来保持代码整洁

if (found) {
     doSomeing();      
}

 

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

一、声明变量

　　变量声明一般在函数顶部，初始化逻辑跟在后面

　　使用var 将所有变量合并成一个语句：

　　好的写法：

　　var name = "siguang",  

　　      age = 20,

             timer = null;

　　

　　不好的写法：未声明的写到了前面

　　var name,

             age = 20;

 

二、函数的声明

　　和变量声明一样，函数声明也会被javascript引擎收录

<script>
    function doSomeing(){   // 先定义
        
    }
    doSomeing();    // 在引用
</script>

 

三、立即调用函数

<script>
    // 将匿名函数赋给一个变量
    var someing = function(){
        // 函数体
    }

    // 自动执行不好的写法
    var doSomeing = function(){   // 先定义
        return {
            message: null
        };
    }();

    // 好的写法
    var doSomeing = (function(){
        return {
            messgae: null
        }
    })();
</script>

 

四、对象的私有属性和方法使用下划线开头

var obj = {
　　_count: 10,

　　_getCount: function(){
　　　　return this._count;
　　}
}

 

第五章  UI层的耦合性

一、将CSS从JS中抽离出来

.box{
    width:expiression(document.body.offsetWidth + "px");
}

// 不好的写法
var element = document.getElementById("box");
element.style.width = 20 + "px";
element.style.height = 40 + "px";
element.style.top = 5 + "px";

// 将css抽离出来
.st { width:20px; height:40px; top:5px;}

element.className = "st";

 

二、将javascript从HTML中抽出

　　不好的写法：

　　1、<button onclick="doSomeing">click me</button>　　// 嵌到html标签中

　　2、另一种是使用<script>标签

　　　　<script>

　　　　　　doSomeing();

　　　　</script>

 

第6章  避免使用全局变量

一、全局变量带来的问题

　　function sayColor(){

　　　　alert(color);

　　}

　　1、命名冲突：color为全局变量，如果其它地方也引用了这个变量就会有问题存在

　　2、代码的脆弱：如果color没有定义，程序就会报错

 

二、使用命名空间来避免全局的污染　　

var YUI = YUI || {};

YUI.Dom = {
    // 操作DOM
}

YUI.Event = {
    // 操作事件
}

 

三、模块化

　　可以使用Sea.js来模块化代码，对模块的依赖和一个工厂方法

 

三、零全局污染

(function(win){
    function fn1(){
        // 方法一
    }
    
    fn1();  // 执行
})(window);

 

 

第8章  避免“空比较”

<script>
    // 变量与null的比较，用来判断变量是否被赋予了一个合理的值（这种用法有问题）
    var controller = {
        pro: function(){
            if(items !== null){     // 不好的写法
                items.sort();
            }
        }
    }
</script>

 

需要改成

　  if( typeof   items  !==  null){ // 使用用typeof来返回类型  }

 

 

第四章 错误处理

一、问题类型：

　　问题类型分两种：程序员错误

 

二、异常

　　throw是引发异常的关键字，try放置引发异常的代码，catch会执行代码

 

三、Error对象

　　catch(error){ }，输出错误消息

　　属性：error.message输出错误消息

 

第五章 浏览器的嗅探

一、navigator.userAgent

// 不好的写法
if(navigator.userAgent.index("MSIE") > -1){
    // 是IE
}
else{
    // 不是IE
}

 

二、特性检测

来测试浏览器是否支持

// 不好的写法
if(navigator.userAgent.indexOf("MSIE 7") > -1){
    //
}

// 好的写法
if(document.getElementById){

}