js复习之基础概念以及script

一、js复习之前置概念

1.js历史及以前名词

  • ECMA(European Computer Manufactures Associatio)

    1
    欧洲计算机制造联合会

  • TC39（Technical Committee #39）

    1
    ECMA指派负责“标准化一种通用、跨平台、供应商中立的脚本语言的语法和语意”的39号技术委员会

  • ECMA-262

    1
    基于以javascript1.1为蓝本的新脚本语言标准

  • ECMAScript

    1
    由ECMA-262标准定义的脚本语言（通常都被人们用来表达相同的含义）

2.js实现

虽然JavasScript和ECMAScript都用来表达相同含义，但一个完整的浏览器端js应实现3个不同的部分

  • 核心（ECMAScript）
  • 文档对象模型（DOM）
  • 浏览器对象模型 （BOM）

(1) ECMAScript

[1] ECMAScript环境

  • Web浏览器只是ECMAScript实现可能的宿主环境之一，宿主环境不仅提供基本的ECMA实现，同时也提供该语言的扩展，以便语言和环境对接交互。
  • 其他宿主环境包括Node和Adobe Flash
  • ECMAScript就是对实现该标准规定的各方面内容的语言环境 。JavaScript实现了ECMAScript， Adobe ActionScript也实现了ECMAScript。

[2] ECMAScript的实现

根据EMCA-262对ECMAScript兼容的定义，想要成为ECMAScript的实现，则该实现必须做到：

（1）支持ECMA262描述的所有类型、值、对象、属性、函数以及程序句法、语义

1
包括：语法、类型、语句、关键字、保留字、操作符、对象

（2）全面支持Unicode字符标准

[3] ECMAScript兼容

此外，兼容实现还可以进行下列扩展。

（1）添加ECMA-262没有描述的“更多类型、值、对象、属性和函数”。ECMA-262所说的这些新增特性，主要是指标该标准没有规定的新对象和对象的新属性

（2）支持ECMA-262定义的“程序和正则表达式语法”。（也就是说，可以修改和扩展正则表达式语法）

[4] ECMAScript的版本

(1) ECMAScript 262
1
1997年，基于javascript 1.1
(2) ECMAScript 2
1
1998年，基于javascript 1.1和
(3) ECMAScript 3
1
1999年
(4) ECMAScript 4 （未完成）
(5) ECMAScript 5.1 (或仅 ES5) (目前主流浏览器大多支持这个标准)
(7) ECMAScript 6 es2015

新增特性

  • let const
  • Symbol
  • Set Map
  • Iterator for…of
  • class
  • 箭头函数
  • extend
  • promise
  • decorator
  • Module
(8) ECMAScript 7(有种说法是es6.1) es2016
  • Array.prototype.includes
  • Exponentiation Operator
    只新增了数组实例的includes方法和指数运算符
(9) ECMAScript 8 es2017
  • Object.values()
  • Object.entries()
  • padStart()
  • padEnd()
  • Object.getOwnPropertyDescriptors()
  • 函数参数列表结尾允许逗号
  • Async/Await

文档说(es8 es2017 实验阶段)

  • property initializers
(9) ECMAScript 9 es2018

  • 可观察性(Observables)，响应式架构的关键 (Dojo 2 的 可观察特性)

  • 全局性，一种用来一致地引用全局对象的标准 (Dojo 2 中的全局特性)

  • trimStart/trimEnd, 类似于 padStart/padEnd (估计是批量空格填充什么的，回看特性2，译者注)

  • import, 一种 ES 模块标准中没有的动态 import 机制

  • 类和属性装饰器 (已经在 TypeScript 中实现)

  • 异步迭代 (Asynchronous iteration)

  • 单指令多数据 (SIMD，Single Instruction Multiple Data), 它能够使得渲染和使用像 WebGL, Canvas 之类的动画加速

[5] 浏览器对ECMAScript支持情况

  • ECMAScript 3
