【前端】著作阅读笔记——JavaScript DOM的前世今生及编程思想（下）

本文探讨了JavaScript编程中的渐进增强和平稳退化策略，确保无JavaScript环境下的功能可用性。同时，提出了优化DOM操作以提升性能的方法，并借鉴CSS的解耦思想来组织代码。通过实例展示了如何实现这些原则，以提高网站的健壮性和用户体验。

1. 前言

干货介绍（上篇）
编程思想（下篇）
- 渐进增强
- 平稳退化
- 基于性能考虑，优化DOM操作
- 向CSS学习（解耦）

2. 编程思想

本文不追求前沿技术，也不讨论作者那个年代提出的技术方案放到现在的性价比。旨在总结《JavaScript DOM 编程艺术（第二版）》中作者所沉淀的编程思想。

2.1. 渐进增强

技术选型上，我认为考虑渐进增强是有必要的。如果你从一开始设计就以Ajax为起点，那么以后确实很难把它从成品站点中剥离出来。使用Ajax，实际上是默认了用户都允许JavaScript在浏览器运行。

早些年在大学使用选课系统时，就出现过部分同学打开网页但是按按钮没有反应的情况，是因为一部分同学使用比较旧的浏览器或是广告拦截工具禁用了JS。这种现象引出一个反馈：有什么理由让没有JavaScript的用户不能选课呢？

解决问题
先用传统的html表单提交实现一版功能，即整个页面提交给服务器再又服务器返回给前端整体页面。提交表单使用submit事件，因此只需要通过onsubmit事件捕获提交请求，捕获请求后用ajax代理原请求，如果没有JS支持那么放弃代理使用原请求。
细节
在禁用JS的环境下从Ajax退化到html表单提交，代码层面需要支持平稳退化

2.2. 让JS支持平稳退化

不支持平稳退化的代码：

<a id="a1">exp</a>
<script>
document.getElementById("a1").addEventListener("click",function() {
   // Ajax操作
});
</script>

支持平稳退化的代码

<!-- href="url" 保证JS禁用的情况下a标签也能打开链接 -->
<a id="a1" href="url">exp</a>
<script>
document.getElementById("a1").addEventListener("click",function() {
    // Ajax操作
    return false;
});
</script>

代码参考至：https://blog.youkuaiyun.com/weixin_40312266/article/details/102812690

2.3. 基于性能考虑，优化DOM操作

DOM操作的时间复杂度根据节点数增长，在实现功能时一定要想到减少DOM操作

性能稍差的实现：

// 两次调用document.getElementByTagName("a")
if (document.getElementByTagName("a").length > 0) {
	var links = document.getelementsByTagName("a");
	for (var i = 0; i<links.length; i++) {
		// 对每个链接进行处理
	}
}

同样实现功能，但是只搜索一次DOM，思想特别简单，就是缓存变量

// 一次调用document.getElementByTagName("a")
 var links  = document.getElementByTagName("a");
 if (links.length > 0) {
	 for (var i = 0; i<links.length; i++) {
		// 对每个链接进行处理
	}
 }

2.4. 向CSS学习

JS与html解耦, 使用DOM获取标签，再对标签设置触发事件

<!-- html -->
<a id="a" href="url">exp</a>
<!-- js-->
<script>
 var links  = document.getElementByTagName("a");
 if (links.length > 0) {
	 for (var i = 0; i<links.length; i++) {
	 	// 使用JQuery还有更简洁的写法
		if (links[i].getAttribute("class") === "popup") {
			links[i].onclick = function() {
				popUp(this.getAttribute("href));
				return false;
			};
		}
	}
 }
</script>

html被设置事件（onload指页面载入完成后绑定事件，一次绑定后支持多次调用）

<script>
window.onload = prepareLinks;
function prepareLinks() {
	var links  = document.getElementByTagName("a");
 	if (links.length > 0) {
		for (var i = 0; i<links.length; i++) {
	 		// 使用JQuery还有更简洁的写法
			if (links[i].getAttribute("class") === "popup") {
				links[i].onclick = function() {
					popUp(this.getAttribute("href));
					return false;
				};
			}
		}
 	}
} 	
</script>