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的底层会找到地理位置最近、速度最快的服务器进行下载,进而加快访问速度。