JavaScript网页脚本编程良好习惯

1.避免过度使用JavaScript

• 有时候过于漂亮炫酷的Web页面实际上对用户来说并不容易上手，甚至在操作时会引起用户的反感。新的事物总是这样，一般来说，用户通常会以自己已经非常熟悉的方式来进行操作，所以有时候我们使用JavaScript设计的奇巧界面，反而降低了用户的操作效率。

• 由于 CSS发展迅速，使得很多曾经需要使用JavaScript来实现的酷炫视觉效果现在都可以使用CSS完美地实现了。实现同样的页面效果，相比之下，CSS是更好的选择。首先，有一部分用户会关闭浏览器的JavaScript功能，而CSS通常不会被关闭。其次，即使CSS出现了问题，页面也能显示最基本的HTML页面，尽管这样看起来失去了很多特色，但还是能向用户传递信息。

• 有时使用JavaScript代码还可能降低页面在搜索引擎中的排名，因为它们的页面嗅探器未必能够正确地索引由JavaScript生成的内容

• 到现在为止，还有很多用户的PC是过时的、性能低下的的老旧计算机，也有很大一部分人的互联网连接速度比较慢而且不可靠。在这种情况下，过度使用脚本代码对性能的影响是很明显的。

2.代码应该易读易维护

在这方面，我们可以遵循这样一项原则：以后别人来维护我写的程序，读我写的代码，他应该能很容易就明白我代码的意思。己所不欲，勿施于人，想象一下我们自己在读那些糟糕代码时的心情吧。具体到写代码时，可以借鉴以下几条经验指示：

• 命名得体。命名一定尽可能地使用有意义的英文单词。命名一定尽可能地使用有意义的英文单词。命名一定尽可能地使用有意义的英文单词。重要的事情说三遍！！！具体到代码时可参考以下规范：常数名称大写，变量和函数名使用驼峰命名法（即组成名称的单词，首字母小写，以后每一个单词首字母大写），对象构造函数首字母大写等

• 恰到好处地使用注释。注释不可全无亦不可全有，应该在可能出现“阅读障碍”的代码部分注释，比如：1不易理解的变量名字，易混淆或易误解的代码，代码较长的函数或对象，作者自己独创的技巧等。

• 尽量复用代码。JavaScript不是一门严格意义上的面向对象编程语言，但我们大可不必纠结于此。JavaScript也有它自己的面向对象方式，特别是结合DOM编程时更是如此。现代编程工作，更倾向于使用面向对象的思维方式来编写程序。我们在使用JavaScrpt来操控HTML页面时，也应保持这种好的思维方式与编程习惯，尽可能地写复用性高的代码，把代码集中到对象这些模块里，从而在程序里反复使用。这样不仅减少了大量不必要的工作提高了代码的效率，也使代码的集成化、模块化更高，程序结构更加简洁。

3.平稳退化

在早期的浏览器中，有些甚至不支持在HTML里包含图片。在开始使用元素之后，我们需要使用某种方式让这些纯文本的浏览器在遇到不支持的标签时能够给用户提供一些有益的帮助。

对于标记来说，相应的方式是使用alt属性（替代文本）。页面设计人员给alt属性设置一个字符串，那些纯文本的浏览器就会显示这个字符而不是图像。alt属性包含的字符串没有什么硬性规定，可能是图像的标题，可能是关于图像内容的描述，可能是从其资源获得相关信息的建议。

这是关于“平稳退化”的早期范例，也就是当用户的浏览器缺少某种让页面设计充分展示的功能，或是关闭这种功能时，我们仍然能够尽可能地把站点的内容呈现给用户。

再以JavaScript本身为例，几乎每款浏览器都支持JavaScript，而且只有极少的用户会关闭这个功能。那么我们还需要考虑JavaScript不能应用的情况吗？答案恐怕是肯定的。网站的访问者有可能使用的是不支持JavaScript的浏览器，还有一种可能是虽然浏览器支持JavaScript，但用户已经禁用它了（比如，因为讨厌看到弹出广告）。如果没有考虑到这种情况，人们在访问网站时就可能会遇到各种各样的麻烦，并因此不再来访问你的网站。

