MobX是一个简单有效的状态管理库，以派生(derive)的概念为核心，以观察者模式为手段，达到了修改数据自动更新界面等目的
-
正因为其本身提供了包装react的方法，可以简洁的改善react组件，所以官网文档和几乎所有教程都以react和ES7的装饰修饰符等特性为切入点
-
但MobX在传统的ES5环境中也能良好工作，本文尝试以此为出发点，探讨在既有的非react项目中直接引入MobX并用其整理重构老代码的方法
没有babel、webpack、JSX...那么多的套路！直接上手先，走你~
[I]. 核心概念和基本流程
| 名称 | 作用 |
|---|---|
| 状态 | 用来驱动应用的数据 |
| 派生 | 从核心数据中引发的数据或动作，比如下面提到的computed和reaction |
| observable | 可被观察的核心数据 |
| action | 用来改变状态的方法，且只有此处可以更改状态 |
| computed | 由核心数据或其他computed数据改变而派生出来的值，比如数组的长度 |
| reaction | 和computed类似，由数据改变派生出的观察者方法，自动执行如修改UI界面或请求网络等“有副作用”的任务，一般由autorun(reactionFn)指定 |
1.1 一个计数器的例子
<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>
<div id="counter">
<button class="dec">-</button>
<span></span>
<button class="inc">+</button>
</div>.nagetive {
color: red;
}$(document).ready(function(){
//严格限制只能在action中改变数据
mobx.useStrict(true);
//界面元素引用
var
$ct = $('#counter')
,$btn_inc = $ct.find('.inc')
,$btn_dec = $ct.find('.dec')
,$num = $ct.find('span')
;
/**
* step1: 定义一个被观察的状态
*/
var appState = mobx.observable({
//可观察的数据
count: 0,
//派生数据
get style() {
return this.count>0 ? '' : 'nagetive';
},
//action
increment: mobx.action(function() {
this.count++;
}),
//action
decrement: mobx.action(function() {
this.count--;
})
});
/**
* step2: 指定界面如何响应状态改变
*/
//reaction
function render() {
$num.html(appState.count);
$num.get(0).className = appState.style;
}
mobx.autorun(render);
/**
* step3: 改变状态
*/
$btn_inc.on('click', function() {
appState.increment();
});
$btn_dec.on('click', function() {
appState.decrement();
});
});* 原创文章转载请注明出处
-------------------------------------
长按二维码关注我们的公众号哦：
