前言：笔者平时看过不少前端相关的书，但由于每本书籍都包含着诸多精彩之处，所以经常在看完书过一段时间后就或多或少地忘记一些学过的内容。故此，为了探索更高效的学习方法，笔者准备在每看完一本书后梳理知识框架，以便日后复习和查证。
看书名《Javascript DOM 编程艺术》便可得知，这本书主要介绍了JavaScript和DOM的一些基础知识和使用方法，除此之外本书最让人称赞的便是深入浅出地展示了渐进增强、平稳退化、结构和样式分离等编程思想。看完书后，笔者觉得这本书的教学案例比较基础适合新人学习，但是书中所提及的很多编程思想却适合低中级层次的前端开发者学习。
全书共有12章节
前3章：介绍了JS简史、JS语法和DOM基础知识
第4到8章：通过教学案例来练习扩充JS和DOM知识，这5章提及了全书的核心编程思想
第9章：介绍了CSS-DOM
第10章：JS实现动画效果的教学
第11章：HTML5的介绍
第12章：综合实例练习
1.JS中的对象分类：
2.节点（node）分类：
3.DOM的5个重要方法：
4.DOM重要的部分属性：
5.DOM动态创建标记的方法：
6.JavaScript编写动画的函数：
前端开发者需正确地使用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应用。
目前网页是由以下三层信息构成的共同体：
我们都遇见过每个元素都带有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>
这里通过在元素设置”挂钩“的方式，使得结构层与行为层分离，开发者可以更清晰地专注于结构层与行为层的编程。
作者说：标记良好的内容就是一切。内容是网站的根本，在给内容加上各种标记后，就可以使用各种CSS指令控制内容的显示效果了。表示层像一张透明的彩色薄膜，可以包裹在文档的结构上，使文档内容呈现各种色彩。但即使去掉这个表示层，文档的内容依然能访问。行为层的应用方式也和表示层一样。
简单来说，去掉样式层和行为层的”包裹“，内容依然能正确的展示给访问者。
举个例子，为了达到最佳”表示“效果，应该把CSS代码从HTML文档中分离出来放在外部文件里。
访问你网站的访问者可能未启用JavaScript，此外，有些古老的浏览器很可能不理解DOM提供的方法和属性。因此，即使某位用户在访问你的网站时使用的是支持JavaScript的浏览器，某些脚本也不一定能正常工作。
针对这一问题的最简单的解决办法是，检测浏览器对JavaScript的支持程度。
这个解决办法很容易实现，只要在某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式求值true（方法存在）或者false（方法不存在）来决定采用怎样的行动。这种检测手段称为对象检测（object detection）。
举个例子：
function myFunction(){
if( !getElementById || !getElementsByTagName ) return false;
}
（1）尽量少访问DOM和尽量减少标记
访问DOM的方式会对脚本的性能产生巨大影响，每当浏览器查询DOM中的某个元素时都会搜索整个DOM树。因此可以减少函数重复做一件事的情况，可以将一些值存入全局变量内，以此提高脚本性能。
（2）合并和放置脚本
将逻辑简单的脚本合并到一个脚本文件中，经验证明，请求一个大文件的时间比请求多个小文件的时间要短很多。
此外，一般将<script>标签放在</body>前，位于<head>块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTT规范，浏览器每次只能从同一域名最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他文件，即使是不同域名的文件也不会下载，所有其他资源必须等脚本加载完毕后才能下载。
（3）压缩脚本
将开发版的脚本压缩成为生产版，在压缩的途中会去掉不必要的字节，如空格和注释。
推荐压缩工具：Douglas Crockford的JSMin、雅虎的YUI Compressor和谷歌的Closure Compiler。
有经验的开发者在编程时会对有复用潜力的函数进行抽象，经过抽象的函数可以变得更加通用。把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象（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)；
}
我们在开发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方法所能实现的少数功能，但是书中提及编程思想却是值得笔者思考和探索的精华。
因为书中介绍的知识点比较基础，所以笔者没有详细地归纳总结基础知识点，本文的重点是对书中作者提及的编程思想进行思考和梳理。若文章有不足之处，望大家批评指正！
如果本文对您有所帮助，请您在下方点赞，为作者加油！谢谢~
微信关注我们
转载内容版权归作者及来源网站所有！
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。
为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。
Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。
Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。
扫码在手机上查看文章
扫描二维码，手机阅读更方便
有任何问题或合作意向欢迎联系我们
Email: 99873273@qq.com
QQ: 99873273
