前端的前世今生-下
2016/08/30
前端的前世今生-上介绍了前端相关核心技术的由来和发展历史。
前端的前世今生-中介绍了浏览器如何处理和HTML文档相关的所有资源和兼容性的来源。
最后一篇文章介绍目前前端的现状和我的学习方法。
总述
前端之前
在前端这个职业出现之前，更准确的说是ajax技术出现之前，HTML文档的书写全是由服务器端开发人员（以下称为后端）编写，比如.jsp文件。
后端除了写一些标记语言和脚本之外，还会写一些只有服务器才能认识的语法，这其中最常见的就是名为插值的语法，它可以用在一个最简单数据展现功能上：表格。
后端如何把数据库的内容写进表格中？使用插值，或者更确切的说叫模版 ，服务器需要解析整个.jsp文件，把浏览器不认识的语法处理之后再发送给HTTP请求方（这里就是我们的浏览器了），这可以理解为服务器端渲染。
Ajax
ajax（Asynchronous Javascript And XML，异步JavaScript和XML）的出现，让更新网页局部内容不再需要服务器渲染整个.jsp文件，基于web的应用和基于数据的应用初现雏形，很快我们就要解放后端了。
ajax技术出现前后比较：
ajax-model
Node.js
从2009年 Ryan Dahl 提出基于V8创建一个轻量级web服务器开始至今，Node.js逐渐解放后端写网页的工作，前后端分离时代开始。
前文介绍过，V8是谷歌浏览器解释JS语言的引擎，它的优势是将脚本解析成机器码，性能可媲美二进制程序。
而Node.js除了这个核心之外，它还暴露了操作系统的一些接口给JS，我们可以通过JS读取本地文件、创建网络服务器等等。而这些功能在谷歌浏览器中是无法使用的，而Node.js所没有的是DOM和BOM，它只有基于ECMAScript标准的JS语言解析和运行。
现在的后端只负责提供网页所需的数据，而现在的前端 ，基于Node.js催生出无数的工具，它让我们可以搭建前端开发环境，自动化处理所有工作：文件改动自动刷新浏览器，脚本打包、压缩、混淆，项目自动发布，脚本测试等等。
前端分类
因为移动互联网的高速发展，现在前端主要分两类：移动前端和web前端。
移动前端主要工作是将HTML文档在中小屏的移动设备上浏览，而移动端的浏览器渲染内核全是webkit (android系统和iOS系统)，而webkit则是紧跟HTML5规范，无需考虑IE兼容性问题，所以也叫HTML5前端 。
web前端则主要考虑HTML网页在pc机的浏览器上运行，而pc机的操作系统，大部分都是windows，它捆绑了IE 6~8这些糟糕的浏览器，所以开发人员需要解决兼容性问题，当然如果是自己的网页，可忽略。
正文
现在的前端开发人员与很多技术和框架打交道：
Node.jsGitnpmgulpwebpackyarnReactVueAngular- ……
如何理清它们之间的关系，该如何学习，以下是我整理的学习顺序。
Git
多人合作开发项目，项目中的文件需要留痕才能控制版本，这就是Git的作用。还有很多比如SVN这种文件版本控制工具，而Git是前端开发使用最多的，我们的项目在这个技术中称为repository（仓库，简称repo）。
现在的互联网技术讲究开源，这样才能促进互联网的发展。而GitHub是基于Git技术的一个开源项目服务器，我们可以在上面找到很多精彩的东西。
GitHub需要花费才能创建私人的repo，但是我们可以搭建GitLab供自己或团队使用，它的功能跟GitHub没太大区别。
Git为windows操作系统提供了基于Linux操作系统的一个命令行工具Git shell，熟悉Linux命令的可以使用这个。
NPM
使用JS语言开发的库或框架（我们称之为package，简称包），使用npm这个包管理工具，用命令下载、更新这些package，Node.js默认安装了这个工具。还有其它包管理工具，比如bower、yarn等。
在项目中安装这些所需的包时，默认安装至项目根目录的node_modules文件夹中，如果包依赖其它包，那么会在包的根目录也会生成node_modules目录， npm会解决这种依赖并安装。
Git和NPM
package.json
我们用npm管理项目中使用到的包，不可能让项目中的每一个人都把所有包都安装一遍，所以npm使用package.json这个文件来管理包和其它一些脚本，首先在项目根目录输入以下命令可快速生成：
npm init --yes
查看package.json中的内容，发现只是个json格式的对象，这里只说明dependencies和devDependencies两个属性，以安装jQuery这个工具库为例：
npm juqery --save //这个命令会在dependencies属性中添加一条记录
npm jquery --save-dev //这个命令会在devDependencies属性中添加一条记录
两者通过名字可以了解，dependencies是项目中依赖的包，devDependencies是为了构建这个项目使用的包。
dependencies是房子，而devDependencies就是盖这个房子的工具。
而项目中其它开发人员只需要在命令行输入以下命令，就可以把两个属性中的所有包一次性安装完成：
npm i
因为默认npm服务器在国外，国内用户需要设置淘宝镜像才能稳定的下载、安装包及其依赖。
.gitignore
项目开发环境搭建完成之后，并且已经开始开发，我们将代码上传到GitLab进行版本控制时，无需将node_modules里面的包也上传，因为这些全是开源的，项目中不需要版本控制里面的文件。所以需要在项目根目录新建.gitignore文件，告诉Git不上传这个文件夹中的内容，而创建这个文件只能通过Linux系统命令才能创建，所以windows系统用户推荐使用Git shell。
忽略项目中的node_modules文件夹的上传，在.gitignore文件中添加一行：
node_modules
需要忽略其它文件（夹），请自行搜索书写规则。
JavaScript
没错，我们又谈到它了。
它是前端核心的核心，在Node.js的环境中，我们可以用express搭建web服务器，可以使用gulp和webpack做许多自动化工作，可以连接数据库等等，可以处理浏览器发起的请求……而这一切只需要你会JS。
标准
JS语言的标准：ECMAScript（后文简称ES）目前正在发展的版本是6和7，而6已基本定型，但是目前浏览器的JS引擎还无法做到完全的支持这些标准。所以需要借助工具，比如Babel，而Node.js最新版本支持大部分标准内容了。
而因为语言标准的不断发展，工具库和框架也在不断的升级，这就是前端的发展现状，每一天都会有新东西涌现。比如React版本直接从0.14直接跳到15，Node.js版本也从0.12.14直接跳到4.0.0。
ES 6 入门
注：ES 2015 即 ES 6，ES 2016 即 ES 7
规范
为了让JS能够模块化开发，发展出了一些写JS文件的规范，而按照规范编写的脚本文件，可以被重用。
还有诸如UMD等等规范，请自行搜索。
兼容性
还是因为IE浏览器，仍然有人使用，那就必须考虑兼容（甚至用脚本处理并兼容CSS 3的一些语法），需要引入一些能把ES 5标准中的功能使用ES 3标准实现的库，这些库称为shim和polyfill。shim库的鼻祖就是jQuery了，只不过现在版本的jQuery也不再支持IE 8了。
库和框架
先举几个例子：UI框架有Bootstrap、Amaze UI等，视图框架有React、Vue等，还有基于Node.js的后台服务器应用框架 egg 等。而库嘛，举个都知道的吧：jQuery。
库和框架需要你按照它的既定规则编写代码，往往写的时候很简单易懂，比如JSX语法糖，写React组件很清晰明了，但是这些代码浏览器的JS引擎是无法理解的，所以必须通过框架的解析才能用于生产环境中。
现在的库和框架大部门都采用ES 6甚至是ES 7标准来书写，也都会说明支持到IE的哪个版本，不过随着IE逐渐被边缘化，很多高版本的库和框架也都不再支持IE。
最后
总算是写完了这一系列。
其实你会发现，现在前端的一切复杂的概念和用法全是通过JS语言实现的，所以学习这门语言的基础概念比以往任何时候都重要。
作用域、this用法、原型和原型链、闭包、柯里化、函数式编程、virtual DOM、shadow DOM等等的一切基础知识和概念，其实都是通过灵活的使用JS这门语言所产生的。
你需要牢固的掌握JS这门语言的大部门概念，才能清晰的认识到一个框架的简单原理，再通过看源码学习到新的JS使用技巧。
只有这样，你才能在快速发展的前端行业抓住学习的方法和技巧。
