框架
根據(jù)REACT官網(wǎng)的推薦，選擇的框架為 React + Redux + wepack + es6
架構(gòu)為MVC（Model-View-Controller）：
<li>model持有UI要展現(xiàn)的數(shù)據(jù)（store）</li>
<li>View即UI的展現(xiàn) （React）</li>
<li>Controller用于控制 (Reducer)</li>
經(jīng)典前端目錄結(jié)構(gòu)
- webapp/ # webapp根目錄
- src/ # 開發(fā)目錄
+ css/ # css資源目錄
+ img/ # webapp圖片資源目錄
- js/ # webapp js&jsx資源目錄
- components/ # 標(biāo)準(zhǔn)組件存放目錄
- foo/ # 組件foo
+ css/ # 組件foo的樣式
+ js/ # 組件foo的邏輯
+ tmpl/ # 組件foo的模板
index.js # 組件foo的入口
+ bar/ # 組件bar
+ lib/ # 第三方純js庫
... # 根據(jù)項(xiàng)目需要任意添加的代碼目錄
+ tmpl/ # webapp前端模板資源目錄
a.html # webapp入口文件a
b.html # webapp入口文件b
- assets/ # 編譯輸出目錄肥印，即發(fā)布目錄
+ js/ # 編譯輸出的js目錄
+ img/ # 編譯輸出的圖片目錄
+ css/ # 編譯輸出的css目錄
a.html # 編譯輸出的入口a
b.html # 編譯處理后的入口b
+ mock/ # 假數(shù)據(jù)目錄
app.js # 本地server入口
routes.js # 本地路由配置
webpack.config.js # webpack配置文件
gulpfile.js # gulp任務(wù)配置
package.json # 項(xiàng)目配置
README.md # 項(xiàng)目說明
REACT
React 的主要思想是通過構(gòu)建可復(fù)用組件來構(gòu)建用戶界面妄讯。所謂組件其實(shí)就是 有限狀態(tài)機(jī)依鸥，通過狀態(tài)渲染對應(yīng)的界面拆火，且每個組件都有自己的生命周期抗悍，它規(guī)定了組件的狀態(tài)和方法需要在哪個階段進(jìn)行改變和執(zhí)行亡笑。
生命周期：
// react-lifecycle mixin
import React from 'react';
import ReactDom from 'react-dom';
import LifeCycle from 'react-lifecycle';
const body = document.body;
const MyComponent = React.createClass({
mixins: [LifeCycle],
render() {
console.log('render');
return null;
}
});
ReactDom.render(<MyComponent />, body);
ReactDom.unmountComponentAtNode(body);
ReactDom.render(<MyComponent />, body);
ReactDom.render(<MyComponent />, body);
在自定義 React 組件時，根據(jù)需要會在組件生命周期的不同階段實(shí)現(xiàn)不同的邏輯偿荷。為了查看 組件生命周期的執(zhí)行順序窘游，你可以使用 react-lifecycle mixin，將此 mixin 添加到需要觀察的組件中跳纳，當(dāng)任何生命周期方法被調(diào)用時，都能在控制臺觀察到對應(yīng)的生命周期的調(diào)用時狀態(tài)贪嫂。
Redux(數(shù)據(jù)流)
state
這個對象就像 “Model”寺庄，區(qū)別是它并沒有 setter（修改器方法）。因此其它的代碼不能隨意修復(fù)它力崇，造成難以復(fù)現(xiàn)的 bug斗塘。
要想更新 state 中的數(shù)據(jù)，你需要發(fā)起一個 action亮靴。
{
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
action
Action 就是一個普通 JavaScript 對象
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
reducer
reducer 只是一個接收 state 和 action馍盟，并返回新的 state 的函數(shù)。
function visibilityFilter(state = 'SHOW_ALL', action) {
if (action.type === 'SET_VISIBILITY_FILTER') {
return action.filter;
} else {
return state;
}
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
case 'TOGGLE_TODO':
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
default:
return state;
}
}
webpack
官網(wǎng)對webpack的定義是MODULE BUNDLER茧吊，他的目的就是把有依賴關(guān)系的各種文件打包成一系列的靜態(tài)資源贞岭。
每個項(xiàng)目下都必須配置有一個 webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件項(xiàng)
plugins: [commonsPlugin],
//頁面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件輸出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加載器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解決方案配置
resolve: {
root: 'E:/github/flux-example/src', //絕對路徑
extensions: ['', '.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
ES6
ECMAScript 6.0（簡稱ES6）是JavaScript語言的下一代標(biāo)準(zhǔn).
Bable
能夠?qū)崿F(xiàn) ES6 到 ES5 的代碼轉(zhuǎn)換多虧了 Babel (以前叫 6to5) 以及 Traceur 之類的項(xiàng)目八毯。這些轉(zhuǎn)換器 (更準(zhǔn)確地說是源代碼到源代碼的編譯器) 可以把你寫的符合 ECMAScript 6 標(biāo)準(zhǔn)的代碼完美地轉(zhuǎn)換為 ECMAScript 5 標(biāo)準(zhǔn)的代碼，并且可以確保良好地運(yùn)行在所有主流 JavaScript 引擎中瞄桨。
ES6語法例子
import 'core-js/shim';
export default class Person {
constructor( name ) {
this.name = name;
}
sayHello() {
return `Hello ${ this.name }!`;
}
sayHelloThreeTimes() {
let hello = this.sayHello();
return `${ hello } `.repeat(3);
}
}
參考資料：
react
http://segmentfault.com/a/1190000003940416?utm_source=APP&utm_medium=iOS&utm_campaign=socialShare&from=groupmessage&isappinstalled=1
http://top.jobbole.com/15576/
react-router
https://github.com/rackt/react-router
redux
http://camsong.github.io/redux-in-chinese/
https://github.com/rackt/redux examples
redux-router
https://github.com/acdlite/redux-router examples
redux-form
https://github.com/erikras/redux-form
babel
es6
http://es6.ruanyifeng.com/#docs/intro
webpack
http://segmentfault.com/a/1190000003499526
http://segmentfault.com/a/1190000002551952
https://blog.crazycoder.cc/p/react-using-webpack
fetch
http://www.thinksaas.cn/group/topic/396019/
http://www.tuicool.com/articles/QZBJ7zJ
