1.学 JavaScript 的基本要求
- 1.1.软要求
- 1.2.硬要求（客观上的要求）
2.JavaScript 的历史
- Brendan Eich（布兰登）">2.1.JavaScript 的发明者：Brendan Eich（布兰登）
  - 根据布莱登的生平总结
2.2.JavaScript 的诞生
- 2.2.1.布莱登临危受命
- 2.2.2.JS 的命名
2.3.网景和微软的浏览器大战
- 2.3.1.微软的跟进
- 2.3.2.网景的反击
2.4.网景之死（被收购）
2.5.IE 6 一家独大
2.6.IE 6 神奇的 bug
2.7.Chrome 横空出世（前端发展跟 Chrome 息息相关）
- 2.7.1.微软的懈怠（一家独大，无人能挡）
- 2.7.2.谷歌抓住了机会
2.8.移动市场的兴起
- 智能手机的崛起
ECMAScript 标准的制定">2.9.ECMAScript 标准的制定
- 2.9.1.版本
- 2.9.2.JS 和 ECMAScript 的关系
2.10.JavaScript 的兴起
2.11.中国的前端
- 2.11.1.前端的来源
- 2.11.2.缺人
2.12.JavaScript 的爆发
3.JavaScript 的10个设计缺陷
- 3.1.JavaScript 为什么会有设计缺陷
- 3.2.JavaScript 的10个设计缺陷

1.学 JavaScript 的基本要求

1.1.软要求

1.1.1.逻辑能力

1.1.2.质疑自己的能力

大部分时候错的是自己，而非浏览器（需仔细检查）

1.1.3.抽象能力（高级程序员必备的能力）

1.2.硬要求（客观上的要求）

1.2.1.足够多的代码（有效代码）

靠时间积累，1000行新手；10000行熟手；50000行专业选手

如何统计自己的代码行数
安装 yarn global add cloc
cloc —vcs=git .
注意
如果仓库有 node_modules 目录等不相关的内容
[x] 需要把 /node_modules/写入 .gitignore 文件

1.2.2.足够多的概念
常用常考

闭包、原型
类、继承
MVC、 Flux
高阶函数
前端工程化

如何积累
课程中提炼
大脑中思考
博客上总结
[x] 代码中实践

1.2.3.足够多的踩坑经验
什么是专家？
专家就是把该领域内所有的错误都犯完的人
如何踩坑
做个人项目，而不是团体项目
[x] 个人项目就是所有代码都是你一个人写的，这样才能全方位的踩坑

2.JavaScript 的历史

2.1.JavaScript 的发明者：Brendan Eich（布兰登）

根据布莱登的生平总结
牛逼的程序员是什么样的
从来不会只学一门编程语言
不怕被辞退
很容易创业，比外行人靠谱
JavaScript
诞生之初，只是个不起眼的小功能
[x] JS 有很多 bug，学习时注意辨别

2.2.JavaScript 的诞生

2.2.1.布莱登临危受命
公司要求给浏览器添加一个脚本功能
公司要求这个脚本必须蹭 Java 的流量
布莱登花十天设计了 JS 的最初版本（不是实现）

2.2.2.JS 的命名
Mocha摩卡 => LiveScript=> JavaScript
Java 既是编程语言，这个单词也是一种咖啡
浏览器一开始就同时支持 Java 和 JavaScript，后来 JS 胜了（在浏览器这方面）

2.3.网景和微软的浏览器大战

2.3.1.微软的跟进
1996年8月IE 3 发布，支持 JScript （微软实现的 JS）
浏览器大战开始，每家浏览器的脚本不大一样

2.3.2.网景的反击
1996年11月，网景向 ECMA 提交语言标准，由于版权问题，JS 语言标准不叫 JavaScript，叫 ECMAScript

2.4.网景之死（被收购）
微软的 IE 浏览器捆绑进了 Windows
1998年，网景浏览器节节败退，公司陷入内忧外患，同年3月31日，公司将浏览器开源（Firefox）
年底，美国在线 AOL 宣布开始收购网景，收购后，网景团队的程序员纷纷被解雇
布莱登在之后一直协助维护 Firefox 的运营

2.5.IE 6 一家独大
2001年，IE 6 随着 Windows XP 一起发布
2004年，IE 6 全球市场占用率 80% 以上
然而，这款浏览器不兼容 W3C 标准（主要是CSS）—前端噩梦
并且不断出安全漏洞，Firefox 打算涅槃重生，重新打败 IE
2005年，IE 7发布，但打不过 IE 6
2006年，主流浏览器为 IE 6 和 Firefox
2010年，中国大部分浏览器还是 IE 6

由于盗版 Windows XP 在中国风行，在这段时间，IE 6 始终占领中国浏览器市场，是前端开发者的噩梦

