编写js代码

1.养成良好的编程习惯

1.1如何避免js冲突

我们可以使用立即调用函数将脚本包起来，可以有效控制全局变量，避免冲突隐患。

如：

....

为了实现在不同脚本之间进行通信，我们可以在window作用域下定义一个全局变量，把它作为一个桥梁，完成匿名函数之间的通信。但是为了减少全局变量的个数，我们可以使用一个{}对象类型的变量作为全局变量。若匿名函数间需要多个变量来做通信桥梁，可以将这些变量作为全局变量的属性。同时为了防止属性之间被相互覆盖，我们可以添加命名空间来区分各个作用域中的同名属性。

...

...

此外，为了提高代码的可维护性，我们需要添加注释。

综上所述：让js不产生冲突，需要避免全局变量的泛滥，合适使用命名空间以及为代码添加必要的注释。

 

1.2给程序一个统一的入口--window.onload和DOMReady

网页中的js从功能上，应该分为两个大部分-框架部分和应用部分。框架部分提供的是对js代码的组织作用，包括定义全局变量，定义命名空间方法等，它和具体应用无关，每个页面都需要包括相同的框架，所以框架部分的代码在每个页面都相同。应用部分提供的的页面功能逻辑，不同页面会有不同的功能，不同页面应用部分的代码也不同。

我们可以将功能代码放在一个统一的函数入口中，如init()函数，方便对功能的添加和修改。我们可以在window.onload事件或DOMReady事件中调用init()函数。二者的区别在于：window.onload需要当页面完全加载完成时才会触发，包括图片，flash等富媒体；DOMReady只判断页面所有的DOM节点是否已经全部生成，至于节点的内容是否加载完成，它并不关心。所以DOMReady触发的速度比window.onload更快。特别是当页面内有大量图片等富媒体资源时，DOMReady触发很久之后window.onload才会触发。但是DOMReady并不是js的原生事件，可以使用一些js框架调用它。如jQuery中的$(document).ready();

另外一种模拟DOMReady事件的方法是将init()的调用放在文件的尾部，此时DOM元素都已生成。

 

1.3 css放在页头、js放在页尾

js加载会“阻塞”其后面内容的生成；若将css放在内容之后，页面中的元素会没有样式。所以为了防止页面长时间空白或页面没有样式，建议将css放在页面头部，js放在页面尾部。

 

1.4 文件压缩

为了减少网页大小，缩短网页的下载时间，可以使用压缩工具对文件进行压缩处理。常用的压缩工具有Packer和YUI Compressor。Packer的网址是：http://dean.edwards.name/packer; YUI Compressor网址：http://developer.yahoo.com/yui/compressor.

 

2.JavaScript的分层概念和JavaScript库

我们可以将js文件分为3层，从下到上依次为：base层、common层和page层。

base层有两个职责。一个是封装不同浏览器下js的差异，提供统一的接口，依靠它来实现跨浏览器的兼容工作。另一个是扩展js语言底层提供的接口，让它能提供更多更为易用的接口。

common层依赖于base层提供的接口。common层提供可复用的组件，它是典型的mvc模式中的m，和页面的具体功能没有直接关系。common层的功能是给page层提供组件。

page层位于三层的最顶端。这一层和页面里的具体功能需求直接现骨干，是mvc模式中的c。page层依赖于base层和common层。page层的功能是完成页面内的功能需求。

2.1 base层

base层的接口从大的方向上看，可以分为3块儿，一块是用来操作DOM，包括获取DOM节点和设置DOM属性；一块儿用来操作事件，包括访问event对象的属性和设置事件监听；还有比部分用来模仿其他语言提供原生的js不提供的函数。我们也可以分别用GLOBAL.Dom,GLOBAL.Event和GLOBAL.Lang作为base层函数的命名空间。

2.2 common层

common层和base层都是供page层调用的，二者的区别在于common层提供的不是简单的藉口，而是相对更庞大的组件。common层提供的组件并不像base层那么通用，它和具体的功能相关，如果页面里不需要相关的工恩呢该，就没必要加载。

2.3 page层

page层是mvc中的c，和页面里的具体功能需求直接相关。如果页面里的功能需求简单，页面里可以没有base层代码，可以没有common层代码，但一定会有page层代码。base层和common层都是属于框架级的，page层是属于应用级的，它可以调用base层的接口和common层的组件。