03月07, 2019

JS基础(1)——JavaScript 概述

JavaScript,常常被称之为 Web 语言。这么称呼不是没有原因的,因为最早 JavaScript 就是被用来制作网页特效和表单验证的。可以这么说,JavaScript 从一开始就是为我们 Web 所服务的。

同时,JavaScript 有着学习简单,容易上手的特点。比起其他像 Java,C# 这种传统编程语言,JavaScript 可算是相当容易学习的。甚至不需要搭载什么复杂的运行环境,只需要安装一个浏览器,再用一个记事本就可以开始写 JavaScript 代码了。

但是,JavaScript 往往又是一门棘手的语言。因为它的简单,为它本身带来了诸多的问题。还有各种各样的版本,令人疑惑的名称,常常也是让初学者摸不清头脑。甚至在 JavaScript 里所存在的一些特殊现象,即使是经验丰富的 JavaScript 开发人员,如果没有认真学习过的话也无法真正理解。要解释清楚 JavaScript 为什么是一门棘手的语言,我们首先不得不从它的发展史讲起。

本章中我们将学习如下的内容:

  • JavaScript 发展史
  • JavaScript 版本介绍
  • 搭建 JavaScript 开发环境
  • 书写第一个 JavaScript 程序
  • NPM 简单介绍

1. JavaScript 发展史

这里,我想从4个阶段来回顾JavaScript的发展史,分别是

第一阶段:JavaScript 起源
第二阶段:第一次浏览器大战
第三阶段:第二次浏览器大战
第四阶段:JavaScript 蓬勃发展

第一阶段:JavaScript 起源

JavaScript 首次出现是在1995年,当年 JavaScript 的诞生绝不是偶然的。在1992年,一个叫做 Nombas 的公司开发了一门叫做"C减减"(C minus minus,Cmm)的语言,后来改名为 ScriptEase。

ScriptEase 最初的设计是将一种微型脚本语言与一个叫做 Espresso Page 的工具配合,使脚本能够在浏览器中运行,因此 ScriptEase 成为了第一个客户端脚本语言。

到目前为止,我们仍然可以访问该语言的官方网站:http://scriptease.info

(图为 ScriptEase 官网截图,上面有关于 ScriptEase 的介绍)

在 ScriptEase 出现以后,有一家叫做网景的公司,该公司也是世界上第一个将浏览器商用的公司。它们也想独立开发一种与 ScriptEase 相似的客户端脚本语言。于是,该公司的一个名叫布兰登・艾奇的人接受了这个任务,开始开发这门脚本语言。

该语言的语法借鉴了 Java,Perl,C,Self,Scheme 等编程语言。布兰登・艾奇仅仅花了10天时间,就写出来了这门语言。起初,这个语言的目标是为了非专业的开发人员(如网站设计者),提供一个方便的工具。因为大多数网站设计者都没有任何的编程背景,所以这个语言应该尽可能简单,易学,最终一个弱类型的动态解释语言 LiveWire 就此诞生。LiveWire 没过多久就改名为了 LiveScript 了,直到现在,在一些古老的Web 页面中还能看到这个名字。10天就写出来的东西,里面必然是存在很多问题的。这里面所存在的问题,有些遗留到至今都没有解决,有些问题现在反而还成了这门语言的一个特点。

在 LiveScript 诞生之前,Java applet曾经被热炒。之前 Sun 公司一直在不遗余力地推广 Java,宣称Java applet 将会改变人们浏览网页的方式。然而市场并没有像 Sun 公司预期的那样好,这很大程度上是因为 Java applet 速度慢而且操作不便。网景公司的市场部门抓住了这个机遇,与 Sun 合作完成了 LiveScript 在浏览器端的实现,并在网景的 Navigator2.0 发布前,将LiveScript更名为了JavaScript。网景公司为了取得 Sun 公司的支持,把 JavaScript 称之为 Java applet 和 HTML 的补充工具。

网景公司没有预料到当年那个市场策略带来的副作用有多大。多年来,到处都有人混淆 Java 和 JavaScript 这两个不相干的语言。两者除了名字相似和历史渊源之外,几乎没有任何关系。布兰登・艾奇为此也一直抱憾不已,他后来在一个名为"JavaScript at Ten Years"(JavaScript 这10年)的演讲稿中写道:"Dont't let marketing name your language"(不要让营销来决定语言的名称)。

