var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
//封装头部相关的业务逻辑和数据交互
var HeaderStore = assign({}, EventEmitter.prototype, {
  menus: [{
    title: 'index', //title用于储存路由对应的路径
    href: '?#/index', //href用于设定该菜单跳转路由
    text: '首页', //text用于储存该菜单显示名称
  }, {
    title: 'others',
    href: '?#/other',
    text: '其他',
  }],
  usermenus: [{
    click: function() {}, //click用于设置该菜单点击事件
    text: '退出', //text用于储存该菜单显示名称
  }],
  clock: '', //clock用于保存时钟
  getMenus: function() {return this.menus;}, //获取menus
  getUsermenus: function() {return this.usermenus;}, //获取usermenus
  getClock: function() {return this.clock;}, //获取clock
  clockRender: function(callback) { //刷新时钟
    let numberStandard = function(num) {
        let _val = Number(num),
          _num;
        _num = (_val < 10) ? ('0' + _val) : ('' + _val);
        return _num;
      },
      _date = new Date();
    this.clock = _date.getFullYear() + '年' + (_date.getMonth() + 1) + '月' +
      _date.getDate() + '日' + ' ' + numberStandard(_date.getHours()) + ':' + numberStandard(_date.getMinutes()) +
      ':' + numberStandard(_date.getSeconds());
    callback(); //可使用回调触发刷新
  },
});
module.exports = HeaderStore;

import React from 'react'; //导入react组件
import HeaderStore from '../stores/HeaderStore.js';  //获取HeaderStore
import HeaderActions from '../actions/HeaderActions.js'; //获取HeaderActions
import Header from './Header.jsx'; //获取子组件Header

const HeaderController = React.createClass({
  getDefaultProps : function () { //设置props数据
    return {
      menus: HeaderStore.getMenus(), //从HeaderStore获取menus数据
      usermenus:  HeaderStore.getUsermenus(), //从HeaderStore获取usermenus数据
    };
  },
  getInitialState: function() { //设置state数据
    return {clock: HeaderStore.getClock()}; //从HeaderStore获取clock数据
  },
  setClock: function(time) { //从HeaderStore获取clock并更新状态
    this.setState({clock: HeaderStore.getClock()});
  },
  componentDidMount: function(){
    var that = this;
    this.interval = setInterval(function() { //设置定时器500ms刷新一次clock
      HeaderActions.clockRender(that.setClock); //传入回调触发刷新
    }, 500);
  },
  componentWillUnmount: function(){
    clearInterval(this.interval); //移除定时器
  },
  render() {
    //将数据以props传入子组件
    return <Header clock={this.state.clock} menus={this.props.menus} usermenus={this.props.usermenus} active={this.props.active}  />;
  }
});

module.exports = HeaderController;

import React from 'react'; //导入react组件
import { NavDropdown, MenuItem, Navbar, Nav } from 'react-bootstrap';

const Header = React.createClass({
  render() {
    let active = this.props.active;
    return (
      <Navbar className="header" fluid>
        <Navbar.Header className="navbar-header">
          <Navbar.Brand>Godbasin</Navbar.Brand>
        </Navbar.Header>
        <Navbar.Collapse id="bs-example-navbar-collapse-1">
          <Nav navbar>     	
          {							
            this.props.menus.map(function(menu, i) {
              return (<li key={i} className={ menu.title == active ? "active" : ""}><a href={menu.href}>{ menu.text }<span className="sr-only">(current)</span></a></li>);
            })
          }
          </Nav>
          <Nav navbar pullRight>
            <li><a>{ this.props.clock }</a></li>
            <NavDropdown title="菜单" id="top-aside-menu">
              {
                this.props.usermenus.map(function(usermenu,i) {
                  return (<MenuItem key={i}>{ usermenu.text }</MenuItem>);
                })
              }
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    )
  }
});

module.exports = Header;

import AppDispatcher from '../dispatcher/AppDispatcher.js';

var HeaderActions = {
  clockRender: function (callback) { //定义clockRender事件
    AppDispatcher.dispatch({
      actionType: 'CLOCK_RENDER', //发送Action的类型
      callback: callback //携带回调事件参数
    });
  },
};

module.exports = HeaderActions;

import { Dispatcher } from 'flux'; //导入react组件
import HeaderStore from '../stores/HeaderStore.js'; //导入HeaderStore

var AppDispatcher = new Dispatcher();
AppDispatcher.register(function(action) {
  switch (action.actionType) {
    case 'CLOCK_RENDER':
      HeaderStore.clockRender(action.callback); //执行clockRender事件
      break;
    default:
  }
});

module.exports = AppDispatcher;