《JavaScript_DOM编程艺术》笔记

 

其中一些是我自己的理解，绝大部分是照抄书上的话，虽然记下来的有些东西已经过时、不适用了，但思想还是很值得学习。

---

结构化程序设计原则

函数应该只有一个入口和一个出口。

但在实际工作中，过分拘泥于这项原则往往会使代码变得非常难以阅读。如果一个一个函数有多个出口，只要这些出口集中出现在函数的开头部分，就可以接受。

---

平稳退化

让高配表现出应有的效果，同时又让低配降级体验，不至于失效，流失用户。

渐进增强

考虑兼容，就是一开始就从最基础的出发，在低配可以满足基础需求使用的情况下，额外增加高配才能使用的功能。

---

不要做太多的假设

不要做太多的假设，不要想当然，而是要考虑到方方面面，只要是有可能出现的。

---

Ajax

要构建成功的Ajax应用，关键在于将Ajax功能看作一般的JavaScript增强功能，在平稳退化的基础上求得渐进增强。通过Ajax实现的应用一定也可以通过其他非Ajax技术来实现。

如果你一开始设计就以Ajax为起点，那么以后确实很难把它从成品站点中剥离出来，再额外提供一个不适用Ajax的版本。但是如果一开始你的应用就是基于老式的页面刷新机制构建的，那么就可以在既有框架基础上，用Ajax拦住发送到服务器的请求，并将请求转交给XMLHttpRequest对象处理。这种情况下，Ajax功能就扮演了一个位于常规站点之上的层。构建Ajax网站的最好方法，也是先构建一个常规的网站，然后Hijax（渐进增强地使用Ajax）它。

想一想登录表单，构建它最简单的办法就是按照老传统，让表单把整个页面都提交到服务器，然后服务器再发回来一个包含反馈的新页面。所有处理操作都有服务器上完成，而用户在表单输入的数据则有服务器负责取得并与保存在数据库里的数据进行比较，看是不是真的存在这么个用户。然后为了给这个登录表单添加Ajax功能，就需要拦截提交表单的请求(Hijax嘛)，让XMLHttpRequest请求来代为发送。提交表单出发的是submit事件，因此只要通过onsubmit事件处理函数捕获该事件，就可以取消它的默认操作(提交整个页面)，然后代之以一个新的操作：通过XMLHttpRequest对象向服务器发送数据。
拦截了登录表单的提交请求之后，登录过程就可以让用户感觉跟方便。响应时间加快了，不必刷新整个页面了。可是万一用户的浏览器没有启用JavaScript呢？没关系，登录表单照样能让用户正常登陆，只不过所花的时间要长一点，用户体验没有那么流畅罢了。毕竟，处理登录验证的操作都在服务器上啊，有什么理由让没有JavaScript的用户不能登陆呢！有些应用如果没有了Ajax而只依靠页面刷新，用户的每一次操作可能都要等很长时间，但慢一点的退化的体验，是不是仍然要比完全没有体验更好呢？

---

检查nodeType属性值

在编写DOM脚本时，你会想当然地认为某个节点肯定是一个元素节点，这是一个相当常见的错误，如果没有百分之百的把握，就一定要去检查nodeType属性值，有很多DOM方法只能用于元素节点，如果用在了文本节点上，就会出错。

---

性能考虑

 

• 尽量少访问DOM和尽量减少标记

访问DOM的方式对脚本性能会产生非常大的影响，不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。

 

• 尽量把外部脚本合并到一个脚本文件中，这样就可以减少加载页面时发送的请求数量，这在性能优化时是首先考虑的。
• 脚本在标记中的位置对页面的初次加载时间也有很大影响。

传统上，我们都把脚本放在文档的区域(如图像或其他脚本)。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载。把所有
下面是推荐给读者的几个有代表性的代码压缩工具：Douglas Crockford的JSMin、雅虎的YUI Compressor、谷歌的Closure Compiler这些工具都有选项，可以在必要时用来最大程度地压缩文件。

---