编写高质量代码——高质量JavaScript

1、团队合作，如何避免 JavaScript 冲突？

       为了让 JavaScript 不产生冲突，需要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释。

（1）避免全局变量的泛滥：使用匿名函数将脚本包起来，让变量的作用域控制在匿名函数之内。使用 (function(){})() 这种形式，先定义一个匿名函数，然后立即执行：

1
2
3

(function() {
  //编写代码
})();

（2）合理的使用命名空间：

 • 使用普通的变量作为全局变量，扩展性会非常差，使用一个 {} 对象作为全局变量，然后可以将多个变量作为该全局变量的属性。推荐使用 GLOBAL 作为全局变量的变量名，即 var GLOBAL = {};

 • 在不同的匿名函数中，根据功能声明一个不同的命名空间，然后每个匿名函数中 GLOBAL 对象的属性直接挂在匿名函数的命名空间下，即 GLOBAL.Namespace = {};

GLOBAL.Namespace.variable = value;

（3）为代码添加合理的注释：

 • 公共组件都要在文件头部加上注释说明：

1
2
3
4
5
6

/\*
* 文件用途说明
* 作者姓名
* 联系方式
* 制作日期
*\*/

 • 大的模块注释方法：

1
2
3
4
5

//===============

// 代码用途

//===============

 • 小的注释，单独占一行，不要在代码后加注释：

1

//代码说明

2、给程序一个统一的入口——window.onload 和 DOMReady

 • 由于 JavaScript 是种脚本语言，浏览器下载到哪就会执行到哪，所以对页面的代码模块提供一个统一的入口很有必要，从而可以避免一些不必要的错误。推荐使用 jQuery 框架的 (document).ready(function(){}) 或者 (function(){}) 作为程序的统一入口。

3、JavaScript 优化问题

（1）由于  HTML 是按顺序加载，但 JavaScript 代码比较复杂时，会导致页面短暂时间的空白。为了更好的提高用户的体验，建议将：CSS 放页头，JavaScript 放页尾。

（2）JavaScript 编译——文件压缩

 • 流行的 JavaScript 压缩工具有 Packer 和 YUI Compressor

 • 为了方便维护，源文件的文件名和压缩后文件的文件名应建立对应关系。如：src.js，压缩后为src.min.js

4、JavaScript 分层概念

 • 一般将 JavaScript 分成三层：base.js + common.js + page.js

（1）base 层，位于最低层，主要功能是：封装不同浏览器下 JavaScript 的差异，提供统一的接口；扩展 JavaScript 语言底层提供的借口，让它提供更为一用的借口。建议使用 jQuery 框架来作为 base 层。

（2）common 层，位于中间层，主要功能是：提供可供复用的组建，对一些常用的功能进行封装，为 page 层提供组件。

（3）page 层，位于最高层，与页面的具体功能需求直接相关，完成页面内的功能需求。