前端技術總結（前端技術地圖）

瞭解到的前端新技術總結

在最近的一個月內，快速的瞭解一下。

不要求都精通（不可能），但要所有了解一下。

而後找其中一個深刻學習一下。

本文對整個前端包括node端涉及到的技術進行一個梳理，對各個知識點進行準肯定位。 

 

 

1、前端模塊化

隨着前端需求複雜度不斷增長，一個公司內的前端開發人員也迅速增長，前端須要和後端開發同樣的模塊化支持，來方便的引用外部的開源的js代碼，團隊之間的配合。所以前端模塊化悄然滋生，無奈js天生不健全，不支持繼承，不支持接口，沒有類的概念。因此須要經過function模擬實現。而這種實現方案也是百家爭鳴，如今總算有了比較統一的標準規範了。

（es6中，這些都不是問題了）

commonJS模塊規範

cmd和amd

require.js sea.js

nodejs中的模塊化方案

 

2、前端工程化

前端需求複雜了，前端這個工程也是一個大工程了。但不少前端的重複性的工做還須要人來手動完成，好比壓縮合並js、css，編譯sass、less，合併精靈圖等，如今利用nodejs這個平臺的js能夠操做文件，一系列的前端構建工具也在npm平臺應運而生。

已歸類：

構建工具

grunt 

gulp

……

前端模塊化管理工具（包管理工具）

bower

npm 如今定位是JavaScript模塊管理工具（包管理工具）。開始主要針對node.js平臺，如今愈來愈多開發者把它用於前端。

……

淘寶前端模塊化管理工具 spm

前端工具包（工具集 utilities）：

webpack

fis（百度前端管理工具、方案）

未歸類：

phantomjs

browserify 功能：編譯js。開發者像寫node.js代碼同樣寫前端代碼，而後用它編譯和合並文件。

 

 

3、前端框架

前端框架是包括css js iconfont等的一整套前端開發方案，他能夠用來快速的開發前端項目。

傳統的前端框架，好比YUI，好比Bootstrap。很少作介紹。

這裏不得不說道，js模板引擎（瞭解更多）

MVVM前端框架

react

angular 2.0

vue

 

4、nodejs

一個用js開發網站的後端平臺

npm 

package.json

nodejs api