Reflux
Reflux , flux , redux 都是处理React数据层面的一个框架（插件、库），定义了action , store 来传递数据的;
作用都一样，唯一的不同是提供的api不同，因此会使用一个，其他都会了；
项目实例
React项目目录结构：
css目录，是网站样式目录
bootstrap.css框架
index.less页面样式
data目录，模拟异步请求的假数据
fonts目录，里面的文件是bootstrap引用的字体文件
image目录里面有两个目录
banner目录是页面banner的背景图片
item目录是网站每个网址的北京图片
logo图片
js目录引用了4个库
jquery库是用来发送异步请求的
React库
React-router库
Reflux库
Index.jsx在这个文件中书写业务逻辑
Index.html文件是项目的入口文件
fis-conf.js文件是项目的编译配置文件
制作CSS3开场动画
对于一个盒子的边是不能交叉的，因此实现这种动画，我们就不能只用一个盒子，至少需要了两个盒子，伪类可以实现盒子，一个元素就有两个伪类，这样就可以实现两个元素了，对于元素我们可以对它进行投影，而且每个盒子的投影个数是没有限制的，因此可以在盒子的两端实现投影；对于投影与原元素的关系，元素的宽度高度决定投影的宽度和高度，因此想控制投影的宽高可以控制盒子的宽高实现；
我们要制作CSS3动画，就要找到动画关键帧；
在React的路由中定义路由的规则同其他代码库定义路由规则是一样的，
/:query 定义动态的路由参数；
Reflux
action store component
component可以调用action发送消息
action将该消息映射到store中
store根据消息不同对数据做相应的处理，并传递给component供组件渲染页面
第一个组件和最后一个组件不一定是同一个组件
这样就实现了不同组件之间的消息传递
对于最后一个组件想要接收消息
必须通过混合监听这个store
创建action用Reflux.createActions创建
参数是一个数组，数组中的每个成员表示这个action可以发送的消息
创建store用Reflux.createStrore创建
参数是一个对象，这个对象是用来描述这个store的，
对象有个属性叫listenables，值是一个数组，数组中每个成员是一个action，也就是说写在这个数组中的每个action发送的消息，都可以在store中监听，如果想监听这些action动作,就要在store的对象中定一个这些监听方法，注意这些监听方法是以"on"开头的；
//第一步创建action
var DemoAction = Reflux.createActions(['say']);
//第二步创建store
var DemoStore = Reflux.createStore({
listenables:[DemoAction],
onSay: function(msgs){
console.log(msgs,111)
}
})
DemoAction.say('hellossss');
hellossss 111
input通过hash来传导
goSearch:function(e){
// console.log(e.keyCode)
if(e.keyCode == 13){
var val = e.target.value;
ReactRouter.HashLocation.replace('/search/' + val)
}
}
(function(){
var bannerNum = 2;
var itemNum = 33;
var DataBase = [];//存放sites.json接口请求的数据，将该数据缓存在前端
var $loadProcessDOM = $('.load-process');
//监听type路由
var TypeAction = Reflux.createActions(['changeType']);
//
var TypeStore = Reflux.createStore({
listenables:[TypeAction],
onChangeType:function(query){
// console.log(query,222)
var result = [];
DataBase.forEach(function(obj){
// console.log(obj,111)
if(obj.type == query){
result.push(obj)
}
})
this.list = result;
this.trigger(this.list);
// console.log(this.list)
}
})
var mapObj = {//搜索到重复的obj就返回true
filte:function(obj,result){
return result.some(function(value,index){
console.log(value == obj,3)
return (value == obj)
})
}
}
var SearchAction = Reflux.createActions(['searchSite']);
var SearchStore = Reflux.createStore({
listenables:[SearchAction],
onSearchSite:function(query){
var result = [];
DataBase.forEach(function(obj){
for(var i in obj){
if(obj[i].indexOf(query) > -1 ){
if( result.length == 0 || !mapObj.filte(obj,result)){
result.push(obj)
}
}
}
})
this.list = result;
this.trigger(this.list);
}
})
//getSiteList被Index组件，type组件，seach组件公用，我们可以提取出来
var getMethods = {
getBgImgUrl:function(){
return 'url(img/item/item' + parseInt( Math.random() * itemNum )+ '.jpg)'
},
getSiteList:function(){
var me = this;
var pros = 0;
return this.state.list.map(function(obj,index,arrs){
//观察数据结构：
// "site": "http://www.iqiyi.com/?vfm=f_328_hao1",
// "name": "爱奇艺高清",
// "company": "爱奇艺",
// "type": "movie",
// "description": "看电影网站"
// console.log( ( ( (index + 1) / arrs.length ) * 100) )
var processNum = ( ( (index + 1) / arrs.length ) * 100) ;
// console.log(pros,processNum )
me.prcetipsShow(pros,processNum);
pros = processNum;
var bg = {
backgroundImage: me.getBgImgUrl()
}
return(
{obj.name}
公司：{obj.company}
类型：{obj.type}
描述信息：{obj.description}
)
})
},
prcetipsShow:function(pros,processNum){
// console.log(pros,processNum )
$('.proceShow').css('width',pros+'%').stop().animate({'width':processNum +'%'},500)
}
}
var Index = React.createClass({
//混合
mixins:[getMethods],
getInitialState:function(){
return {
list:DataBase
}
},
render:function(){
return (
{this.getSiteList()}
)
}
})
var Type = React.createClass({
mixins:[Reflux.connect(TypeStore,'list'),getMethods],
getInitialState:function(){
return {
list:[]
}
},
render:function(){
// console.log(this.state, 1111)
return (
{this.getSiteList()}
)
}
})
var Search = React.createClass({
mixins:[Reflux.connect(SearchStore,'list'),getMethods],
getInitialState:function(){
return {
list:[]
}
},
render:function(){
return (
{this.getSiteList()}
)
}
})
var Header = React.createClass({
goSearch:function(e){
// console.log(e.keyCode)
if(e.keyCode == 13){
var val = e.target.value;
ReactRouter.HashLocation.replace('/search/' + val)
}
},
render:function(){
return (
)
}
})
//每一次路由的改变都需要个相应的query
var App = React.createClass({
resetData:function(){
var path = this.props.routeState.path;
var query = this.props.routeState.params.query;
if(path.indexOf('/type/') == 0){
TypeAction.changeType(query)
}else if(path.indexOf('/search/') == 0){
// console.log(query)
SearchAction.searchSite(query)
}
},
render:function(){
this.resetData();
//打印属性状态，查看路由状态
// console.log(this.props)
var query = this.props.routeState.params.query;
// console.log(query)
return (
)
//为了提高打开页面的预览效果，我们要将页面中用到的大图片加载出来；
/* 加载图片类
* @params 表示加载图片的选项数据
* @step 加载完每一张图片时候的回调函数
* @success 全部加载完毕时候的回调函数
* @fail 某张图片加载失败时候的回调函数
*
**/
function ImageLoader(params,step,success,fail){
//表示banner图片数
this.bannerNum = params.bannerNum;
//表示每一个网址的背景图片
this.itemNum = params.itemNum;
//总和
this.totalNum = this.bannerNum + this.itemNum;
this.step = step;
this.success = success;
this.fail = fail;
//在这里开始加载图片
this.loader()
}
ImageLoader.prototype = {
loader:function(){
//第一步加载banner图片
var bannerNum = this.bannerNum;
while (--bannerNum >= 0){
this.loaderImg(bannerNum,true)
}
//第二步加载网址背景图片
var itemNum = this.itemNum;
while (--itemNum >= 0){
this.loaderImg(itemNum)
}
},
//加载一张图片
/*@num加载图片的序号
* @isBanner这张图片是否是banner图片
***/
loaderImg:function(num,isBanner){
var me = this;
var img = new Image();
img.onload = function(){
//每次图片加载完成会执行step函数,但是不能一直执行,最后一次执行success;我们要判断图片是否全部加载完成;
//判断图片是否全部加载完成，我们可以在每加载一张图片的时候对bannerNum和itemNum减一，直到这个数为0，我们执行success回调函数；
if(isBanner){
me.bannerNum--;
} else {
me.itemNum--;
}
//当bannerNum以及itemNum都是零的时候，我们执行success,否则我们执行step,继续执行
if(me.bannerNum === 0 && me.itemNum === 0){
me.step(me.bannerNum, me.itemNum, me.totalNum)
me.success()
}else{
me.step(me.bannerNum, me.itemNum, me.totalNum)
}
}
//当图片加载失败我们执行fail方法
img.onerror = function(){
if(isBanner){
me.bannerNum--;
} else {
me.itemNum--;
}
me.fail(num,isBanner);
}
if(isBanner){
img.src = me.getBannerImgUrl(num);
} else {
img.src = me.getItemImgUrl(num);
}
},
getBannerImgUrl:function(num){
return 'img/banner/banner'+num+'.jpg';
},
getItemImgUrl:function(num){
return 'img/item/item' + num + '.jpg';
}
}
//请求异步接口数据
$.get('data/sites.json',function(res){
// console.log(res)
if(res && res.errno === 0){
DataBase = res.data;
new ImageLoader({
bannerNum:bannerNum,
itemNum:itemNum
},function(bannerNum,itemNum,totalNum){
$loadProcessDOM.html(((totalNum - bannerNum - itemNum) / totalNum * 100).toFixed(2));
},function(){
console.log('success')
setTimeout(function(){
//我们可以通过回调函数的第二个参数获取路由的状态，如何从组建中获取呢？
ReactRouter.run(routes,function(Handler,states){
// console.log(states) // params{query:xxxx} 可以通过属性props传递 在App父组件类中通过this.props.routeState来获取
React.render(