1
chrome 1+ Firefox 3.0x Sarfari3.x Opera7.2+ ie7 Netscap 6
  • ECMAScript 5
1
IE8部分支持 IE9支持 Firefox4.0+
  • ECMAScript 6
1
支持情况可查询：http://kangax.github.io/compat-table/es6/

[6] ECMAScript更新流程

任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

  • Stage 0 - Strawman（展示阶段）
  • Stage 1 - Proposal（征求意见阶段）
  • Stage 2 - Draft（草案阶段）
  • Stage 3 - Candidate（候选人阶段）
  • Stage 4 - Finished（定案阶段）

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案，可以在 TC39 的官方网站Github.com/tc39/ecma262查看。

(2) DOM文档对象模型

[1] 概念

文档对象模型是针对XML但经过扩展用于HTML的应用程序编程接口。数结构

[2] DOM级别

(0) DOM 0

当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。

(1) DOM 1

映射文档结构为目标

DOM 1由两个模块组成：DOM核心（DOM Core）和 DOM HTML

  • DOM Core: DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。

  • DOM HTML: DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

(2) DOM 2

  • DOM Views (DOM视图)：定义了跟踪不同文档（例如：应用CSS之前和之后的文档）视图的接口；
  • DOM Events(DOM事件)：定义了事件和事件处理的接口
  • DOM Style (DOM样式)：定义了基于CSS为元素应用样式的接口；
  • DOM Traversal and Range (DOM遍历和范围)：定义了遍历和操作文档树的接口。

(3) DOM 3

  • 引入了以统一方式加载和保存文档的方法——在DOM加载和保存（DOM Load and Save）模块中定义；
  • 新增了验证文档的方法——在DOM验证（DOM Validation）模块定义。
  • DOM3级也对DOM核心进行了扩展，开始支持XML1.0规范，涉及XML Infoset、Xpath和 XML Base。

(4) 其他DOM标准

除了DOM核心和DOM HTML接口之外，另外几种语言还发布只针对自己的DOM标准。下面列出的语言都是基于XML的，每种语言的DOM标准都添加了与特定语言相关的新方法和新接口

W3C:

  • SVG (Scalable Vector Graphic, 可伸缩矢量图) 1.0
  • MathML (Mathematical Markup Language，数学标记语言) 1.0
  • SMIL (Synchronized Multimedia Integration Language, 同步多媒体集成语言)。

Mozillas:

  • XUL: (XML User Interface Language, XML用户界面语言)。

[3] DOM支持

  • Chrome 1+

    1
    Dom: 1级 2级

  • Firefox

    1
    Dom: 1级 2级 3级

  • ie2 ～ ie4.x

    1
    DOM: -

  • ie5

    1
    DOM: 1级 （最小限度）

  • ie5.5 ~ ie8

    1
    DOM: 1级 （几乎全部）

  • ie9+

    1
    DOM: 1级 2级 3级

(3) BOM浏览器对象模型

BOM(Browser Object Model)浏览器对象模型：

  • HTML5之前没有标准，HTML5把很多BOM功能写入正式规范
  • 从根上BOM只处理浏览器窗口和框架

  • 但是习惯上对浏览器的的Javascript扩展算作BOM的一部分，包括

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    > 弹出新浏览器窗口的功能

    > 移动、缩放和关闭浏览器窗口的功能

    > 提供浏览器详细信息的navigator对象

    > 提供浏览器所加载页面的详细信息的location对象

    > 提供用户显示器分辨率详细信息的screen对象

    > 对cookies的支持

    > 像XMLHttpRequest 和 IE的 ActiveXObject这样的自定义对象

2.script

(1) script六个属性

async（可选）

1
立即下载，但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 只对外部脚本文件有效。

charset（可选）

1
指定src属性的代码字符集，通常会被大多数浏览器忽略，可以用来解决乱码问题。

defer （可选）

1
表示脚本可以延迟到文档完全被解析显示之后再执行。只对外部脚本有效