2.6.IE 6 神奇的 bug

下面的代码会让 IE 6 直接崩溃
```
<style>
  *{position: relative;}
</style>
<table>
  <input>
</table>
```
2.7.Chrome 横空出世（前端发展跟 Chrome 息息相关）
Chrome 的广告—表达其访问速度之快

2.7.1.微软的懈怠（一家独大，无人能挡）
因为没有竞争对手，微软直接解散了 IE 6 开发团队
Firefox 的出现才让微软重新组建 IE 团队，但不是同一队人，导致 IE 7、8一直问题不断，IE 浏览器停滞不前

2.7.2.谷歌抓住了机会
2004年，谷歌雇佣一些之前在 Firefox 和 IE 的开发者
2008年，Chrome 终于发布，迅速拿下1%份额
2011年，Chrome 份额超过 Firefox
2016年，Chrome 全球份额 62%

2.8.移动市场的兴起

智能手机的崛起
2010年，iPhone 4 发布
2011年，微软和 Nokia（诺基亚）联合起来，打算搞一波事情
最终结果，Nokia 和微软败了，Nokia 最终被微软收购；手机上基本没有 IE 浏览器（前端的春天）
2016年，淘宝天猫宣布不再支持 IE6、IE7，同年年底，宣布不再支持 IE8
移动市场的兴起，让中国前端摆脱 IE 十年的恐怖支配，从此，前端急速发展
2.9.ECMAScript 标准的制定
2.9.1.版本
| 时间 | ECMAScript 版本 | 简介 | | :—-: | :—-: | :—-: | | 1997年6月 | 第一版发布 | | | 1999年12月 | 第三版发布 | 这个版本使用最广泛 | | 放弃 | 第四版-流产 | 由于关于语言的复杂性出现分歧 | | 2009年12月 | 第五版发布 | 新增“严格模式（strict mode）”，澄清了许多第3版本的模糊规范等 | | 2015年6月 | 第六版发布 | 新浏览器都支持这一版本 |

2015年之后每年更新一个版本，没有发展的时间就是 IE 笼罩的那段时间

2.9.2.JS 和 ECMAScript 的关系

ECMAScript 是纸上的标准，JS 是浏览器的实现
纸上的标准往往落后于浏览器，因为要先用 JS 实现，再写进标准

2.10.JavaScript 的兴起
2004年愚人节，谷歌发布 Gmail 在线网页（让人们明白，网页不仅仅是只能用来看新闻和图片）
2005年，Jesse 将谷歌用到的技术命名为 AJAX（从此前端技术正式出现）
在此之前的网页开发都由后端和设计师完成
2006年，jQuery 发布，是目前最长寿的 JS 库
后来十年，jQuery 大放异彩，直到 IE 不行了，jQuery 才稍微没那么火（因为 jQuery 可以兼容包括 IE 在内的各种主流浏览器）

2.11.中国的前端
正式出现时间：2010年左右，中国才有专门的前端岗位

2.11.1.前端的来源
一部分来自于自学的后端程序员，他们把 Java 的思想代入 JavaScript ，面向对象成了 JS 的主流思想
一部分来自设计师，他们开始学习 CSS ，并独创了『重构工程师』岗位（现在已经没落，没有这个岗位了）

2.11.2.缺人
最应该产出前端人才的大学，迟迟没有相关课程
早起前端工资比不上后端，所以大部分人选择后端
一些不小心进入前端领域的科班生成长非常迅速

2.12.JavaScript 的爆发

2.12.1.V8 突击
Chrome 的 JS 引擎叫做 V8) （V1 到 V8 分别是八种语言的引擎）
2009年，Ryan 基于 V8 创建了 Node.js
2010年，Isaac 基于 Node.js 写出了 npm
Node.js 的出现让前端工程师可以在浏览器之外执行 JS ，因此 Node.js 快速风靡
同年，TJ 受 Sinatra 启发，发布了 Express.js
从此，前端工程师可以愉快的写后端应用了

2.12.2.JS 爆发
期间出现的技术太多，很多技术你可能还没开始使用就已经过时了
gulp / grunt / yeoman / requirejs / webpack / Angular / React / Vue等结

