JavaScript 的诞生

261 阅读8分钟

1-发明者

李爵士发明了HTML

赖先生发明了CSS

布莱登发明了JS

2-如何发明

布莱登临危受命

  • 公司要求给浏览器添加一个脚本功能
  • 公司要求这个脚本必须蹭Java的流量
  • 布莱登花10天设计了JS的最初版本

JS的命名

  • Mocha摩卡 => LiveScirpt => JavaScript
  • Java即是编程语言,又是一种咖啡
  • 浏览器一开始同时就支持Java和JavaScript
  • 后来,JS胜了(在浏览器上)

3-浏览器大战

微软的跟进

  • 1996年 8月 IE3 发布,支持JScript(微软实现的JS)
  • 浏览器大战开始,每家浏览器的脚本不太一样

网景的反击

  • 1996年 11月,网景向ECMA提交语言标准,由于版本问题,JS语言标准不叫JavaScript,叫ECMAScript

网景之死

  • 微软的IE浏览器由于捆绑进了Windows,很快超越了网景
  • 1998年,网景浏览器节节败退,公司陷入内忧外患
  • 同年,公司打算搏一搏,就浏览器开源(Firefox)
  • 最终失败了,年底,美国在线AOL宣布开始收购网景
  • 之后,布莱登一直协助维护Firefox的运营

IE6 如日中天

  • 2001年,IE6随着WindowsXP一起发布
  • 2006年,主流浏览器为IE6和Firefox
  • 2010年,中国的大部分浏览器还是IE6
  • 由于盗版Windows XP在中国的风行,在很多年里,IE6始终占据中国浏览器市场,是前端开发者的恶魔

Chrome 横空出世

  • 由于IE6的巨大成功,微软觉得再花费精力不值得,而且没有竞争对手,所以解散了IE 6开发团队
  • 2004年,谷歌雇佣了一些Firefox和IE的开发者
  • 2008年,Chrome终于发布,迅速拿下了1%的份额
  • 2008年,Chrome终于发布,迅速拿下了1%的份额
  • 2011年,Chrome份额超过Firefox
  • 2016年,Chrome全球份额62%

移动市场兴起

  • 2010年,IPhone 4发布
  • 2011年,微软和Nokia联合起来,打算搞一波事情,之后,Nokia手机业务完了

    也就是说,手机上基本没有IE了

  • 2016年,淘宝天猫 宣布 不再支持IE6, IE7 ,IE8
  • 移动市场的兴起,让中国前端摆脱IE十年的恐怖支配
  • 从此,前端极速发展

ECMAScript标注的制定

  • 1997年6月,第一版ECMAScript发布
  • 1999年12月,第三版发布,这个版本使用最广
  • 第四版,流产
  • 2009年12月,第五版发布,增加了一些功能
  • 2015年6月,第六版发布,新浏览器都支持这一版
  • 之后每年发布一版,版本号以年份命名

JS与ECMAScript标注的关系

  • ECMAScript是纸上的标准,JS是浏览器的实现
  • 纸上标准往往落后于浏览器,先实现,再写进标准

JavaScript兴起

  • 2004年,谷歌发布Gmail在线网页,Gmail的发布让用户和开发者眼前一亮
  • 2005年,Jesse将谷歌用到的计术命名为AJAX 从此,前端技术正式出现
  • 在此之前的网页开发都是由后端和设计师完成
  • 2006年,JQuery发布,是目前最长寿的JS库
  • 后来的十年,JQuery大发异彩,直到IE不行了,JQuery才没有那么火

JavaScript爆发

  • Chrome的JS引擎叫做V8
  • 2009年,Ryan基于V8创建了Node.js
  • 2010年,Isaac基于Node.js写出了npm
  • 前端工程师可以在浏览器之外执行JS了,Node.js快速风靡
  • 同年,TJ受Sinatra启发,发布了Express.js
  • 从此,前端工程师可以愉快地写后端应用了
  • 这期间出来的技术太多,以后慢慢介绍:gulp,grunt,yeoman,requirejs,webpack,Angular,React,Vue
  • 这些技术很多也已经过时了

4-Javascript的10个设计缺陷

为什么Javascript有缺陷

1. 设计阶段过于仓促

Javascript的设计,其实只用了十天。而且,设计师是为了向公司交差,本人并不愿意这样设计(参见《Javascript诞生记》)。

另一方面,这种语言的设计初衷,是为了解决一些简单的网页互动(比如,检查"用户名"是否填写),并没有考虑复杂应用的需要。设计者做梦也想不到,Javascript将来可以写出像Gmail这种极其庞大复杂的网页。

2. 没有先例

