转行学前端的第 23 天 : 了解 javaScript 实现

3,838 阅读11分钟

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

今日学习目标


昨天基于一些页面搜索,学习了《JavaScirpt 高级程序设计》(第三版) 1.1 章节,今天主要是基于搜索来学习 1.2 章节中的 JavaScript 实现,又是适合学习的一天,加油,小又又!!!!



今日学习概要


虽然 JavaScript 和 ECMAScript 通常被认名用来表达相同的含义,但是,JavaScript 的含义 却比 ECM-262 中规定的要多~~~,一个完整的 JavaScript 实现 应该是由下列三个不同的部分组成

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

核心 ( ECMAScript )

HISTORY

1996年11月,JavaScript的创造者Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言成为ECMAScript。这个版本就是ECMAScript 1.0版。

1998年6月,ECMAScript 2.0版发布。

1999年12月,ECMAScript 3.0 版发布,成为JavaScript大的通行标准,得到了广泛支持。3.0 版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript,其实就是在学 3.0 版的语法。

2000 年,ECMAScript 4.0 开始酝酿。这个版本最后没有通过,但是它的大部分内容被 ES6 继承了。因此,ES6 制定的起点其实是 2000 年。

2007年10月,ECMAScript 4.0 版 草案发布,对3.0版做了大幅升级,原计划次年8月发布正式版本。然而在草案发布后,由于4.0版的目标过于激进,各方对于是否通过这个标准,产生了严重分歧。以YahooMicrosoftGoogle为首的大公司,反对JavaScript的大幅升级,主张小幅改动,而以JavaScript创造者Brendan Eich为首的Mozilla公司,则坚持当前的草案。

2008年7月,由于对于 下一个版本应该包含哪些功能,各方面分歧太大,争论过于激进,ECMA开会决定,中止ECMAScript 4.0的开发,将其中设计现有功能改善的一小部分,发布为ECMAScript 3.1,二将其他激进的设想扩大范围,放入以后的版本,鉴于会议的气氛,该版本的项目代号取名为Harmony(和谐),会后不久,ECMAScript 3.1就改名为ECMAScript 5

2009年12月,ECMAScript 5.0版正式发布。Harmony项目则一分为二,一些较为可行的设想定名为JavaScript.next继续开发,后来演变成ECMAScript 6,一些不是很成熟的设想,则被视为JavaScript.next.next,在更远的将来再考虑推出。

2011年6月,ECMAScript 5.1版本发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。

2013年3月,ECMAScript 6 草案冻结,不再添加新功能,新功能设想将被放到 ECMAScript 7

2013年12月,ECMAScript 6 草案发布,此后是12个月的讨论期,以听取各方反馈意见。

2015年6月,ES6 的第一个版本发布,正式名称就是《ECMAScript 2015 标准》(简称 ES2015或 ES6)

2016年6月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016或 ES7)如期发布。

2017年6月,小幅修订的《ECMAScript 2017 标准》(简称 ES2017或 ES8)如期发布。

2018年6月,小幅修订的《ECMAScript 2018 标准》(简称 ES2018或 ES9)如期发布。

2019年6月,小幅修订的《ECMAScript 2019 标准》(简称 ES2019或 ES10)如期发布。

2020年,小幅修订的《ECMAScript 2020 标准》(简称 ES2020)尚未正式发布。


INTRODUCE


一个常见的问题是,ECMAScriptJavaScript 到底是什么关系?

要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性中立性

因此,ECMAScriptJavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScriptActionScript)。

日常场合,这两个词是可以互换的~~~~


WHAT


ES 组成部分

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

GRAMMAR PROPOSAL


