JavaScript高级程序设计(历史回顾篇)

Sunlight_
135 阅读11分钟

JavaScript高级程序设计

JavaScript简述和学习方法

  • 1995年, JavaScript问世。当时主要用途是替代Perl等服务器端语言处理输入验证。

    • 在此之前要验证必填字段是否填写，需要与服务器一次往返通信。在那个年代，缓慢的网速让页面刷新考验着人们的耐心

  • JavaScript 逐渐成为市面所有浏览器的标配，它不再局限于表单验证，而是渗透到浏览器窗口的方方面面

    • 能实现复杂的计算与交互，包含闭包，匿名函数，甚至元编程等特性。
  • JavaScript很简单，学会用只要几分钟; 它又很复杂，掌握它要很多年，要真正学好用好JavaScript，理解其本质，历史及局限性是非常重要的

一. 什么是JavaScript

1.1 历史回顾

  • 随着当时Web日益流行，对脚本语言需求越发强烈。

    • 网页越来越大，越来越复杂，简单的表单需要大量与服务器往返通信成为用户痛点。
    • 想象一下: 你填写完表单，点击"提交"按钮，等30秒，然后看到一条信息，告诉你有一个必填字段没填。
    • 网景公司将开发一个客户端脚本语言来处理简单的数据验证提上日程。

  • 1995年Brendan Eich工程师， 在即将发布的Netscape Navigator2 开发一个叫Mocha(后改名为LiveScript)的脚本语言。

    • 计划在客户端和服务器端用它，客户端叫Mocha(后改名为LiveScript)， 服务器端叫LiveWire。
    • 为了赶上发布时间，网景与sun 结盟，共同完成LiveScript的开发。
    • 在Netscape Navigator2正式发布之前，网景把LiveScript 改名为 JavaScript， 搭上炒作java的顺风车。

  • 由于JavaScript 1.0很成功。尚未成熟的Web的受欢迎程度达到历史新高

    • 网景稳居市场领导者的位置
    • 这时 微软向IE投入更多资源。在Netscape Navigator3发布不久后，微软发布IE3，其中包含自己命名的JScript(叫这个名字是为了避免与网景公司发生许可纠纷)的JavaScript实现。1996年8月 微软进入Web浏览器领域。

  • 微软的JavaScript实现意味着出现了两个版本的JavaScript: Netscape Navigator 中的 JavaScript,和IE 中的 JScript。

    • 由于JavaScrip没有规范其语法或特性的标准，由于两个版本并存让这个问题更突出。
    • 随着业界担忧，JavaScript踏上了标准化。

  • 1997年网景公司将JavaScript1.1作为提案被提交给欧洲计算机制造商协会(Ecma)

    • 第39技术委员会(TC39)承担"标准化一门通用，跨平台, 厂商中立的脚本语言的语法和语义"任务。
    • TC39委员会由来自网景，Sun, 微软， Borland, Nombas和其他对这门脚本语言有兴趣的公司的工程师组成，花费数月打招出ECMA-262，也就是ECMAScript这个脚本语言标准

  • 1998年国际标准化组织(ISO)和国际电工委员会(IEC)将ECMAScript采纳为标准(ISO/IEC-16262), 之后各个浏览器以ECMAScript作为自己 JavaScript实现的依据。具体实现各有不同

1.2 JavaScript实现

  • 完整的Javascript包含以下几个部分

    • 核心(ECMAScript)
    • 文档对象模型(DOM)
    • 浏览器对象模型(BOM)

image-20230607150027428

1.2.1 ECMAScript

  • ECMAScript定义的语言，并不局限于Web浏览器。

    • Web浏览器只是ECMAScript实现可能存在的一种宿主环境(host environment)。

      • 宿主环境提供 ECMAScript 的基准实现和环境自身交互必需的扩展。扩展(比如DOM)使用 ECMAScript核心类型和语法，提供特定于环境的额外功能。

    • 其他宿主环境还有服务器端JavaScript平台Node.js和即将淘汰的Adobe Flash

  • ECMAScript描述这门语言的

    • 语法
    • 类型
    • 语句
    • 关键字
    • 保留字
    • 操作符
    • 全局对象

  • ECMAScript 只是实现这个规范描述的所有方面的一门语言称呼。

    • JavaScript 实现了ECMAScript
