编写优雅的JavaScript——第一章：风格格式化（上）

第一章：风格格式化（上）

我从不否认真正的优雅应该是魅力与品格从内而外的迸发，也不赞成那帮只会做足外表功夫的家伙。但是，不可否认，当我们学着如何去理解优雅的时候，在外表上下一些功夫的的确确是最简单的——这是“优雅”的第一步，无论你是多么讨厌那些外表光鲜，内在空洞的家伙——你只需要按照某个规范去模仿——但是要记住，这只是暂时的。
在这篇文章里，我将会与你讨论如何编写格式化风格的代码，它能够帮你优化你的代码风格，告诉你如何谱写出漂亮的代码。实话实说，这可能会让叛逆的你感到不适，因为里面立了好多规矩。然而就像我在前言中提到的，当你经过了项目开发的风暴后，你就会发现这些形形色色的看似陈旧的规矩是这样的充满魅力。

1.1代码结构

1.1.1 4个空格为一个缩进

代码中以4个空格作为一个缩进被证明是视觉效果最好的，我不推荐你使用制表符缩进，因为不同的文本编译器可能会对制表符的理解不一样（但你可以设置每按一下Tab键插入4个空格），尤其是制表符和空格一起使用更是被明令禁止的。一般来说，从句及函数体的定义需要一个缩进，由于内容过长换行时使用两个缩进，赋值运算因内容过长而换行应与上一行赋值内容对齐而不使用额外缩进（后面两点在下面会提到）。

function singASong(song){
    if (song === "Hallelujah"){
        alert（"I have heard there was a secret chord that..");
    }
}

注意，这里我们不讨论运算符，小括号等涉及到的一个空格的缩进的问题，比如：var i=0;还是var i = 0; 因为这个始终没有统一的标准。着可以取决于你的喜好或者你依赖的开发工具。在接下来的示例代码中，除了极少数的情况，我都不会注意提示大家在一个空格上的风格

1.1.2 语句使用“;”结尾

JS的自动分号插入（Automatic Semicolon Insertion，ASI）会帮我们在没有分号程序就无法运行的地方插入分号，是一个很好的助手。然而，有的时候她也会帮倒忙，下面的代码

function getAuthor(){
    return
    {
       name:"胡凯赫",
       college:"重庆邮电大学"
    }
}

会被理解成：

function getAuthor(){
    return;
    {
       name:"胡凯赫",
       college:"重庆邮电大学"
    };
}

所以我建议你所以的语句都以分号结尾（不过我觉得处处小心的新手不用我建议也会这么干）。

1.1.3 换行与缩进

1.1.3.1 行的长度限定在80个字符内

80个字符有多长呢，是下面的函数里的字符串（算上空格）两倍的长度：

function() singASong{
    alert（"David played and it pleased the lord but..");
}

说明：这里由于排版问题，以下的换行示例每行可能没有达到80个字符

1.1.3.2 在运算符后面换行

为了防止ASI好心办坏事的误插分号，我们一般选择把换行地点设定在运算符号的后面。并且下一行使用两个缩进层级（8个空格）以达到最佳的视觉效果：

function singAsong（singers, song, stage, instruments,
        composer){
    ... ...
}

1.1.3.3 语句的主体部分仍然使用一个缩进

if (song === "Hallelujah" && singer === "Jeff Buckley" && 
        credit === "grace"){

    // 这是语句的主体，仍然使用一个缩进
    alert("you don\'t really care for music do you?");
}

1.1.3.4 当赋值语句过长时，第二行的位置和赋值运算符“=”右侧的内容对齐

var total = class1 + class2 + class3 + class4 + class5 +
            class6;

1.1.3.5 当字符串很长时，使用“+”运算符换行,而避免使用“\”

var song = "It goes like this: the forth,the fifth" +
           "the minor fall,the major lift";

// 尽量不要把很长的字符放在alert（）中
alert(song);

1.1.4 在合适的地方添加空行，以增强代码的逻辑可读性

1.1.4.1 注释之前添加空行

function() findASong{
    ... ...
}

//下面的逻辑负责音乐演唱
function singASong(){
    ... ...
}

我推荐你再下述地方添加空行：

1.1.4.2 在方法和方法，方法和语句（包括父方法声明语句）之间

function singASong(){

    function getSinger(){
        ... ...
    }

    alert("The beffled king composing Hallelujah..");
}

function continueTheSong(){
    alert("Hallelujah Hallelujah Hallelujah Hallelujah..");
}

1.1.4.3 在父方法声明语句和局部变量，局部变量和第一条语句之间

function SingASong(){

    var song = "Your faith was strong but you needed proof"+
             = "you saw her bathing on the roof..",
        j;

    for( j = 0; j < 5; j++ ){
        ... ...
    }
}

1.1.4.4 在方法的逻辑片段之间插入空行以增加程序的可读性

1.1.5 注释

1.1.5.1 单行注释

单行注释可以单独占据一行于需要注释的代码前也可以放在代码的后面。如果单独占据一行，则在其前面需要一个空行；如果放在代码的后面，则注释内容与代码至少要留一个空格的缩进并且注释的字数要算在这一行的字符数内，如果超过80个字符，必须让这个注释单独占据其上的一行。

var EnglishName = "Agent" // 这是我的英文名字

// 这是我的中国名字
var ChineseName = "HuKaihe"

除了大量的代码被注释掉，需使用单行注释外，单行注释不可以连续多行注释的形式出现。

// 像这样大量的代码被注释掉
// var getName=function(){
//     return "胡凯赫";
// }

1.1.5.2 多行注释

多行注释只能出现在代码前，且在其前面要空一行。在javascript中，由多行注释衍生出了java风格的多行注释和文档注释：

