《Web前端开发修炼之道》笔记四：高质量JavaScript(一)

1.如何避免js冲突

1.切忌全局变量泛滥，可以用匿名函数把脚本包起来。

比如：

2.为了解决匿名函数之间的通信问题，我们可以在window作用域下定义一个全局变量，把它作为一个桥梁，完成各匿名函数之间的通信。

为了控制全局变量的数量，可以使用如下方法：

但是这种方法里，GLOBAL的属性很容易被不同的工程师覆盖，所以，我们可以使用命名空间来解决这个问题：

如果某一个匿名函数的程序非常复杂，有很多变量，命名空间可以进一步拓展为二级命名空间。

为了提高代码可维护性，我们可以在自己写的匿名函数前加上注释：

这样的话别的工程师如果不明白自己写的代码的意思，可以找到相应的负责人。

总结：

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

2.给程序一个统一的入口

window.onload和DOMReady:

window.onload会等到整个网页全部加载完时才会执行，包括图片、flash等富媒体；

DOMReady在网页的dom节点全部生成完（内容并不一定加载完）时被触发，更适合用来调用初始化函数。但是原生js并不支持。可以结合js框架来使用，比如在jquery中：

$document.ready(init);

我们可以在页面的最后，</body>标签之前调用init函数来模拟DOMReady的效果。

3.CSS放页头，js放页尾

这样可以避免html出现无样式状态，避免js阻塞网页的呈现，减少页面空白的时间。

4.JS的压缩和反压缩

在正式发布前，为了减小js大小，可以用Parker和YUI Compressor对js进行压缩：去空格，去注释，把复杂变量名变成简单变量名。

反压缩只能从缩进上对js进行反压缩，注释和改名的变量没办法恢复。

5.JS的分层

base层：

有两个职责，一是封装不同浏览器下js的差异，提供统一的接口，可以依靠它来完成跨浏览器兼容的操作；二是拓展js语言底层提供的接口，让它提供更多更易用的接口。功能是给common和page层提供接口。

common层：

为page层提供可复用的组件。

page层：

完成页面内的功能需求。

1.base层

1)封装不同浏览器下js的差异

例子：

其他常见的js浏览器兼容问题还有：

设置透明度、event对象、冒泡、“on attachEvent addEventListener”。

2）拓展js语言底层的接口

比如封装一些trim、类型判断的方法、get(封装了document.getElementById)、之类的。

前面我们说过，要尽量使用命名空间来减少全局变量的个数，所以base层的代码也应该加上命名空间。

base的接口从大方向来看，可以分为3块：一块用来操作DOM,包括获取dom节点和设置dom属性；一块用来操作事件，包括访问event对象的属性和设置事件监听；还有一块用来模仿其他语言提供原生js不提供的函数，如trim、extend、isNumber。

举个例子：

在实际应用中，可以将base层的代码放在一个js文件中，例如base.js。如果对代码的大小要求很高，还可以把base.js细分为base_dom.js,base_event.js,base_lang.js。

2.common层

common层本身依赖base层提供的接口，所以要使用common层的，必须先加载base层的代码。

common层与base层的区别是，不提供简单的接口，而是一些相对比较复杂的组件，比如对cookie的操作。（原生js操作cookie特别麻烦）

除了cookie，common层常见的组件还有用于异步通信的Ajax，用于拖拽的Drag,用于拖拉元素大小的Resize等等。

base层提供的接口与任何具体的功能无关，非常底层，所以也非常通用。common与具体功能相关，如果不需要某个功能，就不需要加载相应文件，所以common层的js需要按功能分成一个个的文件，如common_cookie.js,common_drag.js等，按需加载。

3.page层

就可以专心的写业务相关的代码，浏览器兼容啥的扔给base层和common层，一些常用的可复用的组件扔给common 层！

6.JavaScript库

1.YUI

在1，2，3中，YUI2比较稳定和完善：

2.jQuery

如果自己写组件，就要考虑以下几点：

跨浏览器兼容

组件易用

组件可重用

组件可拓展

代码组织有序，高内聚低耦合