总结
JS 是历史的选择
一开始浏览器支持很多东西：Java / Flash / VBScript
只有 JS 活到最后
JS 的低开高走
一开始 JS 只是一个玩具语言（就花了十天时间开发）
但是 JS 每次都走对了风口
学习 JS 是需要注意
旧的过时的东西了解一下就行
跟 IE 相关的知识一律忽略
前端是进入互联网行业的捷径
3.JavaScript 的10个设计缺陷
3.1.JavaScript 为什么会有设计缺陷
①设计阶段过于仓促
Javascript的设计，其实只用了十天。而且，设计师是为了向公司交差，本人并不愿意这样设计
②没有先例
Javascript同时结合了函数式编程和面向对象编程的特点，这很可能是历史上的第一例。而且直到今天为止，Javascript仍然是世界上唯一使用Prototype继承模型的主要语言。这使得它没有设计先例可以参考。
③过早的标准化
Javascript的发展非常快，根本没有时间调整设计。
3.2.JavaScript 的10个设计缺陷
3.2.1.不适合开发大型程序
Javascript没有名称空间（namespace），很难模块化；没有如何将代码分布在多个文件的规范；允许同名函数的重复定义，后面的定义可以覆盖前面的定义，很不利于模块化加载。
3.2.2.非常小的标准库
Javascript提供的标准函数库非常小，只能完成一些基本操作，很多功能都不具备。
3.2.3.null和undefined
null属于对象（object）的一种，意思是该对象为空；undefined则是一种数据类型，表示未定义。
```
typeof null; // object
typeof undefined; // undefined
```
两者非常容易混淆，但是含义完全不同。
```
  var foo;
  alter(foo == null); // ture
  alter(foo == undefind); //ture
  alter(foo === null); // false
  alter(foo === undefind); //ture
```
在编程实践中，null 几乎没用，根本不应该设计它
3.2.4.全局变量难以控制
Javascript的全局变量，在所有模块中都是可见的；任何一个函数内部都可以生成全局变量，这大大加剧了程序的复杂性。
```
a = 1;
(function(){
  b=2;
alter(a);
})(); //1
alter(b); //2
```
3.2.5.自动插入行尾分号
Javascript的所有语句，都必须以分号结尾。但是，如果你忘记加分号，解释器并不报错，而是为你自动加上分号。有时候，这会导致一些难以发现的错误。

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

function(){
  return
  {
    i=1
  };
}

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

function(){
  return;
  {
    i=1
  };
}

3.2.6.加号运算符

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

    alter(1+10); //11
    alter("1"+"10"); //110

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

    alter(1+"10"); //110
    alter("10"+1); //101

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

3.2.7.NaN

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

    NaN === NaN; //false
    NaN !== NaN; //ture
    alter(1 + NaN); //NaN

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

3.2.8.数组和对象的区分

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

if ( arr &&
　　typeof arr === 'object' &&
　　typeof arr.length === 'number' &&
　　!arr.propertyIsEnumerable('length')){
　　alert("arr is an array");
}

3.2.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

因此，推荐任何时候都使用”===”（精确判断）比较符。

3.2.10.基本类型的包装对象

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

　　new Boolean(false);
　　new Number(1234);
　　new String("Hello World");

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

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

关于Javascript的更多怪异行为，请参见Javascript Garden和wtfjs.com。

本文来源：

饥人谷 JavaScript的十个设计缺陷-阮一峰 JavaScript诞生记-阮一峰

JavaScript 的诞生

1.学 JavaScript 的基本要求

1.1.软要求

1.1.1.逻辑能力

1.1.2.质疑自己的能力

1.1.3.抽象能力（高级程序员必备的能力）

1.2.硬要求（客观上的要求）

1.2.1.足够多的代码（有效代码）

1.2.2.足够多的概念

1.2.3.足够多的踩坑经验

2.JavaScript 的历史

2.1.JavaScript 的发明者：Brendan Eich（布兰登）

根据布莱登的生平总结

2.2.JavaScript 的诞生

2.2.1.布莱登临危受命

2.2.2.JS 的命名

2.3.网景和微软的浏览器大战

2.3.1.微软的跟进

2.3.2.网景的反击

2.4.网景之死（被收购）

2.5.IE 6 一家独大

2.6.IE 6 神奇的 bug

2.7.Chrome 横空出世（前端发展跟 Chrome 息息相关）

2.7.1.微软的懈怠（一家独大，无人能挡）

2.7.2.谷歌抓住了机会

2.8.移动市场的兴起

智能手机的崛起

2.9.ECMAScript 标准的制定

2.9.1.版本

2.9.2.JS 和 ECMAScript 的关系

2.10.JavaScript 的兴起

2.11.中国的前端

2.11.1.前端的来源

2.11.2.缺人

2.12.JavaScript 的爆发

2.12.1.V8 突击

2.12.2.JS 爆发

总结

3.JavaScript 的10个设计缺陷

3.1.JavaScript 为什么会有设计缺陷

3.2.JavaScript 的10个设计缺陷

3.2.1.不适合开发大型程序

3.2.2.非常小的标准库

3.2.3.null和undefined

3.2.4.全局变量难以控制

3.2.5.自动插入行尾分号

3.2.6.加号运算符

3.2.7.NaN

3.2.8.数组和对象的区分

3.2.9.== 和 ===

3.2.10.基本类型的包装对象