Javascript同时结合了函数式编程和面向对象编程的特点,这很可能是历史上的第一例。而且直到今天为止,Javascript仍然是世界上唯一使用Prototype继承模型的主要语言。这使得它没有设计先例可以参考。

3. 过早的标准化

Javascript的发展非常快,根本没有时间调整设计。

1995年5月,设计方案定稿;10月,解释器开发成功;12月,向市场推出,立刻被广泛接受,全世界的用户大量使用。Javascript缺乏一个从小到大、慢慢积累用户的过程,而是连续的爆炸式扩散增长。大量的既成网页和业余网页设计者的参与,使得调整语言规格困难重重。

更糟的是,Javascript的规格还没来及调整,就固化了。

1996年8月,微软公司强势介入,宣布推出自己的脚本语言Jscript;11月,为了压制微软,网景公司决定申请Javascript的国际标准;1997年6月,第一个国际标准ECMA-262正式颁布。

也就是说,Javascript推出一年半之后,国际标准就问世了。设计缺陷还没有充分暴露就成了标准。相比之下,C语言问世将近20年之后,国际标准才颁布。

Javascript的10个设计缺陷

1. 不适合开发大型程序

Javascript没有名称空间(namespace),很难模块化;没有如何将代码分布在多个文件的规范;允许同名函数的重复定义,后面的定义可以覆盖前面的定义,很不利于模块化加载。

2. 非常小的标准库

Javascript提供的标准函数库非常小,只能完成一些基本操作,很多功能都不具备。

3. null和undefined

null属于对象(object)的一种,意思是该对象为空;undefined则是一种数据类型,表示未定义。

typeof null; // object

typeof undefined; // undefined

两者非常容易混淆,但是含义完全不同。

var foo;

alert(foo == null); // true

alert(foo == undefined); // true

alert(foo === null); // false

alert(foo === undefined); // true

在编程实践中,null几乎没用,根本不应该设计它。

4. 全局变量难以控制

Javascript的全局变量,在所有模块中都是可见的;任何一个函数内部都可以生成全局变量,这大大加剧了程序的复杂性。

a = 1;

(function(){

  b=2;

alert(a);

    })(); // 1

    alert(b); //2

5. 自动插入行尾分号

Javascript的所有语句,都必须以分号结尾。但是,如果你忘记加分号,解释器并不报错,而是为你自动加上分号。有时候,这会导致一些难以发现的错误。

比如,下面这个函数根本无法达到预期的结果,返回值不是一个对象,而是undefined。

function(){

          return
            {
                         i=1
             };

            }

原因是解释器自动在return语句后面加上了分号。

       function(){

         return;
               {
                i=1
              };

     }

6. 加号运算符

+号作为运算符,有两个含义,可以表示数字与数字的和,也可以表示字符与字符的连接。

        alert(1+10); // 11

        alert("1"+"10"); // 110

如果一个操作项是字符,另一个操作项是数字,则数字自动转化为字符。

 alert(1+"10"); // 110

  alert("10"+1); // 101

这样的设计,不必要地加剧了运算的复杂性,完全可以另行设置一个字符连接的运算符。

7. NaN

NaN是一种数字,表示超出了解释器的极限。它有一些很奇怪的特性:

       NaN === NaN; //false

       NaN !== NaN; //true

       alert( 1 + NaN ); // NaN

与其设计NaN,不如解释器直接报错,反而有利于简化程序。

8. 数组和对象的区分

由于Javascript的数组也属于对象(object),所以要区分一个对象到底是不是数组,相当麻烦。Douglas Crockford的代码是这样的:

       if ( arr && 
       typeof arr === 'object' &&
        typeof arr.length === 'number' &&
        !arr.propertyIsEnumerable('length')){

         alert("arr is an array");

       }

9. == 和 ===

==用来判断两个值是否相等。当两个值类型不同时,会发生自动转换,得到的结果非常不符合直觉。

      "" == "0" // false

     0 == "" // true

     0 == "0" // true

     false == "false" // false

     false == "0" // true
 
     false == undefined // false

     false == null // false

      null == undefined // true

      " \t\r\n" == 0 // true

因此,推荐任何时候都使用"==="(精确判断)比较符。

10. 基本类型的包装对象

Javascript有三种基本数据类型:字符串、数字和布尔值。它们都有相应的建构函数,可以生成字符串对象、数字对象和布尔值对象。

   new Boolean(false);

   new Number(1234);

   new String("Hello World");

与基本数据类型对应的对象类型,作用很小,造成的混淆却很大。

   alert( typeof 1234); // number

   alert( typeof new Number(1234)); // object