通过es6新语法组织业务代码

  最近公司在用reactjs做灵通短信的项目，基础框架使用antd。感觉react这种声明式组件书写方式确实比我之前写的命令式组件好的多。在这一段时间，不断觉得自己的代码很龊，不断的重构自己的代码。 在此Mark一下，以下是个人的一点实践，欢迎大家来讨论，进行批评和指正。

  首先要弄明白良好的前端设计应该是怎样的？ 我认为前端设计应该包括但不限于以下几点：

1.基础框架怎么搭建（项目应该分层，层与层之间可以随意替换）

比如我们项目的UI组件使用的Antd，后台交互使用restfull，  将来如果需要完全可以把antd  替换成其他UI框架，比如NG，或者将后端交互换成falcor，relay 等。

2. 组件库

组件库封装的好的话，可以大大提高效率， 真正实现跨项目开发。

3. 项目构建

项目构建应该是自动化，傻瓜式的。

4.人员协作

一个比较大的问题就是前后台合作，当然如果使用nodejs全端开发的问题会小很多。

5.业务代码的组织

剩下的就是我们的主角了，如果组织业务代码是最为重要的。

本文主要围绕组织业务代码中的一小部分通过使用ES6新语法完善现有流程。

讨论这个问题之前，先来看下我之前写的代码，之前的代码将业务实体放在了state,formData中

这会有以下几个问题；

1.自组件更新数据通过回调函数传递数据给父组件，父组件需要更新state（我们没有必须要更新state），这将带来一定的性能损耗

2.将业务实体混在组件中，增加了代码耦合。

3.每次更新都要setState（第一条已经说了），这就会造成一定的问题，如果不加以判断的话很可能formData会被set成undefined，代码会挂掉，而且我们根本不知道哪个该死的地方将他弄成这样了。

基于以上三个问题，我将formData从组件中抽离出来。定义出单独的model类

业务将要渲染的使用this.model = new model();

将业务实体new出来，将来只要给model赋值就可以了。 我们可以在model实体的getter 和setter方法中统一判断。

1.不适用setState，转而使用  this.model.propertyName = value;  减少页面渲染

2. 将业务代码放在两个文件中，通过 new model()获得对象应用，代码不会耦合在一起

3.在getter setter中写方法进行逻辑校验，如果失败  throw error  堆栈信息， 方便调试

还有一点我将业务方法最为实体方法挂在到model的原形链上，可以清晰的看出对象有哪些业务方法（这一点参考了DDD充血实体的思想）