react+flux 仿淘宝购物车
react+flux 仿淘宝购物车
之前用react写了个表格的单表组件，然后在网上又看到别人家写的一些表格组件，瞬间感觉自己弄的东西好low。不过在写表格组件的时候遇到过一个关于react单向数据流传递的问题，通过一层一层子组件传递完成。而在网上却看到说可以用flux这个的store来方便实现。所以今天特地来实际操作一把，浅鄙见识大家多多指教。
目录结构
这是flux官方推荐的目录结构，其中组件放在components当中，stores中实现数据结构的存储，actions实现控制器的功能。这样就可以实现一个前端的mvc模型。因为react在前段将view层做得很好，不能单靠它实现mvc，所以facebook就又来了个flux两个组合实现一个前端mvc模型。其中app是启动应用。
具体代码
说了这么多，还是赶紧上代码。
先看看stores中存储的的东西。
/*
*购物车商品模块
*/
var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var Constants = require('../constants/Constants');
var assign = require('object-assign');
var CHANGE_EVENT = 'change';
var _moneyCateray = {};
var _storage = localStorage;
_moneyCateray = JSON.parse(_storage.getItem('_moneyCateray'));
/**
*添加购物车商品
*/
function countsPur(purchase){
/**
*初始化检测
*/
if(isEmpty()){
_moneyCateray[purchase.id] = {
price:0,
count:1,
detail:purchase
};
_moneyCateray[purchase.id].price += parseFloat(purchase.price);
_storage.setItem('_moneyCateray',JSON.stringify(_moneyCateray));
return;
}
/**
*查看是否有同类单品
*/
var flag = 0;
for(var i in _moneyCateray){
if(i == purchase.id){
flag = 1;
break;
}
}
/**
*将单品价格分类叠加
*/
if(flag){
_moneyCateray[purchase.id].price += parseFloat(purchase.price);
_moneyCateray[purchase.id].count += 1;
}
else{
_moneyCateray[purchase.id] = {
price:0,
count:1,
detail:purchase
};
_moneyCateray[purchase.id].price += parseFloat(purchase.price);
}
_storage.setItem('_moneyCateray',JSON.stringify(_moneyCateray));
}
/**
*删除商品
*/
function deletePur(id){
delete _moneyCateray[id];
_storage.setItem('_moneyCateray',JSON.stringify(_moneyCateray));
}
/**
*删除一件商品的数量
*/
function deleteCount(id){
if(_moneyCateray[id].count!=0){
_moneyCateray[id].count -= 1;
}else{
_moneyCateray[id].count = 0;
}
_storage.setItem('_moneyCateray',JSON.stringify(_moneyCateray));
}
/**
*检测_moneyCateray是否为空
*/
function isEmpty(){
for(var i in _moneyCateray){
return false;
}
return true;
}
var Store = assign({}, EventEmitter.prototype, {
/**
*获取总价
*/
getMoney:function(){
return JSON.parse(_storage.getItem('_moneyCateray'));
},
/**
*侦听事件变化
*/
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
}
});
/**
*注册事件
*/
AppDispatcher.register(function(action) {
var purchase;
switch(action.actionType) {
case Constants.PURCHASE_ADD:
purchase = action.purchase;
if (purchase !== '') {
countsPur(purchase);
Store.emitChange();
}
break;
case Constants.PURCHASE_DELETE:
deletePur(action.id);
Store.emitChange();
break;
case Constants.PURCHASE_SUB:
deleteCount(action.id);
Store.emitChange();
break;
default:
// no op
}
});
module.exports = Store;
其中AppDispatcher是flux推荐的用来注册事件的，我个人感觉是通过这个来实现控制器功能，调用相应的函数功能。
下面来看看ui组件部分的代码
上面是把组件分拆出来的，如下图
将组件分拆，react官网上也这么推荐这样将一个组件尽量分拆出来http://facebook.github.io/react/docs/thinking-in-react.html。
单个商品
var React = require('react');
//var Actions = require('../actions/Actions');
var Per = React.createClass({
getInitialState: function(){
/**
*商品id，价格，详情，图片地址
*/
return {
id:this.props.id,
price:this.props.purchase.price,
detail:this.props.purchase.detail,
url:this.props.purchase.url,
}
},
render: function(){
var price = this.state.price;
return(
<div className="per">
<img src={this.state.url} />
<h3>¥<span>{(parseFloat(price)).toFixed(2)}</span></h3>
<div className="title">{this.state.detail}</div>
<a href="javascript:void(0)" className="button orange addcart" onClick={this._OnSave}>加入购物车</a>
</div>
);
},
_OnSave: function(){
this.props.OnSave(this.state);
}
});
module.exports = Per;
商品列表
/*
*购物列表
*/
var React = require('react');
var Per = require('./Per');
var Actions = require('../actions/Actions');
var Store = require('../stores/purchase');
var PerList = React.createClass({
getInitialState: function(){
/**
*商品id，价格，详情，图片地址
*/
return {
list:this.props.lists
};
},
componentWillUnmount: function(){
},
componentDidMount: function() {
Store.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
Store.removeChangeListener(this._onChange);
},
render: function(){
var list = [];
var purchase = this.state.list;
for(var i in purchase){
list.push(<Per purchase={purchase[i]} key={i} id={i} OnSave={this._onSave} />);
}
return(
<div className="demo">
{list}
</div>
);
},
_onChange: function() {
//this.setState(getTodoState());
},
_onSave: function(pur){
Actions.addPur(pur);
}
});
module.exports = PerList;
购物车
/*
*购物车列表
*/
var React = require('react');
var Store = require('../stores/purchase');
var Actions = require('../actions/Actions');
var PurchaseItem = require('./PurchaseItem');
var PurchaseCar = React.createClass({
getInitialState: function(){
return {
purchaseCar:Store.getMoney()
};
},
componentDidMount: function() {
Store.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
Store.removeChangeListener(this._onChange);
},
render: function(){
var car = this.state.purchaseCar;
var PuchaseCarList = [];
for(var i in car){
PuchaseCarList.push(
<PurchaseItem
key={i}
purchase={car[i]}
AddItem={this._addItem}
SubItem={this._subItem}
DeleteItem={this._deleteItem}/>);
}
return(
<div>{PuchaseCarList}</div>
);
},
_onChange: function(){
this.setState({purchaseCar:Store.getMoney()});
},
_addItem: function(pur){
Actions.addPur(pur.detail);
},
_subItem: function(id){
Actions.subPur(id);
},
_deleteItem: function(id){
Actions.deletePur(id);
}
});
module.exports = PurchaseCar;
通过上面几块代码就实现了一个简单的前端的mvc模型。具体效果如图
