js高级程序设计阅读之第一二章
一、js介绍
js组成
- ECMAScript
- 文档对象模型DOM
- 浏览器对象模型BOM
宿主环境
- 浏览器
- Node.js
- (Adobe Flash)
DOM
提供与网页内容交互的方法和接口
- DOM是一个应用编程接口, 将整个html页面抽象为一组分层节点, 包含不同的数据.
- DOM使得不刷新页面就可以修改页面外观和内容
- DOM并未只能通过JavaScript访问
BOM
提供与浏览器交互的方法和接口
- 主要针对浏览器窗口和子窗口(frame), 但通常人们把任何特定于浏览器的扩展都归在BOM范畴内.
- 弹出新浏览器窗口的能力
- 移动、缩放和关闭浏览器窗口的能力
navigator对象, 提供关于浏览器的详尽信息location对象, 提供浏览器加载页面的详尽信息screen对象, 提供关于用户屏幕分辨率的详尽信息performance对象, 提供浏览器内存占用、导航行为和时间统计的详尽信息- 对
cookie的支持 - 其他对象的支持, 如
XMLHttpRequest
- BOM会因浏览器的不同而存在差异, 但H5制定了规范, BOM也会日趋一致
JavaScript 版本
所有浏览器基本上都对ES5提供了完善的支持, 对ES6、ES7的支持也在不断完善
- 多数浏览器对JavaScript的支持, 指的是实现ESMAScript和DOM的程度
HTML中的JavaScript
将JavaScript插入HTML的主要方法是使用<script>元素
<script>元素有8个属性:- async: 可选, 表示立即开始下载脚本, 但不能阻止其他页面动作, 比如下载资源或等待其他脚本加载。(即: 脚本不需要等待其他脚本, 同时也不阻塞文档渲染) 只对外部脚本文件有效
- crossorigin：可选， 配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
- defer：可选，表示脚本可以延迟到文档完成被解析和显示之后在执行（立即下载，但延迟执行）。
- integrity：可选，允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI）。如果接收到的资源和指定的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN）不会提供恶意内容。
- language：废弃
- src：可选，表示包含要执行的代码的外部文件。
- type：可选，表示代码块中脚本语言的内容类型（或称MIME类型），依照惯例，这个值始终是
text/javascript。如果这个值是module,则代码会被当成ES6模块, 且只有这时代码中才能出现import和export关键字.- 因为MIME类型并没有跨浏览器标准化, 最佳做法是不指定type属性
<script>使用场景- 直接在网页中嵌入JavaScript代码 (行内代码)
- 在网页中引用外部JavaScript文件 (外部文件)
- 最佳实践是使用外部文件
- 可维护性
- 缓存
- 适应未来
- 最佳实践是使用外部文件
<script>要点- 包含在
<scrpit>内的代码会被从上到下解释 - 在
<script>元素中的代码被计算完成前,页面的其余内容不会加载也不很显示 - 解释外部JS文件时, 页面也会阻塞
- 使用了
src属性的<script>元素不应再在标签内包含其他代码, 此时行内代码将被忽略 src属性的值可以是一个完整的URL, 它会向URL地址发送一个GET请求, 这个初始的请求不受浏览器同源策略限制, 即可以引用来自外域的JS文件.
- 包含在
- 标签位置
- 全部放在
<head>标签内- 这是过去的做法
- 会导致更久的空白页面
- 放在
<body>元素中的页面内容后面(</body>标签之前)- 现代的Web应用大多采用此做法
- 不会阻塞页面渲染
- 全部放在
- 最好只包含一个推迟执行的脚本(
defer属性) - 异步脚本(
async属性)不应该在加载期间修改DOM - 不推荐使用
document.write - 对于动态加载脚本, 应明确设置为同步加载(目的是统一动态脚本的加载行为)
- 可以使用js来创建
<script>标签以加载脚本, 此时便是动态加载脚本(异步的方式). script.async = false- 这种方式获取的资源对浏览器预加载器是不可见的, 可以在文档头部显示声明以解决此问题
<link rel="preload" href="gibberish.js">
- 可以使用js来创建
<noscript>元素- 在特定情况下浏览器才显示
<noscript>标签中的内容- 浏览器不支持脚本
- 浏览器对脚本的支持被关闭
- 在特定情况下浏览器才显示
