1.1 不唐突和渐进增强
unobtrusive ['ʌnəb'trʊsɪv] adj. 不唐突的；谦虚的；不引人注目的
某些技术能够实现，当浏览器支持相应功能时文档会得到增强（渐进增强），而当浏览器不支持相应功能时，文档被退化（平稳退化）。
应该把内容的有效性和可访问性作为首要目标。
当使用DOM脚本编程并将它们整合到网站中时，编写 的脚本必须：
1.与标准兼容。面向未来开发应用程序，确保Web应用程序能在更新更好的浏览器中继续运行。
2.容易维护。综合运用可重用和容易理解的方法，以便你和其他人能够集中关注业务逻辑，而不是反复重写代码。
3.具有可访问性。确保每个人都能简捷而有效地访问到你的信息，即使他们无法运行脚本或者禁用了JavaScript。
4.具有可用性。那些在一种情况下非常有效但很难实现或重用的脚本，在第二次或第三次使用时不会有太大的价值。可用性不仅适用于与最终用户的交互，也适用于与开发者交互。
1.2 让JavaScript运行起来
1.2.1 把行为从结构中分离出来
1.如何以正确的方式包含JavaScript
最好的方式是通过外部源文件来包含JavaScript脚本。
2.昔日的JavaScript：前缀
在JavaScript中，this用于控制函数的执行环境，引用的是对象的所有者。
使用不唐突的技术，在window载入时添加事件处理程序。
popupLoadEvent.js
//添加载入事件来修改页面
ADS.addEvent(window,'load',function(W3CEvent) {
//查找文档中带popup类的所有锚标签
popups = ADS.getElementsByClassName('popup','a');
for(var i=0;i<popups.length;i++) {
//为每个锚添加单击事件侦听器
ADS.addEvent(popups[i].'click',function(W3CEvent) {
//使用href属性打开窗口
window.open(this.href);
//取消默认的事件
ADS.eventPreventDefault(W3CEvent);
});
}
});
通过在class属性中加上popup类标记出相应的锚：
<a href ="http://advanceddomscripting.com" class="popup">AdvancED DOM Scripting</a>
使用类或ID属性来标识元素的另一个好处是，你可以通过相同的类名为锚添加独特的样式：
.popup {
padding-right:25px;
background:transparent url(images/popup.png) no-repeat right center;
}
1.2.2 不要版本检测
future-proofing 适应未来
1.使用能力检测
也叫对象检测，指的是在执行代码之前检测某个脚本对象或者方法是否存在。
只需在脚本开始处对你打算使用的所有对象和方法进行一次检测，在万一遇到所需功能不可用时退出即可。
if (document.body) {
//依赖document.body的代码
}
if (document.body && document.body.getElementsByTagName) {
//使用document.body.getElementByTagName的代码
}
var W3CDOM = document.createElement && document.getElementsByTagName;
function exampleFunctionThatRequiresW3CMethods() {
if(!W3CDOM) return;
//使用document.createElement()
//和document.getElementsByTagName()的代码
2.什么时候使用浏览器版本嗅探
在涉及产品独有的特性时。
1.2.3 通过平稳退化保证可访问性
编写DOM脚本时不能依赖JavaScript的可用性。
脚本应该增强（而不是提供）行为和交互性。
不要使用JavaScript生成内容
导航和内容最好不要依赖于JavaScript，在网站开发即将结束时，最好能在禁用JavaScript的情况下在仔细检查一遍每个页面。假如没有看到应该看到的内容，那说明还没有到宣布结束的时候。
1.2.4 为重用命名空间而进行规划
至少在JavaScript2.0被广泛使用之前，都不是真正的命名空间，只是能在脚本内部营造一个属于自己的小空间的小技巧。
JS不会抗议多次声明同一个函数，它只是使用最后声明的版本。
保持唯一性和不共享。
要保持唯一性，首先要为自己的空间挑选一个不会在别处被使用的名字。
function $(id) {
return document.getElementById(id);
}
function alertNodeName(id) {
alert($(id).nodeName);
}
要保证只有自己使用这个$()函数，可以创建一个自执行的匿名函数：
（function() {
//代码
})();
包围函数的第一对括号向脚本返回未命名的函数，随后的一对空括号立即执行返回的未命名函数。
只要把自己所有的代码都写在这个特殊的函数包装内，那么将没有人能够在这个特殊的包装之外访问到你的任何自定义函数或对象。
(function() {
function $(id) {
return document.getElementById(id);
}
function alertNodeName(id) {
alert($(id).nodeName);
}
window['myNamespace'] = {};
window['myNamespace']['showNodeName'] = alertNodeName;//赋值给window的一个方法，就可以在位于这个命名空间外部的其他脚本中引用这个方法了。
}) ();
myNamespace.showNodeName('example');//这个方法是在匿名函数的命名空间中执行，仍可访问专有$()函数和该命名空间中的其他对象，以及作用域链中位于这个包装外部的所有对象。
使用这种伪命名空间可以封装并保护自己的所有函数、对象和变量。而且，由于它们位于同一个函数中，所以可以互相访问。不过脚本中其他部分中的代码将无法使用你的函数。
1.2.5通过可重用的对象把事情简化
1.开始构建ADS库(Advanced DOM Scripting)
首先，需要一个唯一的命名空间。
网友评论