首页 阅读DAY1 JavaScript高级程序设计 1-2章
文章
取消

阅读DAY1 JavaScript高级程序设计 1-2章

发表于 2026/04/15 更新于 2026/04/17
作者 Tonite14
22 分钟阅读

开始阅读JavaScript高级程序设计（第5版）学习JS，总共有1000+页，非常全面，短期看完不太现实，找到了一篇博客，花些时间跟着这篇博客过一下红宝书。

JavaScript高级程序设计（第5版）微信读书

红宝书《JavaScript高级程序设计（第5版）》学习大纲 - 大前端全栈开发 - SegmentFault 思否

简短的历史回顾：

在九十年代早期，所有数据都由服务端处理验证，而当时带宽很低，如果提交数据有错，经过服务端验证后再返回再次修改再上传的时间花销是巨大的，因此在用户本地的客户端也分担数据的部分验证工作显得很必要， JavaScript 就是基于这种背景诞生的。一开始的计划是在客户端和服务端都同步使用它。

此时的 JS 还没有统一标准，微软为了推广自己的IE3，也设计了自己名为 JScript 的 JS 实现。为弥合分野，在九十年代末期，ECMA制定了ECMA-262标准。

自此以后，各家浏览器均以ECMAScript作为自己JavaScript实现的依据，虽然具体实现的程度各有不同。

也是基于这种背景，JS可以说并不是一门编程语言，而是由API集合支撑的一系列 ES 实现。

image-20260415131924205

JavaScript实现：

完整的JavaScript实现包含以下几个不同的部分，在浏览器中，每个HTML文档都对应一个window对象和一个document对象：

· 核心（ECMAScript，即ECMA-262标准）

· DOM（Document Object Model，文档对象模型）

· BOM（Browser Object Model，浏览器对象模型）

image-20260415141244366

ECMAScript：

在基本的层面，ECMAScript描述这门语言的如下部分：语法、类型、语句、关键字、保留字、操作符和全局对象。ECMAScript只是对实现这个规范描述的所有这些部分的一门语言的称呼，而JavaScript实现了ECMAScript。

image-20260415141633451

DOM：

DOM（Document Object Model，文档对象模型）是XML的一套API（Application Programming Interface，应用编程接口），经过扩展可以在HTML中使用。DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。比如下面的HTML页面：

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p> Hello World!</p>
    </body>
</html>

这些代码通过DOM可以表示为一组分层节点，使用DOM API，可以轻松地删除、添加、替换、修改节点。

image-20260415142516373

DOM标准同样也是弥合不同浏览器分野的产物，DHTML即html+css+javascript的集成。

image-20260415142649440

BOM：

IE3和Netscape Navigator 3最早推出了BOM（Browser Object Model，浏览器对象模型）API，用于支持访问和操作浏览器的窗口。使用BOM，开发者可以操控浏览器显示的页面之外的部分。而BOM真正独一无二的地方，当然也是问题最多的地方，就是它是唯一一个没有相关标准的JavaScript实现。HTML5的出现改变了这个局面，这个版本的HTML以正式规范的形式涵盖了尽可能多的BOM特性。由于HTML5的出现，之前很多与BOM有关的问题都迎刃而解了。

总的来说，BOM主要针对浏览器窗口和窗格(frame)，不过人们通常会把任何特定于浏览器的扩展都归在BOM的范畴内。

在js中，操作DOM的核心对象是document，操作BOM的核心对象是window，document是window的属性，DOM包含在BOM中。虽然BOM没有统一标准，但现代浏览器基本实现了一致的API。框架开发中，尽量使用框架提供的抽象，避免直接操作BOM/DOM。

1
2
3
4
5

// DOM的核心对象是document
document.getElementById('myId');      // 通过ID获取元素
document.querySelector('.myClass');   // 通过选择器获取元素
document.createElement('div');        // 创建新元素
document.body.appendChild(newDiv);    // 添加元素到文档

1
2
3
4
5

// BOM的核心对象是window
window.alert('提示信息');            // 弹出对话框
window.location.href = 'https://...'; // 跳转页面
window.localStorage.setItem('key', 'value'); // 本地存储
window.navigator.userAgent;          // 浏览器信息

