《Javascript DOM编程艺术》--第六章案例研究图片库改进版

标签：

DOM脚本编程有关的问题：平稳退化、向后兼容、分离Javascript。

一. 平稳退化

　　如果禁用了js后，基本功能可以实现吗？

二. 分离Javascript

1. 添加事件处理函数：

　　a. 检查点：普通适用性检测（检测是否支持DOM方法）；针对性检测（检测对象是否存在）

　　　　这是预防性措施。即使以后决定从网页上删除某个标记，也不用担心js报错。此时，体现了js与html分离的重要性。

　　　　原则：想用js给网页添加行为，就不应该让js代码对这个网页的结构有任何依赖。

　　b. 变量名：保留字和关键字不能用做变量名。

　　c. 遍历：

　　d. 改变行为：通过document.getElementsByTagName()方法得到的数组其实是节点列表，是一个由DOM节点构成的集合，这个集合里每个节点都有自己的属性和方法。

2. 共享onload事件：在网页加载完毕之后立即执行，这个事件与window对象相关。原则：如果把几个函数绑定到onload事件上，它们当中只有最后一个函数会被执行（被覆盖掉了）。

　　解决办法一：window.onload = function(){ fn1(); fn2(); ...... }     ---------适用于需要绑定的函数不是很多的场合

　　解决办法二：封装一个函数 addLoadEvent，只有一个参数即打算在页面加载完毕时执行的函数的名字。

　　　　　　　　function addLoadEvent(func) {

　　　　　　　　　　var oldonload = window.onload;

　　　　　　　　　　if ( typeof oldonload != "function" ){

　　　　　　　　　　　　window.onload = func;

　　　　　　　　　　 }else {

　　　　　　　　　　　　window.onload = function(){

　　　　　　　　　　　　　　oldonload();

　　　　　　　　　　　　　　func();

　　　　　　　　　　　　};

　　　　　　　　　　 };

　　　　　　　　};

三. 不要做太多的假设：

1. 三元操作符：

2. nodeName属性：总是返回一个大写字母的值，即使元素在HTML文档里是小写字母。

实际工作中，要决定是否需要检查，因为这些检查针对的是HTML文档有可能不在你控制范围内的情况。理想情况下，你的脚本不应该对HTML文档的内容和结构做太多的假设。

四. 键盘访问：

onkeypress事件处理函数是专门用来处理键盘事件的，按下键盘上任何一个按键都会触发onkeypress事件。在某些浏览器里，甚至包括tab键。

在几乎所有浏览器里，用tab键移动到某个链接然后按下回车键也会触发onclick事件。

五. DOM Core 和 HTML-DOM：

1. DOM Core：并不专属于js，支持DOM的任何一种程序设计语言都可以使用它们。用途也并非仅限于处理网页，它们可以用来处理用任何一种标记语言（比如XML）编写出来的文档。

2. HTML-DOM：只能用来处理web文档。

a. 比如HTML-DOM提供了一个forms对象：document.forms

b. 提供了许多描述各种HTML元素的属性：ele.src

同样的操作既可以只使用DOM Core来实现，也可以使用HTML-DOM来实现。

小结：

1. 尽量让js代码不再依赖于没有保证的假设，为此引入许多项测试和检查。这些使js代码可以平稳退化。

2. 没有使用onkeypress事件处理函数，这使js代码的可访问性得到了保证。

3. 重要的是将js代码从HTML标记文档分离，使js代码不再依赖于HTML文档的内容和结构。

结构与行为的分离程度越大越好！

《Javascript DOM编程艺术》--第六章案例研究图片库改进版

标签：

原文地址：http://www.cnblogs.com/beileiluan/p/5580611.html