帮你读《JavaScript高级程序设计（第3版）》--第2章：在HTML使用JavaScript

2年前 (2022) 程序员胖胖胖虎阿

182 0 0

2.1 `<script>`元素

HTML5中为<script>元素定义了下列6个属性
- async：可选；表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本；只对外部脚本有效；
- charset：可选；表示通过src属性置顶的代码的字符集；大多数浏览器会忽略这个值；
- defer：表示脚本可以延迟到文档完全被解析和显示之后再执行；只对外部脚本有效；改变script元素加载顺序
- language：已废弃；
- src
- type：必选；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）
包含在<script>元素内部的JavaScript代码将被从上到下依次解释
不要在代码中的任何位置出</script>字符串，即使是alert('</script>')，但可以使用转义字符“\”解决，eg：alert('<\/script>')
在解析外部JavaScript文件（包括下载该文件）时，与解析嵌入式JavaScript代码一样，页面的处理也会暂时停止
外部JavaScript文件带有.js扩展名，但是这个扩展名不是必需的，因为浏览器不会检查包含JavaScript的文件的扩展名，但是服务器通常还是需要看扩展名决定为响应应用哪种MIME类型
带有src属性的<script>元素中间不应该再出现其他代码，即使有，也只会加载外部src中的脚本文件，<script>元素中间的代码会被忽略

2.1.1 标签的位置

按照传统的做法，所有的<script>元素都应该放在页面的<head>元素中，但是为什么现在不这样做？

首先说，这种做法的目的就是把所有的外部文件的引用都放在相同的地方；

但是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到所有的JavaScript文件都下载、解析、执行完毕之后，才开始呈现页面内容，这会使得浏览器在呈现页面时出现明显的延迟，在这期间页面一片空白，因此现在的通用做法是，将JavaScript引用放在<body>元素中页面内容的后面

2.1.2 延迟脚本--defer属性

这个属性的用途：表明脚本在执行时不会影响页面的构造，即脚本会被延迟到整个页面都解析完毕后再运行（立即下载，但延迟执行）
HTML5规范要求脚本按照他们出现的先后顺序执行，因此几个延迟脚本同时出现的时候，会按照顺序延迟执行，且这些延迟脚本会先于DOMContentLoaded事件
在现实中，延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本
部分浏览器会忽略defer属性，因此，把延迟脚本放在页面底部仍然是最佳选择

2.1.3 异步脚本--async属性

与defer属性不同之处：async的脚本并不保证按照指定他们的先后顺序执行，因此确保脚本之间互不依赖非常重要
建议异步脚本不要在加载期间修改DOM
异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发前或者后执行

2.1.4 在XHTML中的用法----略

2.1.5 不推荐使用的用法--不支持JavaScript的浏览器已经不存在--略

2.2 嵌入代码与外部文件

在HTML中嵌入JavaScript代码没有问题，但是一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码，优点：

可维护性：遍及不用HTML页面的JavaScript会造成维护问题
可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件
适应未来：XHTML和HTML包含外部文件的语法是相同的

2.3 文档模式

IE5.5引入文档模式的概念，这个概念是通过使用文档类型切换实现的，最初的文档模式分为两种：
- 混杂模式：会让IE的行为与包含非标准特性的IE5相同
- 标准模式：让IE行为更接近标准行为
虽然这两种模式主要影响CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行
在此之后，IE又提出一种准标准模式：浏览器特性很多都是符合标准的，这种模式可以通过使用过渡型或者框架集型文档类型来触发
如果在文档开始处没有发现文档类型说明，则所有浏览器都会默认开启混杂模式
准标准模式和标准模式非常接近，一般提到标准模式，指的是除混杂模式以外的其他模式

2.4 `<noscript>`元素

早期浏览器面临一个问题：即当浏览器不支持JavaScript时如何让页面平稳退化。----<noscript>元素
包含<noscript>元素中的内容只有在下列情况才会显示出来：
- 浏览器不支持脚本
- 浏览器支持脚本，但是脚本被禁用
除此之外，浏览器不会呈现<noscript>元素中的内容

本文由mdnice多平台发布

版权声明：程序员胖胖胖虎阿发表于 2022年10月2日下午9:08。
转载请注明：帮你读《JavaScript高级程序设计（第3版）》--第2章：在HTML使用JavaScript | 胖虎的工具箱-编程导航