最初的 JavaScript 版本为 1.0 版本。JavaScript 1.0 出现之后,让原本只能在服务器端进行的表单验证,在客户端就能够实现,这样大大增强了用户体验,并且还让网页上面存在能够动起来的东西,也给当时的网页添加了一定的活力。所以 JavaScript 在诞生之初就获得了巨大的成功。网景公司的 Netscape 浏览器也因此在整个浏览器市场上占据了超高的份额。


(图为浏览器 Netscape Navigator 2.01)

看到了网景公司的成功,当时的 IT 界霸主微软公司就想出了要收购网景公司的策略。但是网景公司当时在整个 Web 领域有着相当高的地位,所以并不接受微软的收购协议。

于是,微软一怒之下对 JavaScript 进行了反编译,实现了类似于 JavaScript 的客户端脚本语言 JScript。并将其投放于自家的浏览器 Internet Explorer 供其使用。考虑到当时全球范围内有大量的 VB 程序员,所以还顺带弄了一个 VBScript 出来。JScript 的诞生成为 JavaScript 发展的一个重要里程碑,标志了动态网页时代的全面到来。

至此,网景公司和微软公司之间开始了长达数年的浏览器以及客户端脚本语言的市场份额争夺之战。

第二阶段:第一次浏览器大战

就在网景公司和微软公司进行激烈的浏览器市场份额之争的时候,微软的 Internet Explorer3 随 Windows 95 OSR2 捆绑销售的策略堪称一颗重磅炸弹。这一举动轻松击败了强劲的对手:网景公司的 Navigator。尽管这个做法致使微软后来声名狼藉(以及一系列的反垄断诉讼),但 Internet Explorer3 的成功却有目共睹,其成功不仅仅在于市场营销策略,也源于产品本身。Internet Explorer3 是一个划时代的产品。


(图为 Windows95 上的 Internet Explorer3)

最终,由于微软将 Internet Explorer3 浏览器嵌入到自家的操作系统里面的策略,对于普通用户来讲,也就没有必要去重新下载一款浏览器了。所以导致网景公司的浏览器市场份额骤降,使得微软赢得了第一次浏览器大战的胜利。

虽然两家公司为争夺浏览器市场份额而进行的数年之久的浏览器之战,最终以微软的胜利告终,但是这场"战争"也给当时的程序员带来不小的痛苦。因为在最初,JavaScript 并没有一个标准。网景公司和微软公司各自为了争夺浏览器的市场份额,都在自己的脚本语言里面加入新的东西。然而这些新的东西大多数都是效果相同,只是实现的方法不同。这就造成了一个很尴尬的事情,那就是苦逼的开发人员往往要为了兼容性书写两份不同的代码。

对于这种语言没有一个标准,两家公司各自为战的情况,来自开发人员的怨言越来越重。于是,针对 JavaScript 的标准化问题就被提上了日程,对 JavaScript 的标准化势在必行。

1997年,以 JavaScript1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA)。该协会指定39号技术委员会(TC39)负责提供 JavaScript 的标准化,定出来的标准称为 ECMA-262,也就是 ECMAScript。紧接着国际标准化组织也采纳了 ECMAScript 标准,定为ISO-16262。


(图为 ECMAScript 6,后改名为 ECMAScript 2015)

不过,尽管有 ECMAScript 作为 JavaScript 的语法和语言特性的标准,但是关于 JavaScript 其他方面的规范还是不明确,加上当时两家公司也并没有重视标准的重要性,各自在自家的浏览器中又加入了各自特有的对象和函数。这也是为什么这么多年来同样的 JavaScript 代码会在不同的浏览器中呈现不同的效果,甚至在一个浏览器中可以执行,而在另一个浏览器中却不可以。这直接导致了当时的 JavaScript 处于一个非常混乱的局面。

并且,微软在获得浏览器大战的胜利以后,认为已经没有什么东西可以影响它霸主的地位了,一度停止了对 JavaScript 以及 Internet Explorer 的继续开发。JavaScript 就一直处于一个只是给网页添加特效的时期。甚至一度被民众给厌恶,因为一些开发人员对 JavaScript 的滥用,导致网页上充斥着大量的弹窗和漂浮不定还很难关闭的广告,这都导致了人们对 JavaScript 的好感度骤降,JavaScript 就这样一直被当作是一门玩具语言。