历史版本

  • ECMA-262 第 1 版

    • 本质上和网景的 JavaScript1.1相同，只不过删掉了所有浏览器特定的代码，外加少量细微的修改。
    • ECMA-262要求支持Unicode标准（以支持多语言), 而且对象要与平台无关(Netscape JavaScript 1.1 的对象不是这样，比如它的 Date 对象就依赖平台)。

  • ECMA-262 第 2 版

    • 只是做了一些编校工作，主要是为了更新之后严格符合ISO/IEC-16262的要求，并没有增减或改变任何特性。

  • ECMA-262 第 3 版

    • 更新了字符串处理，错误定义和数值输出。
    • 增加了正则表达式，新的控制语句，try/catch异常处理的支持。
    • 为了更好让标准国际化所做的少量修改。

  • ECMA-262 第 4 版

    • 对这门语言一次彻底的修订。作为对JavaScript 在Web上日益成功的回应，开发者开始修订ECMAScript满足全球Web开发日益增长的需求，为此, Ecma T39 再次被召集起来，决定这门语言的未来。
    • 包括类型变量，新语句和数据结构，真正的类和经典的继承，以及操作数据的新手段。
    • TC39委员会一个子委员会提出另一份提案，叫做"ECMAScript3.1", 只是对这门语言进行较少改进。
    • 这个子委员会的人认为第 4 版对这门语言跳跃太大。因此，他们提出一个改动较小的提案，在现有的JavaScript引擎基础上做一些增改就可以实现。
    • 最终 ES3.1子委员会赢的TC39委员会的支持， ECMA-262第 4 版在正式发布之前被放弃。

  • ECMA-262 第 5 版

    • 2009年12月3日 正式发布。至力于理清第 3 版存在的歧异，也增加了新功能。
    • 新功能: 原生的解析和序列化JSON数据的 JSON 对象，方便继承和高级属性的定义方法，以及新的增强ECMAScript引擎解析和执行代码能力的严格模式。
    • 在2011年6月 发布了维护性修订版， 修订版更正了规范中的错误，未增加任何新的语言或库特性。

  • ECMA-262 第 6 版

    • 俗称: ES6 于 2015年6月 发布，这一版包含了大概这个规范有史以来最重要的一批增强特性。
    • 正式支持类，模块，迭代器，生产器，箭头函数，期约，反射，代理和众多新的数据类型。

  • ECMA-262 第 7 版

    • 2016年6月 发布，修订了少量语法层面的增强， 如Array.prototype.includes 和 指数操作符。

  • ECMA-262 第 8 版

    • 2017年6月 发布，
    • 增加了异步函数(async /await )。
    • sharedArrayBuffer及 Atomics API。
    • Object.values() / Object.entries() / Object.getOwnPropertyDescriptors()
    • 字符串填充方法，另外明确支持对象字面量最后的逗号。

  • ECMA-262 第 9 版

    • 2018年6月发布，这次修订了异步迭代，剩余和扩展属性， 一组新的正则表达式特性，Promise finally(), 以及模版子面量修订。

  • ECMA-262 第 10 版

    • 2019年6月发布，添加了
    • Array.prototype.flat() / flatMap()
    • String.prototype.trimStart() / trimEnd()
    • Object.formEntries() 方法
    • Symbol.prototype.description 属性
    • 明确定义 Function.prototype.toString()的返回值并固定了Array.prototype.sort()的顺序。
    • 解决了与JSON字符串兼容的问题，并定义了 catch 子句的可选绑定。

1.2.2 DOM

  • 文档对象模型(DOM, Document Object Model) 是一个应用编程接口(API),用于在HTML中使用扩展的XML。
  • DOM通过创建文档树，让开发者可以随心所欲的控制网页内容和结构。使用DOM API, 可以删除，添加，替换，修改节点

HTML页面:

image-20230607174335481

用DOM来表示这一组节点:

image-20230607174454985

为什么需要DOM
  • 在 IE4 和 Netscape Navigator 4 支持不同形式的动态HTML（DHTML），开发者可以做到不刷新页面而修改页面外观和内容。
  • 由于网景和微软采用不用思路开发DHTML，开发者写一个HTML页面可以在任何浏览器中运行的好日子结束。
  • 万维网联盟(W3C， World Wide Web Consortium) 开始制定了DOM标准的进程