任何人都可以向标准委员会(又称 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查看。


ES YEAR VERSION


2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。

但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等等。

但是,标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。

如果经过多次会议以后,一个提案足够成熟了,就可以正式进入标准了。这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动。

标准委员会最终决定,标准在每年的 6 月份正式发布一次,作为当年的正式版本。

接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。

ES6ES2015 的关系


ES6 的第一个版本,是在 2015 年 6 月发布了,正式名称就是《ECMAScript 2015标准》(简称 ES2015)。

2016 年 6 月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小(只新增了数组实例的includes方法和指数运算符),基本上是同一个标准。

因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015ES2016ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。


文档对象模型(DOM)

WHY

IE 4Netscape 4分别支持的不同形式的 DHTML(Dynamic HTML的)基础上,开发人员首次无需重新加载网页,就可以修改其外观和内容了~~,给 Web技术发展带来了巨大进步~~~


然而,微软 和 Netscape 在开发 DHTML 方面各持己见,导致开发人员需要基于不同的浏览器渲染写一些额外的代码,人们担心,如果不对两家公司加以控制,Web 开发领域就会出现技术上两强割据,浏览器互不兼容~~

此时,负责制定 Web 通信标准的 (W3C) 开始着手规划 DOM


WHAT


文档对象模型是针对 XML ,但经过扩展用于 HTML 的应用程序编程接口(API)。

DOM 并不是只针对于 JS 的,很多别的语言也都实现了 DOM。

不过在 Web 浏览器中,DOM 确实是 JS 的一个重要组成部分


LEVEL

DOM1


1998 年 10 月,W3C 推荐 DOM1级 (DOM Level 1)为标准。DOM1级包括 DOM 核心 (DOM Core) 和 DOM HTML

名称 解释
DOM 核心 如何映射基于XML 的文档结构,以便简化对文档中人一部分的访问和操作
DOM HTML 在核心的基础上,新增了针对于 HTML 的对象和方法

DOM2


DOM1 的目标主要是映射文档的结构,那么 DOM2级的目标就要宽泛很多~~~

DOM2在原有的基础上扩充了 鼠标用户界面事件范围遍历等等细分模块,而且通过对象接口增加了对 CSS的支持。

名称 解释
DOM 视图(DOM Views) 定义了跟踪不同文档视图的接口
DOM 事件(DOM Events) 定义了事件和事件处理的接口
DOM 样式(DOM Style) 定义了基于CSS为元素应用样式的接口
DOM 遍历和范围(DOM Traversal and Range) 定义了遍历和操作文档树的接口

DOM3


DOM3级则进一步扩展了DOM

  • 引入了以统一方式加载和保存文档的方法---在 DOM 加载和保存(DOM Load and Save)模块中定义
  • 新增了验证文档的方法---在 DOM 验证(DOM Validation)模块中定义。
  • 对核心进行了扩展,开始支持 XML 1.0 规范,涉及 XML InfosetXPathXML Base

OTHER


除了 DOM 核心DOM HTML 接口之外,另外几门语言还发布了只针对自己的 DOM 标准

  • SVG
  • MathML
  • SMIL
  • XUL

XUL 不是 W3C 的推荐标准


浏览器对象模型( BOM )

INTRODUCE


从根本上讲, BOM 只处理浏览器窗口框架

但是人们习惯上也把所有针对浏览器的 JS 扩展算作 BOM 的一部分。

  • 弹出新浏览器窗口的功能
  • 移动、缩放和关闭浏览器窗口的功能
  • 提供浏览器详细信息的 navigator 对象
  • 提供浏览器所加载页面的详细信息 location对象
  • 提供用户显示器分辨率详细信息的screen对象
  • cookies的支持
  • XMLHttpRequestIEActiveXObject 这样的自定义对象


BROWSER COMPATIBLE


BOM 与众不同的地方是,虽然作为 JS实现的一部分,但却没有相关标准,也经常会导致页面兼容问题。

每个浏览器都有自己的实现,虽然也存在一些事实标准,例如 window 对象 和navigator 对象等,但是每个浏览器都会为这两个对象,乃至其他对象定义自己的属性和方法,


今日学习名词

名称 名词解析
API Application Programming Interface,应用程序接口是一些预先定义的函数,或指软件系统不同组成部分衔接的约定。  
目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问原码,或理解内部工作机制的细节。
DHTML Dynamic HTML的简称,就是动态的html(标准通用标记语言下的一个应用),是相对传统的静态的html而言的一种制作网页的概念。  
所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。  
DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。

今日学习总结


今日心情


今日了解了 JS 三个方面的实现,感觉 ES 的版本好多啊,希望明天学习到更多东西~~~~

本文使用 mdnice 排版