代码改变世界

编写可维护的JavaScript 收纳架

2013-10-11 18:08  时空印记  阅读(732)  评论(0)  编辑  收藏  举报

　　如果你看过Nicolas C.Zakas写过的任何作品，你必须承认他是个不折不扣的天才。也只有天才级的才能写出《JavaScript高级程序设计》让所有的前端攻城师人手一本。Nicolas C.Zakas除了对现代JavaScrpt技术的详细讲解，还倡导了很多最佳实践，包括渐进增强、可访问性、性能、扩展性和可维护性等。

　　编写可维护的Javascript就意味着：消灭团队个体的差异达成整体的统一，以保持大家的代码风格一致和可读的、可维护性的、可扩展的。所以该系列收纳架做一个收纳整理。

 

　　书从编码风格、编程实践以及自动化3个部分来讲。

第一部分 编程风格

　　编程风格的确定会促成整个团队成员的高水准运作，因为所有的代码风格看起来极为类似就如同一个人编写。

在团队开发中，编程风格一致性变得尤为重要，原因有：

  • 任何开发者都不在乎某个文件的作者是谁，也没有必要花费额外的精力去理解代码的逻辑并且重新排版，因为所有代码的排版风格都是非常一致的，因为风格不一致会导致我们打开代码文件的第一件事情不是立即工作，而是进行缩进的排版整理。
  • 能很容易的辨别出有问题的代码并且发现错误，如果所有的代码风格很像，当看到一段与众不同的代码时，很肯能问题就出在这里。

　　JSLint 和 JSHint 是两个检查编程风格的工作。不仅找出代码中潜在的错误，还能对潜在的风格问题给予提示警告。JSLint是属于“顽固派”不接受你的自定义也就是不会为你做任何改变；JSHint是属于“受教派”可以接受你的自定义个性化的检查。

第一章 基本的格式化

　　编程风格的核心就是基本的格式化规范，这些规范决定着如何编写高水准的代码。

1.1 缩进层级

　　缩进没有统一的共识二分成两派：

  • 使用制表符缩进。  
  • 使用空格缩进。
     只要不将两者混着用，保持一致便可。个人喜欢使用制表符Tab缩进。Zakas建议4个空格，或设置 制表符Tab 替换为 4个空格为一个缩进层。
 
1.2 语句结尾
　　由于JavaScript分析器会自动插入机制，所以禁止省略分号和函数中的前“{”不应该换行。
　　如： 
// 原始代码
function getData() {
    return
    {
        title:"JavaScript",
        ...
    }
}

// 分析器将理解成
function getData() {
    return;
    {
        title:"JavaScript",
        ...
    }
}

// 推荐写法
function getData() {
    return {
        title:"JavaScript",
        ...
    }
}
View Code

 

1.3 行的长度

　　行的长度不应该超过80个字符。

1.4 换行

　　当一行达到了单行最大字符数或超过单屏时，应该手动换行。推荐在运算符后换行，下一行需增加两个层级的缩进（两个Tab/8个字符）]

1.5 空行

　　空行推荐使用在：

  • 在每个流控制语句之前（如if/for等）。
  • 在方法之间。
  • 在方法中局部变量和第一条语句之间。
  • 在多行或单行注释之前。
  • 在方法内的逻辑片段之间插入空行，提供可读性。
  • 在一段代码的语义和另一段代码不相关之间，确保语义有关联的代码展现在一起 如：
// 不推荐写法
if（wl && wl.length）{
    for (i=0,l=wl.length;i<l;++i) {
        ...
    }
}

// 推荐写法
if（wl && wl.length）{

    for (i=0,l=wl.length;i<l;++i) {
        ...
    }
}
View Code

1.6 命名

　　JavaScripe 核心 ECMAScript，即是遵照了驼峰式大小写。

　　1.6.1 变量和函数

　　　　变量名总是应该遵循驼峰大小写命名法，并且命名的前缀应当是名词，使得可以将变量和函数区分开。 如：

// 不推荐写法: 变量看起来像函数
var getCount=10;
var isFound=true;

// 推荐写法
var count=10;
var found=true;
View Code

　　　　命名长度尽可能短并能看词知意。

　　　　常见参考：

    can        函数返回布尔值
    has       函数返回布尔值
    is          函数返回布尔值
    get        函数返回非布尔值
    set        函数用来保存值
 
　　1.6.2 常量
　　　　在ECMAScript 6 之前，JavaSCript 不存在真正的常量的概念。然后工作中仍然把变量用作成常量的。由于我是用C#的，如果根据C#的命名规则，约定常量首字母大写来区分， 如：
// 这是我的个人约定跟本书不同（书是C语言使用大写字母和下划线命名）
var MaxCount=100;
var Url="http://www.cnblogs.com/";
View Code

 

　　1.6.3 构造函数

　　　　构造函数的命名是遵照 UpperCamelCase(大驼峰)命名法。

 

1.7 直接量

                                                                                          《-未完 待续-》