DOM的级别

  • 1998年10月, DOM Level 1成为 W3C的推荐标准。

    • 由 DOM Core 和 DOM HTML组成
    • DOM Core 提供一种映射XML 文档， 方便访问和操作文档任意部份的方式。
    • DOM HTML 拓展前者，添加特定于HTML的对象和方法

  • DOM Level 1 的目标是映射文档结构，而DOM Level 2则广泛得多，

    • 对最初的DOM 扩展了对(DHTML早就支持的)鼠标和用户界面事件，范围，遍历(迭代DOM节点的方法)的支持

    • 通过对象结构支撑层叠样式表(CSS)

    • 拓展了 DOM Level 1中的 DOM Core 对 XML 命名空间的支持。

    • DOM Level 2 新增以下模块，以支持新接口:

      • DOM视图: 描述追踪文档不同视图（如应用CSS样式前后的文档）的接口。
      • DOM事件: 描述事件及事件处理的接口。
      • DOM样式: 描述处理元素CSS样式的接口。
      • DOM遍历和范围: 描述遍历和操作 DOM 树的接口

  • DOM Level 3 进一步扩展了DOM

    • 添加了统一的方式加载和保存文档的方法(包含在一个叫DOM Load and Save 新模块中)
    • 验证文档的方法(DOM Validation)
    • DOM Core 经过扩展支持所有 XML 1.0的新特性， 包括 XML Infoset，XPath 和 XML Base。

  • W3C不再按照Level来维护DOM了， 而是作为DOM Living Standard 来维护，其快照称为DOM4

    • DOM4 新增包括替代 Mutation Events的 Mutation Observers。

  • 注意:

    • DOM并非只能通过JavaScript访问，而且确实被其他很多语言实现了。不过对于浏览器来说，DOM就是使用ECMAScript 实现的， 如今成为JavaScript 语言的一大组成部份。
    • 在阅读关于 DOM 的资料时，你可能会看到 DOM Level 0 的说法。注意，并没有一个标准叫“DOM Level 0”，这只是 DOM 历史中的一个参照点。DOM Level 0 可以看作 IE4 和 Netscape Navigator 4 中最初支持的 DHTML
其他DOM

除了DOM Core 和 DOM HTML接口，有些其他语言也发布了自己的DOM标准，下面列出的语言是基于XML的， 每一种都添加了该语言独有的DOM方法和接口:

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

此外，还有一些语言开发了自己的 DOM 实现，比如 Mozilla 的 XML 用户界面语言（XUL，XML User Interface Language）。不过，只有前面列表中的语言是 W3C 推荐标准。

1.2.3 BOM

IE3 和 Netscape Navigator 3 提供了浏览器对象模型(BOM) API, 用于访问和操作浏览器的窗口。用于支持访问和操作浏览器窗口。使用BOM， 开发者可以操控浏览器显示页面之外的部份。而BOM 真正独一无二的地方，当然也是问题最多的地方，就是它是唯一一个没有相关标准的 JavaScript 实现的。

  • HTML5改变了这个局面，这个版本的 HTML 以正式规范的形式涵盖了尽可能多的 BOM 特性。

  • 总结: BOM主要针对浏览器窗口和子窗口(frame),不过人们通常会把任何特定于浏览器的扩展都归在 BOM 的范畴内。比如，下面就是这样一些扩展：

    • 弹出新浏览器窗口的能力。
    • 移动，缩放和关闭浏览器窗口的能力。
    • navigator 对象， 提供关于浏览器的详尽信息。
    • location 对象，提供浏览器加载页面的详尽信息。
    • screen对象， 提供关于用户屏幕分辨率的详尽信息。
    • performance 对象， 提供浏览器内存占用， 导航行为和时间统计的详尽信息。
    • 对cookie的支持。
    • 其他自定义对象，如 XMLHttpRequest 和 IE的 ActiveXObject。

因为在很长时间内都没有标准，所以每个浏览器实现的都是自己的 BOM。有一些所谓的事实标准，比如对于 window 对象和 navigator 对象，每个浏览器都会给它们定义自己的属性和方法。现在有了HTML5，BOM 的实现细节应该会日趋一致

总结

JavaScript 是一门用来与网页交互的脚本语言，包括以下三个组成部份:

  • ECMAScript: 由 ECMA-262定义并提供核心功能。
  • 文档对象模型(DOM): 提供与网页内容交互的方法和接口。
  • 浏览器对象模型(BOM): 提供与浏览器交互的方法和接口。

JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度的支持。所有浏览器基本上对ES5提供完善的支持，而对ES6和ES7的支持度也在不断提升。这些浏览器对DOM的支持各不相同， 但对 Level3的支持日益趋于规范。HTML5中收录的 BOM 会因浏览器而异。

avatar
文章
阅读
粉丝