理想的web组件模式

面向接口编程

写功能之前，先写接口。
前端和后端之间的接口：RESTful API
后端用express的情况下，这个接口又体现为一个中间件
前端用react的情况下，这个接口应当体现为一组JS API
react使用JS API编程。
react组件与组件之间的接口，直接组件用props，间接组件用pubsub。

举例:

//后端 express:
var login=require('login');
app.use('/login',login);

//前端 API:
var login=axios.get('/login');

//前端REACT 组件调用
<Login logIn={login}/>

---

部分前端功能代码:

//Login组件定义
import React from 'react';

export default class Login extends React.Component {
  static propTypes = {
    login: React.PropTypes.func.isRequired,
    routeSuccess:React.PropTypes.string//成功后去向的路由，默认为login_after
  };

  constructor(props) {
    super(props);
    this.gotoLoginAfter=this.gotoLoginAfter.bind(this);
    this.showError=this.showError.bind(this);
  }

  render() {

    return (
        <form  role="form"  onSubmit={this.handleSubmit.bind(this)}>
            <h2 className="form-signin-heading">请登录</h2>
            <input type="text" className="form-control" placeholder="用户名" required=""  ref="username"/>
            <input type="password" className="form-control" placeholder="密码" required="" ref="password"/>
            <button className="btn btn-lg btn-primary btn-block" type="submit">登录</button>
          </form>

    );
  }

   handleSubmit(e) {
        e.preventDefault();
        const username=this.refs.username.value;
        const password=this.refs.password.value;
        // console.log(username,password)
        const {login}=this.props;
        login(username,password).then(this.gotoLoginAfter).catch(this.showError)
    }

    gotoLoginAfter(){
        const routeSuccess=this.props.routeSuccess||'login_after';
        PubSub.publish('route',routeSuccess);
    }
    showError(){
        PubSub.publish('msg.error','登陆错误');
    }
}

//接受pubsub的部分:
<script src="http://cdn.bootcss.com/pubsub-js/1.5.4/pubsub.min.js"></script>
<link href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>
<script>
    PubSub.subscribe( 'route', (msg,route)=>{
    toastr.info("goto:"+route);//方便调试路由跳转，正式代码中不出现
    location.href=route;//路由跳转
    }); 
    PubSub.subscribe( 'msg.error', (msg,str)=>{toastr.error(str)} ); //toast,全局消息。正式代码中也有
</script>