JavaScript DOM编程艺术读后感（1）—— 平稳退化

时间：2021-12-05 09:59:16

　　最近，在读《JavaScript DOM编程艺术（第二版）》这本书，想着将自己的读后感记录下来，作为记忆吧。

　　其实我并不是最近才刚开始读这本书的，我读了有一段时间了。我是一名web前端开发人员，喜欢前端，但是我不喜欢只知其然而不知其所以然的这个感觉，它让我感觉到恐惧。所以我决定充实一下自己的大脑。现在的人一说学习，都跑去网上看视频，跟着视频敲代码，说实话，这是一种快速入门的方法，能让我们快速的掌握这些开发技巧。但是也只有这点作用了，这就像工厂里面的工作一样，假如你是让别人告诉你第一步做什么，第二步做什么，第三步做什么而不去想为什么这么做，那么你也只能是最底层的一名工作人员而已，机械的重复这个工作，这也就是人们常说的码农。

　　我是个较真的人，我每次碰到问题的时候，我的第一个想法就是为什么。为什么会出现这个问题，它是由什么原因产生的，该怎么解决呢？我特别讨厌那种说法，别管其他的，能解决就行了。我认为这是一种不负责任的说法，但是公司就需要这种做法，公司追求的是效率，我也只能随遇而安了，但是在下面我还是会找原因然后才是解决这个问题。随着对前端的深入了解，越来越发现自己的基础知识的不足，所以又重新拿起了书本，开始了枯燥的学习生活。

　　读了这本书，我对平稳退化的印象比较深。联系了之前的那些做法，仔细想想确实是这个样子的。

　　什么是平稳退化呢？其实也没有一个准确的定义，我来说说我的理解吧。通俗一点就是让自己的网页可以在所有浏览器上正常显示。其实这个听起来很容易，但是做起来却一点也不容易。

　　首先，大家注意了没有我们写前端页面的时候css要放在head里面，然后是body里面的文档结构，最后才是js代码。但是在实际的工作当中我发现好多同事都不是这么做的，他们写的都比较随意，例如：js和css都写在head里面，这是他们的一种习惯。但是，假如你的js里面有问题，就会影响页面的正常加载。有些地方甚至会出现乱码，影响网页的用户体验。这就很严重了，但是有人肯定又要说我写的代码都测试过了，js是不会报错的。这个可不敢打包票，因为浏览器的兼容性在那放着呢。举个简单的例子document.getElementsByClassName()，这是一个很简单的DOM方法，大家用的也都很普遍，但是IE8不支持这个方法。当然我举的是个很简单的例子，也容易解决，我想表达的就是在不同的浏览器的版本中这种情况特别容易出现。书上提供了一种方法：

function displayAbbreviations() {

	if (!document.getElementsByTagName) return false;

	if (!document.createElement) return false;

	if (!document.createTextNode) return false;

	//取得缩略词

	var abbreviations = document.getElementsByTagName("abbr");

	//判断是否存在这个元素，没有的话退出来

	if (abbreviations.length < 1) return false;

	var defs = new Array();

	//遍历缩略词

	for (var i = 0; i < abbreviations.length; i++) {

		var current_abbr = abbreviations[i];

		if (current_abbr.length < 1) return false;

		var definition = current_abbr.getAttribute("title");

		var key = abbreviations[i].lastChild.nodeValue;

		defs[key] = definition;

	}

	//创建自定义列表

		var dlist = document.createElement("dt");

	for (key in defs) {

		var definition = defs[key];

		//创建定义标题

		var dtitle = document.createElement("dl");

		var dtitle_text = document.createTextNode(key);

		dtitle.appendChild(dtitle_text);

		var ddesc = document.createElement("dd");

		var ddesc_text = document.createTextNode(definition);

		ddesc.appendChild(ddesc_text);

		//把他们添加到定义列表

		dlist.appendChild(dtitle);

		dlist.appendChild(ddesc);

	}

	//创建标题

	var header = document.createElement("h2");

	var header_text = document.createTextNode("Abbreviations");

	header.appendChild(header_text);

	//将标题添加到页面主体

	document.body.appendChild(header);

	//把定义列表添加到页面主体

	document.body.appendChild(dlist);

}

大家可以看下我上面的代码，很容易就可以发现一个问题，就是我的这个方法的最前面有几个判断，这几个判断就是为了预防这一种情况出现的，虽然代码量增加了，但是更加保险了，最多就是页面中的某个功能会缺失，但是整体页面都能正常显示，js都能正常加载。这种做法使得代码量增加的，但是好处是显而易见的。我认为写代码也是一种习惯，我们应该从现在就开始养成一个良好的编码习惯，这会让我们离成功更进一步的。

相关文章