基础的JavaScript编码规范

/*

 * 前言

 * 这个文档摘自Nicbolas C Zakas（担任过雅虎首席前端工程师） 著作 《编写可维护的 JavaScript》，下面是一些摘要
 * 这个文档讲了一些很基本的编写JavaScript 代码的规范，很基础，但是很重要
 * 良好的代码格式可以让代码结构和逻辑看起来更清晰，更美观，也更利于维护，尤其是维护问题。除非
 * 写完一段代码你以后都不用再看它了（但这基本是不可能的），请一定让自己养成一个良好的
 * 编写代码的习惯，否则这就是在给自己和后来的人挖坑。
 */
一、基本的编写规范

    1、缩进和空格，正确的缩进能够明确代码结构，规范的缩进示例
        
        // 最基本的结构缩进
        if(true){
            alert();
        }
        
        // 换行缩进，换行后应该有两个制表符的缩进
        function(name, age, gender, class,
                school){
            alert();
        }
        
        // 运算符的边都应该有空格
        var name = "";
        if(true && true){
        }
                    
    2、语句结尾，JavaScript可以用分号结尾，也可以不写分号，但是良好的习惯建议不要省略

    3、行的长度，建议是不超过80个字符，原则是不要让编码窗口出现横向滚动条

    4、换行原则，一般是在运算符后面换行，换行后应该有两个缩进，规范的示例
        
        fif(name == "" && age == "" && gender == "" &&  
                school != ""){    // 这一行应该有两个制表符，下面的内容依旧根据结构缩进
            alert();
        }
        
        // 但是有个例外：赋值运算,换行后应该与等号右边对齐
        var sqlString = "select * from where id = '' and " +
                        "name = order by id desc";

        // 函数赋值给变量时不需要遵循上面的规则
        var getName = function(){
            return name;
        };
        
    5、命名，基本的大小驼峰命名法，变量以名词开头，小驼峰法，方法动词开头，小驼峰法，看示例
         规范的命名是为了更好的阅读维护，优秀的命名是具有自我说明性的，见其名知其意
         如果不知道该如何命名，你就想想你这段代码的目的。另外，请一定用英文命名
        
        // 变量命名
        var name = "Tom";
        var count = 10;
        var mySchoolName = "Big School";

        // 方法
        function getName(){
            return name;
        }

        // 常量,全大写字母，单词之间以下划线分割
        var MAX_SIZE = 10;

    6、JavaScript 的构造函数，大驼峰命名法，因为 JavaScript 的构造函数都是需要 new 的
    
        // 构造函数
        function Person(name){
            this.name = name;
        }

        Person.prototype.sayName(){
            alert(this.name);
        }

        var me = new Person("Tom");

        // 这样很容易就跟方法区分开了，规范之后很容易就发现第一行代码少了 new 关键字
        var me = Person("Tom");
        var you = getName("Tim");

    7、字符串，JavaScript 中字符串可以单引号或者双引号包裹，书中建议是双引号，因为有时需要
        与Java 代码转换，但是个人认为如果只是纯粹的拼接HTML 代码的话，单引号更直接一些，因为不需要
        考虑“的转意

    8、数字，JavaScript 中只有整数和浮点数类型，使用浮点数时不能缩略小数位和整数位，不要使用八进制

        // 错误示范
        var price = 10.;
        var price = .1;
        var num = 010;
    
    9、null，null 是个特殊的值，常常跟undefined 搞混，因为alert(null == undefined) 输出true
        以下场景中当使用null
        
        // 初始化变量，如
        var Person = null;
        
        // 与一个已经初始化的变量比较
        var Person = null;
        if(Person == null)
        
        // 当参数期望是一个对象时，函数返回值期望是一个对象时
        function getStudentName(stu){
            if(stu){
                return stu.name;
            }else{
                null;
            }
        }
        
        var stuName = getStudentName(null);
        
        // 不好的用法，与未初始化的变量比较
        if(name == null)
        
        //以及检测是否传入了参数
        function(name){
            if(name != null);
        }
        
    10、undefined，当一个变量未被初始化或者不存在的时候的默认值就是undefined。一般情况下应该禁止
        使用它，来保证代码中只有一种情况返回undefined ，就是变量未声明的时候
        
        // 简单的例子说明何时返回undefined
        var Person;
        console.log(typeof Person);                    // "undefined"
        console.log(typeof str);                    // "undefined"
        
        // 养成良好的习惯，声明变量的时候即初始化，以保证只有未声明变量时才出现undefined
        var Person = null;
        
    11、对象直接量，用最简洁的方式创建对象
    
    // 一般的做法，已经不推荐使用
    var stu = new Object();
    stu.name = "Tom";
    stu.gender = "男";
    
    // 简洁的做法
    var stu = {
        name: "Tom",
        gender: "男"
    }
    
    // 数组也是类似的情况
    var nums = ["abc", "def", "ghi"];
    