第三阶段:第二次浏览器大战

网景公司在第一次浏览器大战中战败以后,公司也面临着破产。破产以后,开发 Navigator 浏览器的那一波人成立了一个叫做 Mozilla 的基金会,并且将之前的Navigator浏览器的代码给开源了。这一下子,有大批的爱好者自发的为这款浏览器添加补丁和维护。


(图为 Mozilla 基金会官网部分截图)

2002年,Mozilla 在之前 Navigator 浏览器的基础上,推出了火狐浏览器。这一举动,标志着当年的网景又回来了。火狐浏览器也成为了当时浏览速度最快的浏览器。但是这个时候,并没有引起微软的重视,微软认为,还可以依靠之前的策略来打败这款浏览器,毕竟在当时,Internet Explorer6 在世界范围内有着超高的市场份额。


(图为火狐浏览器 Logo)

接下来,我们回头来说一下 JavaScript。虽说火狐浏览器推出了,但是 JavaScript 依旧没有改变它是用来做动画的命运,仍然被当作是玩具语言。直到2005年,这一年,JavaScript 的命运彻底被改变。新兴 IT 公司 Google 推出了Ajax技术,并将其应用到了自家的 Gmail 上面。Ajax 的出现,大大的改变了用户的上网体验,可以无刷新的改变页面内容。而 Ajax 的主体就是 JavaScript。此时此刻,人们对这门以前的玩具语言,有了新的认识。


(2005年,Ajax 技术诞生)

如果说第一次浏览器大战只有微软和网景两家公司打的火热,那么第二次浏览器大战远比第一次要激烈得多。2008年,Google 推出了 Google 浏览器,苹果也推出了自家的 Safari 浏览器,还有以小巧而著名的 Opera 浏览器,都参与到了第二次浏览器大战里面。

比起第一次浏览器大战各自在自家的浏览器里面添加独特功能的情况,第二次浏览器大战一定程度上来讲可以看作是标准之战。因为这个时候,大家能意识到了遵循标准的重要性,谁的浏览器能够更接近标准,谁就能在市场上得到更高的认可。

第四阶段:JavaScript 蓬勃发展

随着第二次浏览器大战所引发的 Web 标准之战,逐渐的升级到了浏览器的引擎之战。什么意思呢?

JavaScript 代码是需要 JavaScript 引擎来进行解析的,所以,在同样都满足标准的情况下,谁的浏览器能够更快的解析 JavaScript 代码,谁就能够更加获得青睐。

第一款 JavaScript 引擎是由布兰登・艾奇在网景的 Navigator 中开发的,它的名字叫做 SpiderMonkey。SpiderMonkey 在这之后还作为 Mozilla Firefox1.0~3.0 版本的引擎,而从 Firefox3.5 开始换为了 TraceMonkey,4.0 版本以后有换为了 JaegerMoney。

微软从 Internet Explorer9 开始使用的 JavaScript 引擎为 Chakra,而苹果的 Safari 浏览器使用的 JavaScript 引擎为 Nitro。Google公司的 Google 浏览器的 JavaScript 引擎为 V8 引擎。

在整个引擎之战中,要属 Google 公司的 V8 引擎最为瞩目,该引擎成为了解析 JavaScript 代码最快的引擎。甚至其速度能够接近于 C 语言的速度。V8 引擎的出现,给 JavaScript 带来了一系列的革命。2009年,RyanDahl 在 V8 引擎的基础上发布了 Node.js。至此,JavaScript 不再局限于客户端的开发,而是将触角延伸到了服务器端,可以进行服务器端的开发了。


(2009年,Node.js横空出世)

时至今日,各个 JavaScript 引擎的效率已经不相上下,通过不同引擎根据不同测试基准测得的结果各有千秋。但是,更有趣的是,JavaScript 的效率在不知不觉中已经超越了其他所有传统的脚本语言,并带动了解释器的革新运动。JavaScript 已经成为了当今速度最快的脚本语言之一,昔日的"丑小鸭"终于成了惊艳绝俗的"白天鹅"。