// 普通的多行注释

/* 《Hallelujah》是加拿大著名的吟游诗人莱昂纳德·科恩的作品，与亨德尔
的哈利路亚大合唱的雄浑壮阔不同，这首歌被称为世界上最优美的旋律之一，在
911事件后帮助很多人重拾希望，是目前被翻唱版本最多的经典歌曲之一。 */

// java风格的多行注释

/*
 * 这是java风格的多行注释
 * 推荐大家使用这样的多行注释
 */

// 文档注释

/**
singASong()函数的文档注释
@Param song 传入歌曲参数
@return void 返回值为空
**/
function singASong(song){
    ... ...
}

1.1.5.3 注释的缩进

所有注释缩进层级与下一行代码保持一致。注释内容与斜杠或星号之间有一个空格。

1.1.5.4 在容易引起误会的地方加上注释

function judgeNum(num){

    var index=0;

    if(index = num){ // 提示：这里是赋值操作，不是判等操作
        return index;
    }else{
       alert("传入的参数是假值");
    }
}

1.1.6 格式化的工具

JLink可以帮助我们检查我们的JS代码并给我们提示。在这里我强烈推荐IDEA及其驱动的WebStorm系列，只需选中代码，按下ctrl+alt+L,编译器就会自动帮我们调整格式。在这些工具的帮助下，我们就几乎不用考虑单个空格和大部分缩进的问题了。当然这些工具并不是万能的，在很多情况下，比如下面函数和变量的命名，这些IDE也只能爱莫能助了。

1.2 命名与直接量

1.2.1 命名

1.2.1.1 采取驼峰命名法命名

函数和变量均采取小驼峰命名法命名:第一个单词首字母小写，其后每个单词首字母大写。构造函数（类）采取大驼峰命名法：每个单词的首字母均大写

var myName = "胡凯赫",
    singASong = function(){
         ... ...
    };

function Person(){
    ...
}

var LiMing = new Person();

其实，这条规则也暗示我们：大写字母开头的函数连接()时前面不是function（定义时）就是new（实例化时）。

1.2.1.2 函数以动词为前缀，变量以名词为前缀，以单个字母命名的变量用在循环中。

这套命名方法有个特例：jquery。因为jquery中的很多函数需要同时满足赋值和读值的双重使命，所以jquery的函数往往不符合这里的命名规范。但作为程序开发人员，我们编写的函数目的往往很简单，所以这里提到的命名规范非常适用。

// 常用的函数前缀有：can\has\is\get\set
function isPerson(){
    ... ...
}

var myCollege = "重庆邮电大学"，
                j;

for (j=0; j<5; j++){
    ... ...
} 

1.2.1.3 变量尽量在名字中体现出其数据类型，

比如说：length,width的数据类型一眼就能看出是数字，name,message的数据类型不用说一定是字符串。

1.2.1.4 严禁使用汉语拼音和一些没有意义的命名

把拼音当做变量名是让老美看不懂我们代码（起码一眼看不懂这个变量是干什么的）的一个好办法。像bar,tmp这类的单词，在没有注释的情况下，也要尽量少用。因为其他开发者根本没有办法直接从这个变量的命名上获取哪怕一丁点儿的信息。

1.2.1.5 常量

JS中本身没有常量的设定，然而我们在程序开发中创建的一些变量的确具有常量的特征——它们从程序开始运行到程序运行结束根本不会有丝毫改变。所以我们聪明的程序猿想到了用名字标识哪些是永远不会变的量。
常量使用大写字母和下划线命名，例如：

var MAX_COUNT = 15;

这里要注意，和java/C++中用final/const声明的常量不同,JS中常量的本质还是变量，只是命名形式不同，它的值当然还是可以被修改的。

1.2.2 直接量

1.2.2.1 统一使用双引号”“括住字符串

和java单引号定义char型变量，双引号定义String型的变量不同，JS中单引号和双引号在定义字符串上别无二致。这里我推荐统一使用双引号括住字符串，这也会帮助全栈工程师往返穿梭于不同的语言信仰之间（就好像Java和JS的切换）。

1.2.2.2 禁止8进制数字，不要省略小数点之前和之后的数字

有的人在写CSS时喜欢去掉小数点前的0，比如：

.myDiv{
    font-size:.8em
}

你在百度搜索CSS编码规范时，甚至有人大张旗鼓的推荐这样的写法，一个很大的问题出现在歧义上：你很难搞清楚是故意省略掉了小数点前面0还是不小心漏掉的。而且这也不免令高度近视的人群恼火，所以，请不要省略小数点之前或之后的数字。

1.2.2.3 使用直接量创建对象和数组

// 直接量写法，方便快捷
var author = {
    name:"胡凯赫",
    college:"重庆邮电大学"
    },
    myArr = [1,2,3,4];

// 构造函数的方法，不推荐使用
var author = new Object();
author.name = "胡凯赫";
author.college = "重庆邮电大学";
var myArr = new Array();
... ...

1.2.2.4 null和undefined

详细的区别请你看犀牛书，这里只提一点：如果你声明了一个可能被赋值为对象的变量并且没有立即初始化它的想法，请你先以null作为它的初始值以表明这个变量的意图——它最终很可能被赋值为对象，这样就和undefined区分开来。

今天我们一起分享了格式化风格的基本常识：如何优雅的处理程序中的缩进，换行，注释，命名与直接量… …
下一章，我们将一起讨论变量，运算符，表达式，语句以及函数的风格，这个系列的文章会持续更新，期待的朋友可以关注我的博客，也可以和我交流讨论：879383400@qq.com 。最后，在《hallelujah》美妙的音符中祝你享受知识的奇妙，谢谢