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

1. 前言

• 书名：《JavaScript DOM 编程艺术（第二版）》
• 看这本书是抱着夯实基础的心态，本文的目的是把JS认识性的知识整理成网络，本文不会出现vue等前沿技术
• 本文基于书中的内容进行提炼与理解，包括：
  • 干货介绍（上篇）
    • JS的起源
    • DOM的起源
    • Ajax的介绍
    • JQuery中$的使用
    • CDN的介绍
  • 编程思想（下篇）
    • 渐进增强
    • 平稳退化
    • 基于性能考虑，优化DOM操作
    • 向CSS学习（解耦）

2. JS的起源

2.1. 动机

JS由Netscape的Brendan Eich研发。在JS出现之前，Web浏览器只是一种文档显示的载体。为了让网页内容不再局限于枯燥的文本，诞生了JS。JS显著得提升了Web文档的可交互性。

2.2. 组成

• ECMAScript
  描述了该语言的语法和基本对象

• 文档对象模型（DOM）
  初代的JS并没有这个概念，是发展过来的。后文将讲到DOM的起源。
  

• 浏览器对象模型（BOM）
  开发者如果需要控制浏览器的行为，如浏览器的前进后退，另开页面等。需要借助诸多个对象。本文暂时不提这些对象的作用。

3. DOM的起源

DOM ——Document Object Model

3.1. 初代JS版本引入了DOM的概念

JS在DOM之前诞生。DOM, 简单来说就是对一套文档内容进行抽象的描述（后文会填充这个概念）。JS的出现让浏览器厂商开始关注了可以在脚本里面去描述文档对象，进而发展出完整的DOM概念，沿用至今。

// 早期js操作图像
document.images[2]
// 早期js操作表单
document.forms['details']

在Netscape和微软公司各自推出第四代浏览器后， 不同厂商在DOM的拓展上做了不同的实现，这便引出了浏览器战争。

3.2. 浏览器战争

• Netscape的DOM操作

var xpos = document.layers['myelement'].left;

• 在IE4中同样的一个DOM操作

var xpos = document.layers['myelement'].leftpos;

• 延伸出的问题
  作为web文档的开发者，并不知道用户是用什么浏览器打开自己的DOM脚本，于是乎就需要编写一些代码去探查客户端运行的浏览器是哪一种

3.3. W3C标准一统天下

• W3C标准下的DOM操作

var xpos = document.getElementById('myelement').style.left;

• 重新定义DOM
  “一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档的内容、结构和样式”
• 影响力
  • 其他编程语言
    当需要PHP、Python、Java之类的程序设计语言去解析XML文档的时候，DOM的知识将会由很大的帮助—— 现在来看，能想到两个例子。爬虫的时候需要解析DOM文档，Spring Boot解析Maven的依赖元信息。
  • 开发者
    只要遵循DOM标准，就可以放心大胆地去做，因为你的脚本无论在哪都不会出现问题。

4. Ajax介绍

Ajax是一种基于JS的异步技术，不同浏览器对这个技术有不同的实现。描述的是打开链接的这一个动作。协作打开链接借助一个XMLHttpRequest对象，摘一段书中的代码：

// 不同的IE版本使用的对象不同
function getHTTPObject()
{
	if (typeof XMLHttpRequest == "undefined")
	{
		XMLHttpRequest = function()
		{
			try{return new ActiveXObject ("Msxml2.XMLHTTP.6.0");}
			catch (e){}
			try{return new ActiveXObject ("Msxml2.XMLHTTP.3.0");}
			catch (e){}
			try{return new ActiveXObject ("Msxml2.XMLHTTP");}
			catch (e){}					
			try{return new ActiveXObject ("Microsoft.XMLHTTP");}
			catch (e){}		
			return false;
		}
		return new XMLHttpRequest();
	}
}

// 使用ajax获取请求对象
var request = getHTTPObject()
// 省略request的api使用演示

• 同步技术
  点了某个链接，请求发送回服务器，然后服务器根据请求返回新的页面，浏览器重新渲染页面
• Ajax
  请求服务的同时页面可以做其他操作，获得服务器响应后只刷新部分页面（数据）。Ajax很好得减少了频繁的页面IO，只对变化的部分进行信息传递，并且可以不阻塞整体页面。

5. JQuery与$

JQuery 是一个JS库（封装）, 简单列举下用法。

• 等价的DOM操作
  • getElementById => $('#elementid')
  • getElementsByTagName => $('.element-class')
  • getelementsByClassName => $('tag') 选择标签为tag的元素
• CSS选择器
  • $('*') 选择所有元素
  • $('tag.className') 选择所有标签为tag类名为className的元素
  • 等等…
• 模板占位符 ${term}
  暂时省略，后端的角度来看，可以看到MyBatis模仿的是这种实现。
• 加载事件
  • 在页面加载后执行一些操作。（窗体加载事件）

  function myFun() {
  }
  $(myFun())
  
  // 上面两行可以合并
  $(function myFun() {
  })
  

  • 其他事件

  // click事件
  $('a').click( function(event){
  })
  

• 使用Ajax
  $.post(url, params, callback)
$.getJSON(url, params, callback)
  等等

6. CDN介绍

如果客户端联网，类似JQuery这种JS库，我们可以很方便的引入进来。

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

访问这种url获取资源将获得CDN带来的好处：

• 很多站点需要使用同一个库，这个库可以托管到公共服务器上，保持多站点的一致性。
• 浏览器可以缓存公共服务器上的文件，提高用户多次加载页面的平均速度。
• 从一个站点跳转到另一个站点，不需要重复下载同一个文件。
• CDN的底层会找到地理位置最近、速度最快的服务器进行下载，进而加快访问速度。

7. 编程思想

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