Lesson One — JavaScript

作者: 取个帅气的名字真好 | 来源:发表于2017-08-22 14:42 被阅读37次

一、什么是JavaScript

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web 互动、加强用户体验度等。

二、JavaScript的特点

松散性

JavaScript 语言核心与 C、C++、Java 相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。

对象属性

JavaScript 中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数组，而不像 C 中的结构体或者 C++、Java 中的对象。

继承机制

JavaScript 中的面向对象继承机制是基于原型的，这和另外一种不太为人所知的 Self 语言很像，而和 C++以及 Java 中的继承大不相同。

三、JavaScript 历史

1994年10月，NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司（Mosaic Communications），不久后改名为Netscape。这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。
1994年12月，Navigator发布了1.0版，市场份额一举超过90%。
Netscape公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为。当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。
管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，容易学习和部署。那一年，正逢Sun公司的Java语言问世，市场推广活动非常成功。Netscape公司决定与Sun公司合作，浏览器支持嵌入Java小程序（后来称为Java applet）。但是，浏览器脚本语言是否就选用Java，则存在争论。后来，还是决定不使用Java，因为网页小程序不需要Java这么“重”的语法。但是，同时也决定脚本语言的语法要接近Java，并且可以支持Java程序。这些设想直接排除了使用现存语言，比如Perl、Python和TCL。
1995年，Netscape公司雇佣了程序员Brendan Eich开发这种网页脚本语言。Brendan Eich有很强的函数式编程背景，希望以Scheme语言（函数式语言鼻祖LISP语言的一种方言）为蓝本，实现这种新语言。
1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。它是一个大杂烩，语法有多个来源：

基本语法：借鉴C语言和Java语言。
数据结构：借鉴Java语言，包括将值分成原始值和对象两大类。
函数的用法：借鉴Scheme语言和Awk语言，将函数当作第一等公民，并引入闭包。
原型继承模型：借鉴Self语言（Smalltalk的一种变种）。
正则表达式：借鉴Perl语言。
字符串和数组处理：借鉴Python语言。

为了保持简单，这种脚本语言缺少一些关键的功能，比如块级作用域、模块、子类型（subtyping）等等，但是可以利用现有功能找出解决办法。这种功能的不足，直接导致了后来JavaScript的一个显著特点：对于其他语言，你需要学习语言的各种功能，而对于JavaScript，你常常需要学习各种解决问题的模式。而且由于来源多样，从一开始就注定，JavaScript的编程风格是函数式编程和面向对象编程的一种混合体。

Netscape公司的这种浏览器脚本语言，最初名字叫做Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器。

之所以起这个名字，并不是因为JavaScript本身与Java语言有多么深的关系（事实上，两者关系并不深），而是因为Netscape公司已经决定，使用Java语言开发网络应用程序，JavaScript可以像胶水一样，将各个部分连接起来。当然，后来的历史是Java语言的浏览器插件失败了，JavaScript反而发扬光大。

1995年12月4日，Netscape公司与Sun公司联合发布了JavaScript语言。
1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。

四、ECMAScript的诞生

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会，ECMA是制定信息传输与通讯的国际化标准组织。 ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准，成员包括Netscape、Sun、Microsoft、Mozilla、Google等大公司。
1997年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。
因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。Jscript和ActionScript也算是ECMAScript的一种实现。

五、ECMAScript的发展

