如何在前端编码时实现人肉双向编译

render:function(){     return (         
             定时器：{interval}
             
{title}
             click it.         

那如何使用coffee写这段代码呢？ 我们需要先将jsx编译这类似这样的js代码，请注意是用大脑编译：


render:function(){     return React.createElement('div',null,         React.createElement('div',{className:'timer'},'定时器'+this.props.interval),         React.createElement('div',null,this.props.title),         React.createElement('input',{ref:'input'}),         React.createElement('button',null,'click it.')     ); }

然后将js代码逆向编译为coffee。

这里我们可以用$代替React.createElement简化代码（终于可以用jQuery的坑位了），得益于coffee的语法，借助React.DOM可以用一种更简单的方式实现：

{div,input,button,span,h2,h3,h4} = React.DOM


这里就不单独放render部分，直接看完整代码：


{Component,PropTypes} = React = require 'react' $ = React.createElement {div,input,button} = React.DOM  class App extends Component     clickHandle:->         dom = this.refs.input.getDOMNode()         this.props.actions.change(dom.value)         dom.value = ''     render:->         {title,interval} = this.props         div className:'timer',             div null,'定时器：' + interval             div null,title             input ref:'input'             button onClick:@clickHandle.bind(this),'click it.'  App.propTypes =     title: PropTypes.string     actions: PropTypes.object     interval: PropTypes.number  module.exports = App

如果你能看到并看懂这段coffee，并在大脑里自动编译成js代码再到jsx代码，恭喜你。

连接store

这个环节的作用，主要是实现view层和store层的绑定，当store数据变化时，可自动更新view。

这里需要使用redux提供的createStore方法创建一个store，该方法接受2个参数，reducer和初始的state（应用初始数据）。

store.coffee的代码如下：


{createStore} = require 'redux' reducers = require './reducers' # reducer state = require './state' # 应用初始数据  module.exports = createStore reducers,state

然后我们在应用的入口将store和App绑定，这里使用了redux官方提供的react-redux库。


{Provider,connect} = require 'react-redux' store = require './store' $ = React.createElement mapState = (state)->     state rootComponent = $ Provider,store:store,->     $ connect(mapState)(App) React.render rootComponent,document.body

可能有人会问，mapState和Provider是什么鬼？

mapState提供了一个类似选择器的效果，当一个应用很庞大时，可以选择将state的某一部分数据连接到该组件。我们这里用不着，直接返回state自身。

Provider是一个特殊处理过的react component，官方文档是这样描述的：


This makes our store instance available to the components below. (Internally, this is done via React undocumented “context” feature,  but it’s not exposed directly in the API so don’t worry about it.)

所以，放心的用就好了。

connect方法用于连接state和App，之后即可在App组件内部使用this.props.dispatch()方法了。

添加action和reducer

***我们添加一个按钮点击的事件和定时器，用于触发action，并编写对应的reducer处理数据。

在前面的App内部已经添加了this.props.actions.change(dom.value)，这里看下action.coffee的代码：


module.exports =     change:(title)->         type:'change'         title: title     timer:(interval)->         type:'timer'         interval:interval

再看reducer.coffee


module.exports = (state,action)->     switch action.type         when 'change'             Object.assign {},state,title:'hello ' + action.title         when 'timer'             Object.assign {},state,interval:action.interval         else             state

至此，代码写完了。

一些其他的东西

这里只介绍一个中间件的思想，其他的特性例如异步action，或者dispatch一个promise等原理基本类似：

dispatch = store.dispatch store.dispatch = (action)->     console.log action # 打印每一次action     dispatch.apply store,arguments

由于时间关系，redux的一些特性和设计原理没有展现出来，以后有时间再单独讲，完整的项目代码，感兴趣的同学可以看这里：请点我，或者直接找我聊。

项目用到了fis3作为构建工具，使用fis3 release即可在本地查看效果。

关于如何在前端编码时实现人肉双向编译就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。