fb flux 实例分析

最近在学习flux时找到了fb在github上的实例 

https://github.com/facebook/flux

看了下实例里的flux-todomvc的写法。

下载后到项目目录先安装模块npm install

然后运行npm run start　生成bundle文件

就可以访问index.html了。

功能：

实现的是事务管理。

添加修改删除，多选择删除。全选等。

解析：

app.js:

引用了todoapp.creact模块，并用render渲染到页面

todoapp.react:

引用了头部模块、主体模块、尾部模块还有仓库模块。

创建了一个组件，指定了状态数据和仓库获取，绑定了change事件，销毁时注销了事件。

定义了change方法，修改了状态数据。

模板里引用了头部模块，主体模块props传递了数据，尾部模块传递了数据。

header.create.js:

引用了动作、input模块。

定义了组件，创建了save方法，调用了动作的创建方法传递了值。

模板里调用了Input模块，传递了id 默认字 save方法

input.create.js:

这是一个高度可复用的组件，定义了状态value.

模板里绑定了从父级传递的值，id classname 默认值  vlaue 等。

还绑定了blur change keydown autofocus。

默认Input 为焦点状态。

在失去焦点时调用save方法，通过调用props传递的save修改值 ，修改组件状态。

当change时需要修改组件状态。

在按下键上判断是否是回车是，调用save

此组件实现的就是Input的修改并通过props传递值来实现。

它只需要得到一些值和修改的回调方法就可以了。

在需要的地方可以多次复用。

以上是简单的从app上一点点分析头部的组件。

以下会从结构下分析：

store:

创建对象，编写获取数据修改等方法，添加了绑定注销change的方法和触发的方法emit.

还引用了dispatcher模块。

并把此stroe上需要的方法都注册了。

case的值对比有专门的模块对象来保存。

添加数据方法

修改数据complete值 ：为相反的 全是true或全是false

//根据id 修改complete为false

根据id 修改complete为true

根据id 修改text

根据id 删除数据

删除选 中的所有数据 

以上数据操作注册case是根据业务需求来得到的。

dispathcer:

它内只是通过flux.Dispatcher 实例化了一个对象。

actions:

动作模块内实现的是调用dispatcher注册上的每个方法并定义出来。

方法内通过dispathcer.dispatch方法来配置对象，值是动作类型和参数。

有create 、updatetext toogleComplete 修改属性为相反值  toggleCompleteAll 修改所有属性为true或false

distroy distroycompleted

以上就是动作 调度  仓库的实现了。

主要还是在组件模块里的使用了。

相对来说一个模块功能只要分析清楚了需要的操作，来编写对应的数据方法，在调度内注册 ，动作上实现。

其他的事就是view层上的各种组合实现了。

mainsection.react.js:

内容组件 传递了数据。

模块内引用了动作和todoitem模块

模板里判断了Props参数是否有值，无时返回null 。

有for循环数组，并使用todiimte组件并添加到数组中。

checkbox绑定change checked是否选 中。当修改值 时调用动作上的方法全选 或全不选 。

并在Ul内输出item数组

todoitem.js:

引用了todoaction input 模块。

状态上设置了bool属性默认为false

模板里判断是否为true是为Input 赋值为input 模块 并传递save和参数

return 里给li 添加classname,对象当值 为true时使用指定的class key值绑定todo.id

内部使用checkbox 绑定checked={todo.complete} change事件 调用动作方法修改当前item的completed值

在label 上绑定onDoubleClick 双击时修改状态为true 这时当应用不同的类，会显示input 输入框

button 上绑定点击事件，调用动作来删除本Item

input 模块收到值和修改方法来修改值。

footer.js:

此模块接收dotos数组

实现的是显示当前选中个数和未选 中个数还有删除选 中的数据。

模板里定义值保存选 中的个数

for 循环数组，判断complete 然后加一

判断是否有选 中的，有的话输入一个button 来删除选 中的

flux：

对于功能性的组件来说，一般的流程是先分析需要的数据，和数据的操作。

再写调度和动作。

最后在view里使用这些底层的模块，来实现不同的功能。