HTML中的JavaScript：

<script>元素：

将JavaScript插入HTML的主要方法是使用<script>元素，它有下列8个属性。

image-20260415145351759

使用<script>的方式一般有两种：

通过它直接在网页中嵌入JavaScript代码，以及通过它在网页中包含外部JavaScript文件。一般来说，在<script>元素中的代码被解释完成之前（包括下载代码和执行代码两步），此元素下方的页面其余内容不会被加载，也不会被显示。

如果使用 async 属性，则在下载时不会阻塞html，但在下载完后会立刻执行，执行时会造成阻塞；如果使用 defer 属性，会异步形式与其他资源同时立刻下载，但在html解析完成后执行，全程不会阻塞。一般来说，关键的脚本采用普通模式，非关键脚本可考虑采用异步形式。异步脚本不应该在加载期间修改DOM，使用异步脚本也相当于隐式地告诉页面你不会使用document.write，不过好的Web开发实践根本就不推荐使用这个方法（避免直接操作DOM）。

DOMContentLoaded 是浏览器提供的一个重要事件，表示初始的HTML文档已经完全加载和解析完成，不需要等待样式表、图像和子框架的加载完成，此时可以可以开始操作页面元素。 load 代表所有资源（图片、CSS等）加载完成，会在 DOMContentLoaded 后执行。

1
2
3
4
5
6
7
8

<script async src="script.js"></script>
<!--
  特点：
  1. 异步下载，不阻塞HTML解析
  2. 下载完成后立即执行，执行时会阻塞HTML解析（保证在页面的load事件前执行，但可能会在DOMContentLoaded之前或之后）
  3. 多个async脚本执行顺序不确定
  4. 不适合有依赖关系的脚本
-->

1
2
3
4
5
6
7
8

<script defer src="script.js"></script>
<!--
  特点：
  1. 异步下载，不阻塞HTML解析
  2. 等到HTML解析完成后才执行（DOMContentLoaded之前）
  3. 多个defer脚本按顺序执行
  4. 适合有依赖关系的脚本
-->

要嵌入行内JavaScript代码，可以直接把代码放在<script>元素中，包含在<script>内的代码会被从上到下逐行解释。如果要插入标签之类的，就使用转义字符辅助插入。

要引入外部文件中的JavaScript代码，必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件，比如：

1

<script src="example.js"></script>

使用了 src 属性的<script>元素不应该在<script>和</script>标签中再包含额外的JavaScript代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，忽略标签中的行内代码。

注意：按照惯例，外部JavaScript文件的扩展名是 .js。这不是必需的，因为浏览器不会检查外部JavaScript文件的扩展名。这就为使用服务器端脚本语言动态生成JavaScript代码，或者在浏览器中将JavaScript扩展语言（如TypeScript，或React的JSX）转译为JavaScript提供了可能性。不过要注意，服务器经常会根据文件扩展名来确定响应的正确MIME类型。如果不打算使用 .js扩展名，一定要确保服务器能返回正确的MIME类型。

外部引用：

<script>元素的一个最为强大、同时也备受争议的特性是，它可以包含来自外部域的JavaScript文件。跟<img>元素很像，<script>元素的src属性可以是一个完整的URL，而且这个URL指向的资源可以跟包含它的HTML页面不在同一个域中。

1

<script src="http://www.example.com/afile.js"></script>

浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源，假定是一个JavaScript文件。这个初始的请求不受浏览器同源策略限制，但返回并被执行的JavaScript则受限制。当然，这个请求仍然受父页面HTTP/HTTPS协议的限制。来自外部域的代码会被当成加载它的页面的一部分来加载和解释。

同源策略：浏览器的一种安全机制，它限制来自不同协议、域名或端口的脚本与当前页面资源进行交互，以防止恶意网站窃取用户数据。只有两个URL在协议、域名和端口完全相同，才被认为是同源。

这个能力可以让我们通过不同的域分发JavaScript。不过，引用放在别人服务器上的JavaScript文件时要格外小心，因为恶意的程序员随时可能替换这个文件。在包含外部域的JavaScript文件时，要确保该域是自己所有的，或者该域是一个可信的来源。<script>标签的integrity属性是防范这种问题的一个武器。

