前一段時間做了一個小項目，時間比較緊，就一個人月。最終希望能夠通過微信公眾號鏈接啟動應用。 項目的業務細節就不多說了，主要是想分享一下做這個項目技術方面的一些經驗。 技術選型 參考範圍大致三種：AngularJS，Angular，React。 這裡可能會有些困惑，AngularJS和Angular不 ...
前一段時間做了一個小項目，時間比較緊，就一個人月。最終希望能夠通過微信公眾號鏈接啟動應用。
項目的業務細節就不多說了，主要是想分享一下做這個項目技術方面的一些經驗。
技術選型
參考範圍大致三種：AngularJS，Angular，React。
這裡可能會有些困惑，AngularJS和Angular不是一個東西嗎？
沒錯，它們是一個東西，但也不是一個東西。好了，廢話少說，首先說明一下AngularJS和Angular的區別。
引用官方文檔中的一句話
Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.
這回很清晰了。
Angular：指的是 v2.x 及以後的版本
AngularJS：特指 v1.x
由於Angular從2.0以後版本更新比較大，所以為了做區分，只能想出這麼一招了。
好了，回歸正題，這三種技術怎麼選擇？
以下是我當時的考慮：
AngularJS：由於之前兩個項目一直在用AngularJS，所以使用起來並不陌生，相對buffer也會少很多(前面說了，時間比較緊，只有一個月)。碰到問題還可以和大家商量一下。
但是AngularJS性能及體積是個問題，尤其是要在手機端運行。
Angular: 性能不是問題，體積也還好。但是接觸比較少，之前只做過一個Web端的項目。
React: 前一段時間剛剛研究過，性能，體積都不是問題。但是同Angular一樣，沒有實際項目經驗啊，出了問題就只能百度了。
經過以上的一番權衡，其實我心裡是想用React的。其中一個原因是經過前一段時間的學習，很想通過一個項目積累一些React的開發經驗，
另外一個原因是React無論從性能上（得益於Virtual DOM）還是思想上（組件化）都更為先進。
基於以上兩點原因，所以在和項目經理確定技術選型的時候，我極力推薦React，雖然可能會存在一些buffer，但是從可持續化發展的角度考慮（自己瞎猜的...），最終項目經理同意了。
項目框架搭建
在GitHub上看了很多的boilerplate工程，或多或少都和自己的需求有些出入。
所以，最終自己通過React官方的create-react-app cli搭建了一個seed工程。
1. 準備環境
2. 安裝creat-react-app cli
npm install -g create-react-app3. 創建工程
create-react-app react-seed然後進入項目根目錄react-seed安裝相關依賴
cd react-seed
npm install4. 暴露配置項
由於採用create-react-app創建的項目webpack等配置信息都是封裝好的，所以為了靈活修改相關配置，可以通過以下命令讓封裝好的配置文件暴露出來。
npm run eject創建好的項目目錄如下：
5. 本地服務啟動
// 啟動本地server用於開發
npm run start將會在本地 3000 埠啟動
redux集成
熟悉React的可能都知道，React是單向數據流，所以有些情況下單單依賴React自身無法實現組件之間的通信，這時就需要Redux登場了。
本文不介紹Redux的語法及思想，只說明如何集成。
首先需要安裝Redux相關依賴，由於不同版本之間可能存在相容性問題，所以安裝的時候最好制定版本：
npm install [email protected] --save
npm install [email protected] --save
npm install [email protected] --save然後就可以在項目中引入redux了，可以像如下方式組織目錄結構：
路由集成
npm install [email protected] --save路由支持嵌套，代碼如下：
const routes = (
<Router history={hashHistory}>
<Route path="/home" component={Layout} onEnter={onEnter}>
<IndexRoute getComponent={home} onEnter={onEnter}/>
<Route path="/home" getComponent={home} onEnter={onEnter}/>
<Route path="/detect" getComponent={detect} onEnter={onEnter}/>
<Route path="/about" getComponent={about} onEnter={onEnter}/>
</Route>
<Route path="/unauthorized" getComponent={unauthorized}/>
<Redirect from="*" to="/home" />
</Router>
);
export default routes;國際化方案
採用的是常用的react-intl
npm install [email protected] --saveUI組件集成
基於React的UI組件在這裡推薦兩個，一個是螞蟻金服的Ant Design；另外一個是Material-UI。
兩個都很不錯，本人使用的是Ant Design。
npm install [email protected] --savefetch集成
關於請求數據有很多種方式，本人用的是fetch。
npm install [email protected] --save可以簡單封裝一下，如下：
import 'whatwg-fetch'
import loggerService from './logger'
let notAuthorizedCounter = 0;
let fetchService = {
fetch: (url, method, header, body) => {
if (!header) {
header = {}
}
return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
loggerService.log('fetchService failed:', exception);
// token過期，重新獲取token併發起請求
if (exception.code === '401' || exception.code === '403') {
notAuthorizedCounter++;
// 最多重試3次
if (notAuthorizedCounter > 2) {
notAuthorizedCounter = 0;
loggerService.warn("401 or 403 received. Max attemps reached.");
return;
} else {
return fetchService.fetch(url, method, header, body);
}
}
});
},
get: (url, header) => {
return fetch(url, {
method: 'GET',
headers: header
}).then((response) => {
return response.json();
});
},
post: (url, header, body) => {
header['Content-Type'] = 'application/json';
return fetch(url, {
method: 'POST',
headers: header,
body: JSON.stringify(body)
}).then((response) => {
return response.json();
});
}
};
export default fetchService;項目部署
首先對項目進行打包。
npm run build可以通過以下命令在本地環境運行打包後的項目。
serve -s build如果項目中引入路由的時候使用的是BrowserRouter,
那麼當執行npm run build打包之後，本地打開index.html文件，會出現空白頁面。
原因是BrowserRouter是用瀏覽器history對象的方法去請求伺服器，
如果伺服器沒有配置相對應的路由去指向對應的頁面，路由會找不到資源。
BrowserRouter會變成類似這樣的路徑http://111.230.139.105:3001/detail/9459469， 這樣的路徑在訪問伺服器時，伺服器會認為是請求查找某個介面數據。
所以這時候必須使用HashRouter，這時候訪問具體頁面時就是http://111.230.139.105:3001/#/detail/9459469
項目源碼已經開源到github上，喜歡的給個Star支持下吧！（^_^）
