前端流行框架概述

流行框架階段·概覽

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