随着现在 JavaScript 的蓬勃发展,我们可以在很多领域都能见到 JavaScript 的身影。例如前面所说的 Web 开发还有服务器端开发,桌面应用开发,移动端开发,HTML5 游戏开发等。


(图为 Electron 官网部分截图。Electron 是一个使用 JavaScript 来开发桌面应用的框架)

Jeff Atwood 曾经说过:凡是能够用 JavaScript 来写的应用,最终都必将用 JavaScript 来写。也许未来,就会成为 JavaScript 的天下,我们有理由相信 JavaScript 会变得越来越好。

2. JavaScript 版本介绍

说到 JavaScript 的版本,大致可以分为两种,一种是 JavaScript 版本,另一种是 ECMAScript 版本。

我们知道,ECMAScript 就是 JavaScript 的一个标准,而 JavaScript 是 ECMAScript 的一种实现。还有一点要明白的是,实现了 ECMAScript 的可不仅仅只有 JavaScript,还有诸如 ADOBE 公司旗下的 Flash 所用到 ActionScript,也可以看作是 ECMAScript 的一种实现。

关于 JavaScript 版本,目前只有 Mozilla 公司,还在继续沿用最初的 JavaScript 版本编号序列
对应的版本号如下表:

浏览器 JavaScript版本
Netscape Navigator2 1.0
Netscape Navigator3 1.1
Netscape Navigator4 1.2
Netscape Navigator4.06 1.3
Netscape6+ 1.5
Firefox1 1.5
Firefox1.5 1.6
Firefox2 1.7
Firefox3 1.8
Firefox3.5 1.8.1
Firefox3.6 1.8.2

另一个是 ECMAScript 版本,从1997年发布的 ES1 到现在最让人熟知的 ES6,发展路线也是挺曲则的,主要版本记录如下:

  • 第1版:1997年6月发布,本质上与 JavaScript 1.1 相同
  • 第2版:1998年6月发布,主要是编辑加工的结果。
  • 第3版:1999年12月发布,是对 ECMAScript 标准第一次真正的修改。
  • 第4版:ES4 由于太过激进,未被采用,与此同时 TC39 下属的一个小组提出了 ES3.1 过渡版本
  • 第5版:ES3.1 最终成为 ES5,于2009年12月发布,该版本力求澄清第3版中的歧义
  • 第6版:2015年6月17日发布。第6版标志着 ECMAScript 成为了一门真正的通用编程语言。

3. 搭建 JavaScript 开发环境

搭建环境,无外乎就是书写代码的环境以及运行代码的环境。

对于书写代码的环境,前面我们也有提过,书写 JavaScript 代码使用记事本都能够书写,但是,使用工具的话可以让我们书写代码的速度更快,事半功倍。
书写代码的工具可以分为两大类:文本型代码编辑器以及集成开发环境(IDE)
常见的文本型代码编辑器如下:

  • 记事本
  • Sublime
  • Atom
  • Brackets
  • VScode

常见的集成开发环境如下:

  • Dreamwaver
  • Webstrom

接下来是代码运行环境。最早的时候,JavaScript 一般都是在浏览器上面运行,但是自从 Node.js 出现以后,JavaScript 已经有了服务器端的运行环境,并且随着 ECMAScript 6 的发布,JavaScript 已经成为了一种通用编程语言,所以刚开始的时候,我们完全可以在 Node 里面运行 JavaScript 代码。

安装过程 Node.js

在 Windows 和 Mac 上面都可以很轻松的安装 Node.js,只需要访问:
https://nodejs.org/en/
点击 Download 链接,下载相应的安装包,然后进行安装即可。


(图为 Node.js 官网部分截图)

安装好以后,可以在控制台里面通过node -v命令查看当前安装的 Node.js 的版本:

~ $ node -v
v8.7.0

还有一种方式是使用在线的运行环境,这里推荐

www.ES6console.com

该网站可以让我们在线的书写 JavaScript 代码,并且在线的运行立即看到效果。

4. 第一个 JavaScript 程序

书写代码的方式非常简单,可以通过控制台下面,输入node进入 REPL(Read Eval Print Loop) 模式。即输入-求值-输出循环的模式。在该模式下可以进入一个即时求值的运行环境,对于测试简单的代码这个环境是非常有用的,示例如下:

~ $ node
> console.log("Hello World");
Hello World
undefined

无论是 Windows 系统还是 Mac 系统,我们都可以通过Ctrl+d键的组合来退出 REPL 模式。

除了通过上面所介绍的 REPL 模式来运行 JavaScript 代码,我们也可以自己新建一个以js为后缀的文本文件,将书写好 JavaScript 代码放在 Node 里面运行。

这里我在我的桌面上新建了一个1.js的文件,书写如下的代码:

console.log("Hello World!!"); 

在 Node 里面运行的步骤,首先cd切换到desktop路径下面,然后输入node 文件名即可运行:

 ~ $ cd desktop
~/desktop $ node 1
Hello World

5. NPM 简单介绍

NPM 全称 Node Package Manager,翻译成中文就是 Node 包管理工具。不过实际上,NPM 具备2种含义,一个是指代由 Node.js 官方提供的包管理和分发工具。还可以指代管理各种各样代码包的 NPM 官网。

很多开发人员会将自己写好的功能代码打包上传到 NPM 官网上,而我们可以使用 NPM 工具很轻松的从官网上下载我们所需要的包来使用,为我们书写代码带来便捷。


(图为 NPM 官网部分截图)

在现在的 Node.js 版本中(Node.js 0.6开始),NPM 已经包含在安装包里面了,我们在 Windows 或者 Mac 上安装 Node.js 时会自动安装 NPM。

在使用 NPM 的时候,由于有些资源被屏蔽或者是国外资源的原因,经常会导致用 NPM 安装依赖包的时候失败,所以我们可以安装 NPM 的国内镜像:CNPM。

使用 CNPM 来代替 NPM,它的同步频率目前为10分钟一次,以保证尽量与官方服务同步。

CNPM 的安装方法如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装好以后我们可以对项目根目录进行初始化,初始化指令如下:

// 项目初始化
npm init

初始化 NPM 之后,我们可以安装一些常用的模块,当然这属于后面 Node.js 的内容,这里我们仅仅安装一个常用的输入模块,如下:

// 安装输入模块
npm install readline-sync

接下来在书写代码的时候,就可以引入这个输入模块,从而在控制台进行输入了,如下:

const readline = require("readline-sync");
console.log("请输入一点东西:");
let i = readline.question("");//接收用户输入的内容
console.log("你输入的是:",i);

效果:

~/desktop $ node 1
请输入一点东西:
this is a test
你输入的是: this is a test

总结

  1. JavaScript 的发展史大致可以分为4个阶段,分别是 JavaScript 起源,第一次浏览器大战,第二次浏览器大战和 JavaScript 蓬勃发展

  2. Java 和 JavaScript 是两个不相干的语言。两者除了名字相似和历史渊源之外,几乎没有任何关系。

  3. 1997年,以 JavaScript1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA)。该协会指定39号技术委员会(TC39)负责提供 JavaScript 的标准化,定出来的标准称之为 ECMA-262,也就是 ECMAScript。

  4. 2002年,Mozilla 在 Navigator 浏览器的基础上,推出了火狐浏览器。

  5. 2005年,Google 公司推出了 Ajax 技术,并将其应用到了自家的 Gmail 上面。Ajax 的出现,大大的改变了用户的上网体验,可以无刷新的改变页面内容。而 Ajax 的主体就是 JavaScript。

  6. 2009年,RyanDahl 在 V8 引擎的基础上发布了 Node.js。至此,JavaScript 不再局限于客户端的开发,而是可以进行服务器端的开发了。

  7. JavaScript 的版本,大致可以分为两个部分,一个是 JavaScript 版本,另一个是 ECMAScript 版本。

  8. 搭建 JavaScript 开发环境,可以分别书写代码的环境以及运行代码的环境。

  9. REPL(Read Eval Print Loop) 模式。即输入-求值-输出循环的模式。在该模式下可以进入一个即时求值的运行环境,对于测试简单的代码这个环境是非常有用的。

  10. NPM 全称 Node Package Manager,是一个由 Node.JS 官方提供的包管理和分发工具,上面有很多可供我们使用的包,可以为我们书写代码带来便捷。

本文链接:http://www.yanhongzhi.com/post/js-basis-1.html

-- EOF --

Comments