JavaScript-DOM-编程艺术第2版后面几章

40次阅读

共计 1560 个字符,预计需要花费 4 分钟才能阅读完成。

这是学习笔记,仅供学习所用!


第 5 章 最佳实践

5.1 过去的错误
5.2 平稳退化
网站的访问者完全有可能使用的是不支持 JavaScript 的浏览器,还有一种可能是虽然浏览器支持 javaScript,但用户已经禁用它了(比如,因为讨厌看到弹出广告)。
如果正确地使用了 JavaScript 脚本,就可以让访问者在他们的浏览器不支持 JavaScript 的情况下仍能顺利地浏览你的网站,这就是所谓的平稳退化(graceful degradation),就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成。

5.2.2 内嵌的事件处理函数
<a> 标签的事件处理函数,就是把 onclick 事件处理函数作为属性嵌入 <a> 标签,如下所示:

<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>

因为在上面这条 HTML 指令里使用了 return false 语句,这个链接不会真的被打开。“#”符号是一个仅供文档内部使用的链接记号(单就这条指令而言,“#”是未指向任何目标的内部链接)。在某些浏览器里,“#”链接指向当前文档的开头。把 href 属性的值设置为“#”只是为了创建一个空链接。实际工作全部由 click 属性负责完成。
这样的做法并不推荐,因为它不能平稳退化,如果用户已经禁用了浏览器的 JavaScript 功能,这样的链接将毫无用处。

5.2.3 谁关心这个

// 可以这样
<a href="http://www.example.com/" onclick="popUp('http://www.example.com/'); return false;">Example</a>

// 更推荐这样 
<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>

hfre 属性设置为真实存在的 URL 地址后,即使 JavaScript 已被禁用,这个链接也是可用的。这是一个经典的“平稳退化”的例子。

5.3 向 CSS 学习
5.3.1 结构与样式的分离
CSS 技术的最大优点是,它能够帮助你将 Web 文档的内容结构(标记)和版面设计(样式)分离开来。

5.6 性能考虑
5.6.2 合并和放置脚本
包含脚本的最佳方式就是使用外部文件,因为外部文件与标记能清晰地分离开,而且浏览器也能对站点种的多个页面重用缓存过的相同脚本。
传统上,我们把脚本放在文档的 <head> 区域,这种放置方法有一个问题。位于 <head> 块种的脚本会导致浏览器无法并行加载其他文件。一般来说,根据 HTTP 规范,浏览器每次从同一个域名种最多只能同时下载两个文件,所有其他资源都要等脚本加载完毕后才能下载。
所以把 <script> 标签都放到文档的末尾,</body> 标记之前,就可以让页面变得更快。

第 7 章 动态创建标记

动态添加标记的两种“传统的”技术:

  • document.write 方法
  • innerHTML 属性

利用 DOM 方法来动态创建标记:

  • createElement 方法
  • createTextNode 方法
  • appendChild 方法
  • insertBefore 方法

使用这些方法的关键是将 Web 文档视为节点树。请记住,你用 createElement 或 createTextNode 方法刚刚创建出来的节只是 JavaScript 世界里的孤儿。利用 appendChild 或 insertBefore 方法,可以把这些 DocumentFragment 对象插入某个文档的节点树,让它们呈现在浏览器窗口里。

第 9 章 CSS-DOM

浏览器里看到网页由三层信息构成:

  • 结构层由 HTML 或 XHTML 之类的标记语言负责创建;
  • 表示层由 CSS 负责完成;
  • 行为层负责内容应该如何响应事件这一问题。

正文完
 0