动态加载脚本：

除了<script>标签，还有其他方式可以加载脚本。因为JavaScript可以使用DOM API，所以通过向DOM中动态添加script元素同样可以加载指定的脚本。只要创建一个script元素并将其添加到DOM即可。

1
2
3

let script = document.createElement('script');
script.src = 'myscript.js';
document.head.appendChild(script);

当然，在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求。默认情况下，以这种方式创建的<script>元素是以异步方式加载的，以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。取决于你的应用逻辑以及具体的使用方式，动态加载脚本可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

1

<link rel="preload" href="myscript.js">

标签设置位置：

过去一般将所有<script>元素都被放在页面的<head>标签内，这种做法的主要目的是把外部的CSS文件和JavaScript文件都集中放到一起。

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script src="example1.js"></script>
  <script src="example2.js"></script>
  </head>
  <body>
    <!-- 这里是页面内容 -->
  </body>
</html>

不过，把所有JavaScript文件都放在<head>里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面。

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
  </head>
  <body>
    <!-- 这里是页面内容 -->
    <script src="example1.js"></script>
    <script src="example2.js"></script>
  </body>
</html>

这样一来，浏览器会在处理JavaScript代码之前先渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

行内代码与外部文件：

虽然可以直接在HTML文件中嵌入JavaScript代码，但通常认为最佳实践是尽可能将JavaScript代码放在外部文件中。不过这个最佳实践并不是强制性规则，其推荐使用外部文件的理由如下。

可维护性：JavaScript代码如果分散到很多HTML页面，会导致维护困难。而用一个目录保存所有JavaScript文件，则更容易维护，这样开发者就可以独立于使用它们的页面来编辑代码。

缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。

文档模式：

IE5.5发明了使用doctype切换文档模式的概念。最初的文档模式有两种：混杂模式(quirks mode)和标准模式(standards mode)。前者让所有IE版本像IE5一样（支持一些非标准的特性），模拟老式浏览器（如IE5）的行为，以支持那些依据旧浏览器、非标准规范编写的网页。后者让IE所有版本具有兼容标准的行为，让浏览器尽可能遵循W3C等标准组织制定的规范来处理和渲染网页。

随着浏览器的普遍实现，又出现了第三种文档模式：准标准模式(almost standards mode)。这种模式下的浏览器支持很多标准的特性，但是没有标准模式规定得那么严格，在大部分遵循标准的同时，保留对少量历史“怪异”行为的支持，以实现更好的向后兼容。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。

混杂模式在所有浏览器中都以省略文档开头的doctype声明作为开关。

标准模式通过下列几种文档类型声明开启：

1
2
3
4
5
6
7
8
9
10

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html>

准标准模式通过过渡性文档类型(Transitional)和框架集文档类型(Frameset)来触发：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，很少需要区分，后面所说的标准模式，指的就是除混杂模式以外的模式。

文档模式是浏览器为了“理解”不同年代、不同标准程度的网页代码，而切换的几套不同的“规则手册”。 现代Web开发统一使用 <!DOCTYPE html>来锁定最规范、最一致的“标准模式规则手册”。

1

<!DOCTYPE html>

<noscript>元素：

用于给不支持JavaScript的浏览器提供替代内容。虽然所有现代浏览器都支持JavaScript，但对于禁用JavaScript的浏览器来说，这个元素仍然有它的用处。

<noscript>元素可以包含任何能出现在<body>中的HTML元素，<script>除外。在下列两种情况下，浏览器将显示包含在<noscript>中的内容：

浏览器不支持脚本；

浏览器对脚本的支持被关闭。

满足其中任何一个条件，包含在<noscript>中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script defer="defer" src="example1.js"></script>
    <script defer="defer" src="example2.js"></script>
  </head>
  <body>
    <noscript>
      <p>This page requires a JavaScript-enabled browser.</p>
    </noscript>
  </body>
</html>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

JavaScript高级程序设计
JS 阅读
本文由作者按照 CC BY 4.0 进行授权
最近更新
文章内容

重启DAY3 二分查找

阅读DAY1-1 JavaScript高级程序设计 3章上