超级畅销书《JavaScript DOM 编程艺术》写了什么？-低调大师

超级畅销书《JavaScript DOM 编程艺术》写了什么？

2018-02-27 749

前言：笔者平时看过不少前端相关的书，但由于每本书籍都包含着诸多精彩之处，所以经常在看完书过一段时间后就或多或少地忘记一些学过的内容。故此，为了探索更高效的学习方法，笔者准备在每看完一本书后梳理知识框架，以便日后复习和查证。

img_bddc08638bd57571c9b75c9910a21e5b.jpe

JavaScript DOM 编程艺术

看书名《Javascript DOM 编程艺术》便可得知，这本书主要介绍了JavaScript和DOM的一些基础知识和使用方法，除此之外本书最让人称赞的便是深入浅出地展示了渐进增强、平稳退化、结构和样式分离等编程思想。看完书后，笔者觉得这本书的教学案例比较基础适合新人学习，但是书中所提及的很多编程思想却适合低中级层次的前端开发者学习。

一目录结构简述

全书共有12章节

前3章：介绍了JS简史、JS语法和DOM基础知识

第4到8章：通过教学案例来练习扩充JS和DOM知识，这5章提及了全书的核心编程思想

第9章：介绍了CSS-DOM

第10章：JS实现动画效果的教学

第11章：HTML5的介绍

第12章：综合实例练习

二书中重要知识点梳理

1.JS中的对象分类：

JS中的对象分类

2.节点（node）分类：

节点分类

3.DOM的5个重要方法：

DOM的5个重要方法

4.DOM重要的部分属性：

DOM重要的部分属性

5.DOM动态创建标记的方法：

DOM重要的部分方法

6.JavaScript编写动画的函数：

JavaScript的部分函数

三书中核心编程思想

1.平稳退化

前端开发者需正确地使用JS脚本，可以让访问者在他们的浏览器不支持JavaScript的情况下顺利地浏览你的网站。这就是平稳退化，就是说，虽然某些功能无法使用，但是最基本的操作仍可以顺利完成。

（1）为了完成平稳退化，开发者要尽量避免“javascript:”伪协议的使用。举个例子，我们准备通过"javascript:"伪协议调用popUp()函数：

<a href="javascript:popUp('http://www.example.com/');">Example</a>

这条语句在支持伪协议的浏览器中运行正常，但较老的浏览器尝试打开链接就会失败，支持伪协议但禁用JavaScript功能的浏览器会什么也不做。

（2）为了完成平稳退化，开发者应尽量避免在语句中内嵌事件处理函数。如：

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

上面的HTML语句使用了return false语句，这个链接不会真的被打开。把href属性的值设置为“#“只是为了创建空链接。实际工作由onclick属性负责完成。

但是，这个技巧不支持平稳退化，如果用户禁用了浏览器的JavaScript功能，这样的链接会毫无用处。

（3）为什么要支持平稳退化？谁关心这个？

不得不说，如今绝大部分的用户使用的浏览器都支持JavaScript，但是如果访问用户是搜索机器人（searchbot）。搜索机器人是一种自动化的程序，它们浏览web的目的是为了把各种网页添加到搜索引擎的数据库里。各大搜索引擎都有类似程序。目前，只有极少的搜索机器人理解JavaScript代码。所以不支持平稳退化的网页，它们在搜索引擎上的排名就可能大受损害，也就是不利于SEO。

根据上面的例子，我们如何具体到popUp（）函数做到平稳退化？下面的语句给出了答案：

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

这条语句的精髓在于，对于支持js的用户浏览器，语句通过return false禁止了用户点击链接的默认行为，也就是说点击链接后页面不会跳转。对于不支持js的用户浏览器，由于事件处理函数onclick失效，链接可以正常跳转。

个人反思：

不得不说，如今开发的web应用越来复杂，需求越来越多。如果想保证所有页面都实现平稳退化对我个人而言有些不现实。虽然实现平稳退化利于SEO并可以保证极少数使用老旧浏览器的用户顺利访问网站，但开发者的成本无疑大大增加。

不过，平稳退化仍是一种很好的编程思想，如果熟练掌握平稳退化的思想，无疑会在写出更健壮的web应用。

2.结构与样式分离和JavaScript分离

目前网页是由以下三层信息构成的共同体：

网页的组成

我们都遇见过每个元素都带有style属性的文档，但是这种做法不利于开发人员后期维护和阅读。

为了解决这种问题我们应该将样式全部转移到外部文件。

同理，在元素标签内些写JS代码也是一种不好的习惯，如上文中的例子：

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

此a标签内包含了事件处理函数onclick，相对而言，我们还有一种更好的做法：

<a href="http://www.example.com" id="getpopUp">Example</a>

<script>

    var getpopUp=document.getElementById('getpopUp');

    getpopUp.onclick=function(){

        popUp(this.getAttribute('href'));

        return false;

    }

</script>

这里通过在元素设置”挂钩“的方式，使得结构层与行为层分离，开发者可以更清晰地专注于结构层与行为层的编程。

3.渐进增强

作者说：标记良好的内容就是一切。内容是网站的根本，在给内容加上各种标记后，就可以使用各种CSS指令控制内容的显示效果了。表示层像一张透明的彩色薄膜，可以包裹在文档的结构上，使文档内容呈现各种色彩。但即使去掉这个表示层，文档的内容依然能访问。行为层的应用方式也和表示层一样。

简单来说，去掉样式层和行为层的”包裹“，内容依然能正确的展示给访问者。

