前端流行框架概述

流行框架階段·概覽

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. 它們的思路大部分都是“當需要顯示的數據和頁面狀態頻繁變化時，如何更加方便的更新頁面上的顯示”