前端學習小結

寫在前面

花個一週多看了下最新的前端技術，感受受益不淺，前端仍是大有搞頭的，跟後端愈來愈像了。

主要學習內容：npm、webpack、es 六、react、ant design、flux、reflux；這裏稍微小結下。

NPM（node package manager）

npm是node的包管理工具，相似於maven；將開發者從繁瑣的包管理工做（版本、依賴等）中解放出來，更加專一於功能的開發。

安裝方法

新版的nodejs已經集成了npm，因此去下個nodejs安裝便可完成npm的安裝。

主要命令：安裝、卸載、更新、查看、搜索等

 ; update;; ;npm install;npm uninstallnpmnpm lsnpm 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

install react react-dom --savenpm 

另外還要安裝加載器：

babel-loader //進行轉碼

css-loader //對css文件進行打包

style-loader //將樣式添加進 DOM 中

install babel-loader css-loader style-loader –savenpm 

安裝轉碼規則：

install babel-preset-es2015 babel-preset-react --savenpm 

具體可見demo中package.json添加的依賴。

使用示例

一個有狀態的組件示例，關注下react組件的生命週期方法

Ant Design

其實就是一系列基於react實現的前端組件，包括按鈕、圖標、表單、輸入框、評分等組件。

相似的還有React-Bootstrap，後者的風格是Twitter 的Bootstrap風格。

ant design有點模仿React-Bootstrap的感受。

安裝

installnpmantd

風格樣式示例

官網有很詳細的關於每一個組件的介紹，還附帶源碼：

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是一個事件的集合。

流程圖以下：

1. 用戶的動做在組件上觸發一個Action
2. Reflux會調用對應的Store上的callback（自動觸發）
3. 這個callback在執行結束以後，會顯式的觸發（trigger）一個數據
4. 對應的組件（多是多個）的state會被更新
5. 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

http://www.open-open.com/news/view/e652c6

http://www.ruanyifeng.com/blog/2016/01/flux.html