language （已弃用）

1
表示编写代码使用的脚本语言（如：Javascript、Javascript1.2或VBScript），已废弃。

src （可选）

1
表示包含要执行代码的外部文件。

type （可选）（不是必须默认值text/javascirpt）

1
2
3
4
5
6
> 可以看作language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。
> text/javascirpt text/ecmascirpt都已经不被推荐使用。

> 实际上服务端传递javascirpt文件时使用的MIME类型通常是application/x-javascirpt，但是type设置该值可能会导致被忽略。

> 另外，在非ie下可以设置： application/javascript和application/ecmascript（不推荐）

(2) 使用标签的一些注意事项

[1] script闭标签

  • 不要在代码任何地方出现script闭标签

  • 不要出现以下形式，某些浏览器（尤其是ie）的正确解析

    1
    <script type="text/javascript" src="example.js" />

[2] 标签位置

  • body尾部
1
这样在解析包含的javascirpt代码之前，页面内容将完全呈现在浏览器中。从而减少页面空白时间。
1
2
<body>
	<!--这里放内容-->
<script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script>
</body>

  • 需要在DOM加载解析之前执行的脚本

    1
    这样意味着必须等到全部javascirpt下载、解析、执行完成以后，才能开始呈现页面内容（浏览器在遇到body标签菜开始呈现内容），会增加页面空白时间
1
<head>
   <title>Example HTML Page</title>
   <script type="text/javascript" src="example1.js"></script>
   <script type="text/javascript" src="example2.js"></script>
</head>

(3) 延迟脚本（defer）

html 4.01 script标签定义了defer属性。

  • 相当于告知浏览器立即下载，但延迟执行
  • 脚本会被延迟到整个页面都解析完毕后再运行
1
2
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script>
  </head>
  <body>
  <!-- 内容 -->
 </body>
</html>

本例子中，虽然我们把script元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器解析html的闭标签后再执行。

  • HTML5规范要求它们出现的执行顺序因此：

    1
    2
    3
    4
    5
    example1.js会先于example2,并两者都会先于DOMContentLoaded事件

    但实际中，延迟脚本并不一定按顺序执行，也不一定在DOMContentLoaded事件前执行，因此最好只包含一个延迟脚本

    HTML5会忽略内部脚本使用defer,ie4-ie7支持内部脚本defer,但请尽量拥抱标准。

(4) 异步脚本（async）

async的属性目的是不让页面等待脚本文件之前下载和执行，从而异步加载页面其他内容，建议异步脚本不要在加载期间修改DOM。

  • 与defer不同，标记为async的脚本不保证它们的先后顺序执行，因此两者互不依赖非常重要。
  • 异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行
  • 支持异步浏览器firefox 3.6 chrome safari5。

(5) 嵌入脚本和外部脚本

一般建议使用外部脚本

优点如下：

  • 可维护性强
  • 可缓存
  • 适应未来

(6) 文档模式

(1)混杂模式

  • 没有放入<!doctype html> （没有文档类型声明，则所有浏览器都会默认开启混杂模式）

让IE行为与IE5相同

(2)标准模式

1
<!-- HTML 4.01 严格型    -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型    -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML 5 -->
<!DOCTYPE html>

使浏览器行为更接近标准行为

(3)准标准模式

  • 准表示模式，则可以通过使用过渡型（Transitional）或框架集型（Frameset）文档类型来触发
1
<!-- HTML 4.01  过渡型   -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
8
   <!-- HTML 4.01 框架集型     -->
<!DOCTYPE HTML PUBLIC 9 "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
  <!-- XHTML 1.0  过渡型    -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0  框架集型    -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，它们差异几乎可以忽略不计。

(7) noscript元素

noscirpt标签只有在下列情况会被显示出来：

  • 浏览器不支持脚本
  • 浏览器支持脚本，但脚本被禁用

作用：

  • 在不支持javascirpt的浏览器中显示替代的内容
Share