举个例子，为了达到最佳”表示“效果，应该把CSS代码从HTML文档中分离出来放在外部文件里。

4.向后兼容

访问你网站的访问者可能未启用JavaScript，此外，有些古老的浏览器很可能不理解DOM提供的方法和属性。因此，即使某位用户在访问你的网站时使用的是支持JavaScript的浏览器，某些脚本也不一定能正常工作。

针对这一问题的最简单的解决办法是，检测浏览器对JavaScript的支持程度。

这个解决办法很容易实现，只要在某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式求值true（方法存在）或者false（方法不存在）来决定采用怎样的行动。这种检测手段称为对象检测（object detection）。

举个例子：

function myFunction(){

if( !getElementById || !getElementsByTagName ) return false;

}

5.性能考虑

（1）尽量少访问DOM和尽量减少标记

访问DOM的方式会对脚本的性能产生巨大影响，每当浏览器查询DOM中的某个元素时都会搜索整个DOM树。因此可以减少函数重复做一件事的情况，可以将一些值存入全局变量内，以此提高脚本性能。

（2）合并和放置脚本

将逻辑简单的脚本合并到一个脚本文件中，经验证明，请求一个大文件的时间比请求多个小文件的时间要短很多。

此外，一般将<script>标签放在</body>前，位于<head>块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTT规范，浏览器每次只能从同一域名最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他文件，即使是不同域名的文件也不会下载，所有其他资源必须等脚本加载完毕后才能下载。

（3）压缩脚本

将开发版的脚本压缩成为生产版，在压缩的途中会去掉不必要的字节，如空格和注释。

推荐压缩工具：Douglas Crockford的JSMin、雅虎的YUI Compressor和谷歌的Closure Compiler。

6.对函数进行抽象

有经验的开发者在编程时会对有复用潜力的函数进行抽象，经过抽象的函数可以变得更加通用。把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象（abstraction）。

为了便于理解这个概念，我们举例说明：

抽象前：

function styleHeader(){

if(!document.getElementsByTagName) return false;

var headers=document.getElementsByTagName("h1");

headers[1].setAttribute('title','test')；

}

抽象后：

function styleHeader(tag,setContent){

if(!document.getElementsByTagName) return false;

var headers=document.getElementsByTagName(tag);

headers[1].setAttribute('title',setContent)；

}

7.组建自己的函数库

我们在开发web应用的过程中经常会编写可复用的函数，因此我们可以将这些可复用的函数积累下来，组建自己的函数库。这类函数应当满足通用性和平稳退化的特点。下面我们举例说明：

很多函数需要满足在HTML文档完成加载之后执行，否则DOM是不完整的，函数会加载失败。

网页在加载完毕时会触发一个onload事件，这个事件与window对象相关联。为了完美解决这个问题我们可以封装一个函数：

function addLoadEvent(func){

var oldonload=window.onload;

if( typeof window.onload != 'function'){

window.onload=func;

}else{

window.omload=function(){

oldonload();

func();

}

}

}

这个函数非常的实用，尤其在代码变得很复杂的时候。无论打算在页面加载完毕时执行多少个函数，只要多写一条调用语句就好。

四总结

本书只是向读者展示了通过少数DOM方法所能实现的少数功能，但是书中提及编程思想却是值得笔者思考和探索的精华。

因为书中介绍的知识点比较基础，所以笔者没有详细地归纳总结基础知识点，本文的重点是对书中作者提及的编程思想进行思考和梳理。若文章有不足之处，望大家批评指正！

如果本文对您有所帮助，请您在下方点赞，为作者加油！谢谢~

微信关注我们

原文链接：https://yq.aliyun.com/articles/638824

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Java-学习笔记-4-抽象

不足之处，欢迎专家、同行、读者批评指正。上一篇在说类库文件时提到了封装，不够严谨，这一篇来简单讲讲。抽象和封装，这是面向对象程序设计中的一个重要思想。换句话说，是思维方式的转变。以前我们编程，是围绕某一个问题的，研究它的过程是怎样的。现在嘛，是考虑不同的对象之间的信息传递，更适合来写不同对象交互信息的业务。先说说抽象。最关键的在于属性和功能。举个例子吧，比如说现在你要去图书馆借书，那对你来说，你的属性就是个人ID，借阅权限，借了几本书等等，图书馆那边对象很多，比如说管理员、书等等。你们之间的业务往来，就可以看作功能。更直白点说，属性通常就是信息的那个值，编程时我们写成int的这种，所谓的功能就是对这个值进行操作的函数或者说方法。当然啦，一个类之中嵌套另一个类，并且把里边的那个类看做是成员变量，这种情况也是有的，不过在理解含义时可以把它和上文的“值”看作一回事。

2018-02-28

618

不足之处，欢迎专家、同行、读者批评指正。抽象和封装其实可以放到一起来记。封装，字面意思看起来像是封上口打包装起来——实际上就是这个意思。只不过，这里我们打包的不是快递包裹，是代码的源文件。Java是有包管理机制的。这个包，在资源管理器里看的话，是一个个的文件夹——但反过来不能说文件夹就是包。你看，封装，打包，命名的时候就是这么直白。这个机制，是对访问权限的限制。不过它限制的不是我们。作为开发者，我们自己所负责的几个包中，所有代码都是可以看到的。但是，它限制了不同包的源文件中的变量或者方法，访问其他源文件中的变量或者方法的权限。关于这个，和C++相似，但不一样。具体可以查阅文档。搜索的关键字可以是public、private等。是的，文档永远是第一手信息。

2018-02-28

607

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。