二、注释规范
    
    1、单行注释，
    
        // 基本的单行注释，内容与符号间有一个空格
        if(true){
            
            // 单行注释前应该有换行，缩进与解释的代码一致
            return null;    // 同行注释前应该有一个制表符
        }
    
    2、多行注释，可以参考Java 的注释风格
    
        /*
         * 前面加* 号，并且添加一个空格
         */
    
    3、文档注释，跟Java 类似
    
        /**
         * 多行注释
         * @param 参数说明
         */
    
    4、使用注释的时机
    
        ⑴ 难以理解的代码
        ⑵ 可能被认为是错误的代码
        ⑶ 浏览器特性代码（看起来似乎很烂很低效，实际上是为了兼容性而写的代码）
        ⑷ 函数、类的说明要用文档注释，注释应该写明白参数的意义
        
三、语句和表达式

    1、if 语句
        
        // 正确的写法，无论之后有几条语句，都应该用括号包起来，并且有合适的缩进和换行
        if(true){
            alert("正确的写法");
        }
        
        // 错误的写法
        if(true)
            alert();
            
        if(true) alert();
        
        if(true){ alert(); }
        
    2、花括号对齐方式，有两种,一般以Java 为主流
    
        // Java 推崇的对齐方式，左边跟在第一句语句结尾，示例如下
        if(true){
            alert();
        }
        
        // C#推崇的对齐方式
        if(true)
        {
            alert();
        }
        
    3、switch 语句块，两种风格，看个人喜好

        // Java 类似的编译器风格
        switch(num){
            case "1":
                break;
                
            case "2":
                break;
                
            default:    // 选项很明确时可以不要默认选项
                
        }
        
        // 第二种风格
        switch(num){
        case "1":
            break;
        case "2":
            break;        
        default:    // 选项很明确时可以不要默认选项
            
        }
        
    4、for 和 for-in
    
        // 有些规范中禁止for 里面使用continue ，建议用if代替，因为这样结构不明确
        
        // for-in 看起来和for，很像，但是用途有些不一样，for-in用来遍历对象属性
        var prop;
        for(prop in object){
            console.log("property name is " + prop);
            console.log("property value is" + object[prop]);
        }
        
        // 需要特别注意的是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]);
            }
        }
        
    5、函数和变量的声明，在Java 和 JavaScript 中是允许调用在声明之前的，但是在c语言
        中是不允许的，虽然调用在声明之前并不会出现编译错误或者不能正常运行，但是某
        些时候有可能会出现一些小的问题，为了规范代码，最好是先声明后调用。
        
    6、立即调用的函数，立即执行的匿名函数，一般是需要通过复杂的计算以获得一个值

        // 不好的写法
        var value = function(){
            return null;
        }();    // 这里调用意图很不明显，虽然它确实是符合语法的调用执行
    
        // 正确的写法
        var value = (function(){
            return null;
        }());
        
    7、判断比较运算，JavaScript 具有强制类型转换机制，即在做普通的比较的时候，如果
        两个变量或者值类型不同时会首先进行强制类型转换，然后进行比较。
        
        // 比较字符串"5" 与数值 5，会先将字符串转换为数值
        console.log(5 == "5");            // true
        
        // 数值与16进制的比较
        console.log(25 == "0x19");        // true
        
        // 如果比较的其中一个变量为对象时，则会先调用对象的valueOf 得到原始类型值再
            比较，没有定义valueOf 则调用toString 比较
        var object = {
            toString: function(){
                return "0x19";
            }
        };
        
        console.log(25 == object);        // true
        
        // 因为强制类型转换的缘故，null 与 undefined 被认为是相等的
        console.log(null == undefined);    // true
        console.log(0 == false);        // true
        
        // 为了避免这些情况，所以比较的时候推荐使用 === 和 ！==
        console.log(5 == "5");
        console.log(5 === "5");            // false
        
    8、eavl() ，这个函数可以将字符串转换为JavaScript 代码执行，可以做到这一点的方法
        还有 Function() 构造函数和 setTimeOut()、setInterval()，但是强烈不推荐使用，
        除非别无他法，必须使用。
        
        // 将字符串转换为JavaScript 代码执行
        eval("alert('hello')");
        eval("1+1");
        
        // 通过 Function 构造函数以及setTimeOut 和 setInterval也可以实现
        var myFunc = new Function("alert('hello')");
        
        setTimeOut("alert('hello')");
        
        setInterval("alert('hello')");
        
        // 各种js规范中都非常不推荐使用eval(),setTimeOut() 和 setInterval()
            应该传入函数
            
        setTimeOut(function(){
        },1000);

    9、原始包装类型，原始类型包括String，Boolean，Number，原始包装类型主要是为了
        让原始值具有对象般的行为

        // 最典型的就是字符串的原始类型
        var name = "Tom";    // name 只是一个普通的字符串，但是下面的语句可以执行
        console.log(name.toUpperCase);    //是因为JavaScript 引擎在需要的时候创建了实例
        
        // 但是这个实例马上就会被销毁掉，用完就丢了
        var name = "Tom";
        name.author = "mySelf";    // 这行执行完毕String 实例就会被销毁
        console.log(name.author);    // undefined
        
        // 虽然JavaScript 中可以这么使用，但是我们应该人为的避免使用这些原始类型
        var name = new String("Tom");