搜索引擎的嗅控程序也算是网站里一种“用户”，他们会频繁访问站点，为了建立页面内容的完整索引而尝试遍历页面里的全部链接。目前，只有极少数搜索引擎的程序能够理解JavaScript代码。所以，如果你的网页不能平稳退化，那么站点里有些页面内容就可能不被索引了，这可能会使站点在搜索引擎里的排名情况大受损害。

另外一个很重要的方面是辅助选项。无论浏览器的功能如何，总是有一些用户受到其他限制，比如不能使用鼠标，或是必须使用屏幕阅读软件。如果站点不考虑到这些用户的体验，他们就不会再访问了。
如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。这就是所谓地平稳退化（graceful degradation），就是说，虽然某些功能无法使用，但最基本的操作仍能顺利完成。

4.渐进增强

所谓“渐进增强”就是用一下额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的站点几乎都符合“平稳退化”原则。

与“平稳退化”相比，支持“渐进增强”的方案会从另外一个角度来看用户访问站点的问题。此方案认为应该先建立一个稳定的、可访问的、功能完整的站点，其中的内容可以被任何用户和浏览器访问，而后再逐渐添加额外的功能层次，满足能够利用这些功能的用户。这种方式确保使用基本配置浏览器用户能够访问站点，而使用高级浏览器的用户也能获得增强功能。

对于采用“渐进增强”技术的页面来说，一定要把核心内容放到作为“语义层’的html文件中，而把“表现层”css与“行为层”javascript分离出来放到单独的文件里。

5.使用功能检测而非浏览器检测

检测浏览器对JavaScript的支持程度，最好使用功能检测手段而非浏览器检测，因为浏览器检测很繁琐而且往往还达不到理想效果。

举个例子，我们在编程过程中需要使用getElementyById()这个方法，在使用前需要检测当前浏览器是否支持它而不是去检测用户使用的是什么浏览器然后再采取适合浏览器的操作。代码如下：

if(documnet.getElementById) {
    //这里是支持getElementById()方法的浏览器所采取的操作
}

以上代码，经过修改，还可以更优雅一些

if(!documnet.getElementById)    return false;

关于不使用浏览器检测手段的原因说来有以下几条：

1. 有时浏览器会“说谎”，还有一些浏览器允许用户任意修改设置信息，而这些都会给使用浏览器检测手段的代码带来不可预知的风险。

2. 为了适用各种各样的浏览器，使用浏览器检测手段的代码会变得越来越复杂，结果可想而知，代码逐渐变得不易维护

3. 使用浏览器检测手段的代码在进行这类测试时有时可能要求浏览器的版本号必须得到精确的匹配，而市场上的浏览器更新迭代之快，使得维护代码的工作愈发沉重。

6.考虑到可能出现的错误

当JavaScript程序遇到某种错误时，JavaScript解析器内部会生成一个错误或警告。它是否显示给用户，以及把什么显示给用户，取决于用户使用的浏览器及设置。用户可能会看到某种形式的错误信息，或是产生错误的程序不反馈什么信息但也不能正常工作。

这两种情况对于用户来说都不好，因为不知道哪里出现了问题，也不知道如何处理这些情况。在编写跨浏览器和跨平台的代码时，我们能够预见到某些领域可能发生错误，对于这些错误，在脚本中我们应该使用try catch语句来做好处理错误的准备。

在脚本编写的过程中，如果要到以下情况，就应该积极地使用try-catch语句来处理它们

1. 不确定浏览器是否支持某个对象，或是这种支持是否是与标准兼容的。
2. 独立进程是否已经运行结束，比如外部文件是否已经加载完成。