寫在前面
花個一周多看了下最新的前端技術，感覺受益匪淺，前端還是大有搞頭的，跟后端越來越像了。
主要學習內容：npm、webpack、es 6、react、ant design、flux、reflux；這里稍微小結下。
NPM（node package manager）
npm是node的包管理工具，類似于maven；將開發者從繁瑣的包管理工作（版本、依賴等）中解放出來，更加專注于功能的開發。
安裝方法
新版的nodejs已經集成了npm，所以去下個nodejs安裝即可完成npm的安裝。
主要命令：安裝、卸載、更新、查看、搜索等
npm install;npm uninstall;npmupdate;npm ls;npm search;
我們重點關注下安裝命令，分兩種，本地安裝和全局安裝。
本地安裝：npm install webpack package
會被下載到當前所在目錄的node_modules文件夾下，只能在當前目錄下使用。
全局安裝：npm install –g webpack package
會被下載到到特定的系統目錄下，安裝的package能夠在所有目錄下使用。
另外，還可以通過package.json配置文件進行安裝，類似于pom.xml；我們可以將項目依賴的包在package.json這個文件里聲明，然后輸入npm install命令完成包的安裝，一般項目中，我們都會使用這種方式。
Webpack
模塊加載器兼打包工具，能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。
安裝（一般作為全局安裝）：
npm install webpack –g
webpack配置：
通過配置文件配置：webpack.config.js
主要配置頁面入口文件、入口文件輸出配置、加載器配置、插件配置等。
運行webpack
輸入webpack --display-error-details命令即可，其中--display-error-details用于打印詳細的錯誤信息，方便調試。
其它參數，有興趣的可以參考官網等資料。
ES 6(ECMAScript 6), 又稱ECMAScript 2015
ES6是一個標準規范，JavaScript是ES6的一個實現。
我們目前的前端框架會盡量使用ES6語法，因為這是趨勢，可讀性強，也符合后端開發思維，并且ES6規范已經出來了，離普及只是時間問題。
瀏覽器支持情況
目前瀏覽器對ES6語法的支持較差，但是可以使用一些轉碼器，如Babel轉碼器，能將ES6語法轉為ES5語法，從而在各大瀏覽器上正常運行。
另外，webpack自帶babel-loader加載器，也可以加載ES6語法的js文件。
語法舉例
具體細節的語法很多，就不說了，簡單舉幾個例子：
Class語法
以前我們JS是通過function來構造類的，跟java等語言差異較大, ES6引入了class概念，如下示例。
Import, export, extends語法
React
用于構建用戶界面的Javascript庫 ,其實就是一個js庫。
機制
簡單說下， react主要涉及虛擬dom和React.Component組件，每個React組件都有一個state狀態，state變化后會重新調用組件的 render 方法渲染整個組件的 UI，這里不是直接操作dom，而是通過diff算法對虛擬dom進行一次計算，得到需要更新的dom，然后把需要更新的那部分dom寫入到真正地dom里。另外組件是可以復用的；
個人認為，react開發主要指的是組件開發，頁面上所有的內容都可以封裝成組件，每個組件都有state狀態，組件隨著state的變化而變化。
安裝react
npm install react react-dom --save另外還要安裝加載器：
babel-loader //進行轉碼
css-loader //對css文件進行打包
style-loader //將樣式添加進 DOM 中
npm install babel-loader css-loader style-loader –save安裝轉碼規則：
npm install babel-preset-es2015 babel-preset-react --save具體可見demo中package.json添加的依賴。
使用示例
一個有狀態的組件示例，關注下react組件的生命周期方法
Ant Design
其實就是一系列基于react實現的前端組件，包括按鈕、圖標、表單、輸入框、評分等組件。
類似的還有React-Bootstrap，后者的風格是Twitter 的Bootstrap風格。
ant design有點模仿React-Bootstrap的感覺。
安裝
npminstallantd
風格樣式示例
官網有很詳細的關于每個組件的介紹，還附帶源碼：
http://ant.design/docs/react/introduce
使用示例
具體見demo源碼，其實跟平常的react組件的使用一樣；
flux和reflux
背景
React在設計之初只關注在View本身上，其余部分如數據的獲取，事件處理等，全然不在考慮之內。
flux思想
flux是一種思想，用來解決react未解決的數據獲取和事件處理。
View： 視圖層
Action（動作）：視圖層發出的消息（比如mouseClick）
Dispatcher（派發器）：用來接收Actions、執行回調函數
Store（數據層）：用來存放應用的狀態，一旦發生變動，就提醒Views要更新頁面
Flux 的最大特點，就是數據的"單向流動"。如下圖：
flux的實現Reflux
flux思想的一種實現，其余的實現還有redux，比reflux復雜些，暫時沒去了解，現在網上很多項目是使redux的,這個后續我們可以慢慢引進。
這里，我們主要關注reflux
簡而言之，Reflux里有兩個組件：Store和Action。Store負責和數據相關的內容：從服務器上獲取數據，并更新與其綁定的React組件（view controller）;Action是一個事件的集合。
流程圖如下：
- 用戶的動作在組件上觸發一個Action
- Reflux會調用對應的Store上的callback（自動觸發）
- 這個callback在執行結束之后，會顯式的觸發（trigger）一個數據
- 對應的組件（可能是多個）的state會被更新
- React組件檢測到state的變化后，會自動重繪自身
Demo例子，包含源碼
spring + spring mvc + mybatis + react + reflux + webpack Web工程例子
參考內容：
http://es6.ruanyifeng.com/#docs/style
http://www.tuicool.com/articles/VB7nYn
http://reactjs.cn/react/index.html
http://ant.design/docs/react/introduce
文章列表
留言列表
