前端流行框架概述

流行框架阶段·概览

1. 如今有什么东西在流行，咱们要学什么？

流行框架阶段的学习，大部分经历会花在AngularJs的框架的学习上。

不过，在真正开始学习AngularJs框架以前，还能够花一点小时间，带领你们认识一下如今都有什么框架在流行着，它们的功能都是什么。虽然不会真正学习它们的用法，可是至少可以了解还有这些东西存在，对于扩展视野和面试有一些帮助。

2. 从NodeJs谈起

在NodeJs出现以前，JavaScript一直以来被视做一种浏览器脚本，它的应用范围更可能是在浏览器之中，操做一下各类浏览器对象（BOM）或者文档对象（DOM）。因为浏览器的安全性限制，JavaScript这门语言，一直缺少一种读写本地文件、进行跨域访问甚至于调用操做系统自带API的能力。

而NodeJs的出现改变了这一点。NodeJs作了什么呢？它提供了一种不一样于浏览器的、功能更增强大的JavaScript运行环境，运行在NodeJs中的JavaScript有着和运行在浏览器中JavaScript不一样的API，拥有更高的权限，能够访问本地文件、访问网络数据。因而，这就催生出了许多基于JavaScript来书写的前端工具。帮助咱们更好的进行开发。

好比说，咱们你们都很熟悉的LESS。它是读取LESS文件而后生成出CSS文件，想要达到这个功能，若是没有NodeJs的话，就只能借助于其余语言了。而在有NodeJs以后，就能够用JavaScript来读取本地的LESS文件，而后生成出CSS文件。

[注意:NodeJs的课程应该是在流行框架阶段以后。]

3. 还有什么流行框架呢？

1. 包管理工具
   1. 所谓的包管理工具，其实就是把各类前端的库（相似于jquery、bootstrap这种的）打包存储在一个专门的服务器上，而后程序员开发时可使用工具从服务器上下载这些包，放到本身的文件夹下。这样就不须要处处找各类框架的官方网站来下载了。
   2. 一般来讲，包管理工具还容许你生成一个配置文件，配置文件记录了这个项目中用到了哪些包。有些时候，把这个配置文件共享给朋友，他就能够下载你所指定的那些第三方库了。这在共享项目时很常见。
   3. 常见的包管理工具
      1. NodeJs自己的npm工具。
      2. bower。（随着npm功能愈来愈强大，逐渐被淘汰中）
2. 项目自动化工具
   1. 在开发过程当中，咱们常常会遇到移动文件、合并文件、对JavaScript文件进行压缩、把LESS翻译成CSS放到指定的位置上之类的工做。若是每次修改源代码都把这些工做从新作一遍的话，会很是的浪费时间。因此，就有了将这些工序自动化的工具。
   2. 常见的项目自动化工具
      1. gulp。
      2. grunt。（逐渐变得不流行，被gulp以及其余替代。）
      3. webpack。（webpack不只仅是一个自动化工具，但它也有自动化的能力，最近最流行。）
3. CSS预编译工具
   1. 解决一些CSS存在的问题，好比LESS。总之就是一种被强化过的CSS语言，提供一些新的语法来完成一些更方便的功能。
   2. 常见的CSS预编译语言：
      1. LESS
      2. SASS
      3. Stylus
   3. 还有一种工具，虽然不是预处理，但也是对CSS文件作处理的：
      1. postCSS（将CSS文件输入，而后输出被处理过的CSS文件。好比说，输入的CSS不带-webkit-之类的浏览器前缀，可是输出时却带上了）
4. JavaScript预编译工具
   1. 相似于CSS预编译语言，JavaScript预编译语言也是用于解决JavaScript现有版本中存在的一些问题的。
   2. 常见的JavaScript预编译工具：
      1. babel。（把ES6代码编译成ES5或者ES3代码，虽然都是JavaScript，可是ES6在语法特性上要更加的强大，解决了先前版本的很多问题）
      2. Typescript。（类型化的JavaScript，若是有时间咱们能够提一下。另外，AngularJs2就是使用Typescript作开发的。）
      3. coffeescript
      4. dart
5. UI库
   1. bootstrap大法好。总之就是相似于bootstrap的各类UI框架，一般都会包括CSS部分和JS组件部分。
   2. 这类库太多太杂，就很少提了。
6. 模块化与模块加载
   1. 模块化的问题在现阶段很难讲解，总的来讲就是一套组织JavaScript代码结构的思路。举个小例子：咱们想要封装一个相似于jquery的库，能够先封装一个模块叫作core，用于管理代码总体结构;而后再封装一个模块selector，里面写的全都是选择器的功能；而后在封装一个模块ajax，里面全都是XHR、jsonp之类的功能；而后总体的结构就是，当咱们须要ajax时就用ajax，当我须要selector时就用selector，而后这两个模块都须要core，core就会被自动加载……
   2. 好吧，看不懂就算了。关于模块化的内容，在NodeJs阶段的课程中会用大概一成天的时间来说。这已经算是一种开发的思惟方式了，须要必定时间来体会的。
   3. 如今常见的模块化框架有requirejs、seajs、webpack、browserfy等等，其中后二者比前二者功能更多。
7. 网页应用框架
   1. 专门研究当页面局部刷新愈来愈多，单一页面的功能愈来愈复杂时，如何更好的组织代码、更方便地改变页面显示状态的框架。
   2. 常见的有AngularJs，React，VueJs，Backbone，Ember，KnockOut，Avalon……
   3. 它们的思路大部分都是“当须要显示的数据和页面状态频繁变化时，如何更加方便的更新页面上的显示”