1997年，ECMAScript 1.0发布。
1998年，ECMAScript 2.0发布
1999年，ECMAScript 3.0发布。3.0版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了JavaScript语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习JavaScript，其实就是在学3.0版的语法。
2000年，ECMAScript 4.0开始酝酿。这个版本最后没有通过。为什么ES4没有通过呢？因为这个版本太激进了，对ES3做了彻底升级，导致标准委员会的一些成员不愿意接受。
2007年，ECMAScript 4.0版草案发布，本来预计次年8月发布正式版本。但是，各方对于是否通过这个标准，发生了严重分歧。以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案。
2008年，由于对于4.0版本应该包括哪些功能，各方分歧太大，争论过于激烈，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1（会后不久，ECMAScript 3.1就改名为ECMAScript 5），而将其他激进的设想扩大范围，放入以后的版本。由于会议的气氛，4.0版本的项目代号起名为Harmony（和谐）。
2009年，ECMAScript 5.0版正式发布。Harmony项目则一分为二，一些较为可行的设想定名为JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出。
2011年，ECMAscript 5.1版发布，并且成为ISO国际标准。
2013年3月，ECMAScript 6草案冻结，不再添加新功能。
2013年12月，ECMAScript 6草案发布。
2015年6月，ECMAScript 6正式通过，成为国际标准。从2000年算起，这时已经过去了15年。
ECMAScript 6 提出了很多新的特性，重点加强了模块、类声明、词法块定界、迭代器和生成器、异步编程的回调、模式解析以及合适的尾调用，另外还扩展了ECMAScript的内置库以支持更多的抽象数据结构。其目的就是使JavaScript可以用来编写复杂的应用程序，成为企业级开发语言。

六、JavaScript 核心

1.核心(ECMAScript)
2.文档对象模型 (DOM)
3.浏览器对象模型 (BOM)

七、浏览器渲染机制

主要流程 .png

1、解析 HTML 标签, 构建 DOM 树
2、解析 CSS 标签, 构建 CSSOM 树
3、把 DOM 和 CSSOM 组合成渲染树 (render tree)
4、在渲染树的基础上进行布局, 计算每个节点的几何结构
5、把每个节点绘制到屏幕上 (painting)

一、DOM解析

解析由两部分组成：标记化和树构建

DOM.png

标记化是词法分析过程，将输入内容解析成多个标记。HTML 标记包括起始标记、结束标记、属性名称和属性值。

标记生成器识别标记，传递给树构造器，然后接受下一个字符以识别下一个标记；如此反复直到输入的结束。

 <html>
 <head>
     <title>Web page parsing</title>
 </head>
 <body>
     <div>
         <h1>Web page parsing</h1>
         <p>This is an example Web page.</p>
     </div>
 </body>
 </html>

DOM Tree解析如下：

html.png

二、css解析

css.png

八、JavaScript在 HTML 中如何放置

一、把JavaScript文件放在head中

<head>
<script type="text/javascript" src="style.js"></script>
</head>

JavaScript文件外部加载的好处

1.避免使用<! -- ... // -->，骇客技术。
2.避免使用CDATA。
3.统一定义JavaScript代码，方便查看，方便维护。
4.使代码更安全，可以压缩，加密单个JavaScript文件。
5.浏览器可以缓存JavaScript文件，减少宽带使用（当多个页面同时使用一个JavaScript文件的时候，通常只需下载一次）。

二、把JavaScript文件放在body前

为防止网页加载缓慢，也可以把非关键的JavaScript放到网页底部，例如下面的代码：

   <script type="text/javascript" src="style.js"></script>
</body>
</html>

九、白屏和 FOUC

首先

在写HTML代码时，我们都是将CSS文件的引入位置放在头部（<head>标签内部），将js文件的引入位置放在底部（</body>前面）.

白屏：

当css文件引入位置放置头部时，Chrome（谷歌浏览器）会先把css文件全部加载完成，再对HTML进行渲染、展示。
如果把js文件放在头部，脚本会阻塞后面内容的呈现(如：文字)，脚本会阻塞其后组件的下载(如:图片)，出现白屏问题。

FOUC（无样式内容闪烁）：

当css文件引入位置放置头部时，Firefox（火狐浏览器）先展示出HTML中的内容，等待css加载完成再对HTML进行渲染。

十、异步加载脚本

1、async : 脚本延迟到文档解析和显示后执行，有顺序

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

2、defer:不保证顺序

 <script defer src="script.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

注：自由转载-非商用-非衍生-保持署名