未加星标

使用MobX怎样管理JavaScript应用状态

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

【译者注】:这是mobxjs的一名作者写的mobx使用解析,读完觉得挺有意思。

如果你曾经用jQuery写过复杂的应用,你可能就会遇到管理不同页面部分UI内容同步的问题。常常,数据修改后需要体现在多个地方,随着项目的复杂化,你可能很难去管理。为了解决这个问题,我们常常需要使用事件来让页面的多个部分知道数据改变了。

所以,现在你是怎样管理这个状态的问题的呢?我确定你是通过订阅的方式来做的。这是对的,我敢肯定,如果你没有使用订阅的方式,那你实现起来太辛苦了,除非你使用了MobX。

什么是状态?

这里是一个person对象,比如某个人,他有firstName,lastName和age,另外fullName()方法将显示他的全名。

var person = { firstName: 'Matt', lastName: 'Ruby', age: 37, fullName: function () { this.firstName + ' ' + this.lastName; } };

那么当这个人的信息修改时,是怎样体现到你输出内容上的呢?你在什么时候触发这些通知呢?在MobX之前,你可以使用setter来触发jQuery事件或者js信号。这些方案很好,但是使用它们不够清晰。我想在person对象的任何部分改变时就去自动触发。

这里是一段修改firstName信息的代码,如果我修改age,那么这是会触发修改通知的,因为我们将数据订阅绑定在person的整个对象上了。

person.events = {}; person.setData = function (data) { $.extend(person, data); $(person.events).trigger('changed'); }; $(person.events).on('changed', function () { console.log('first name: ' + person.firstName); }); person.setData({age: 38});

我们怎样解决这个问题呢?很简单,为person对象的每个属性设置一个setter来触发每一个事件。等等,但是这样如果age和firstName同时改变了该怎么办。所以你得设置一个延时来保证两个属性都改变完成时才触发。这似乎行得通并且我就是这么干的。

通过MobX来解决

MobX 是一个简单、高效的前端状态管理脚本库。 根据文档,Just do something to the state and MobX will make sure your app respects the changes。

var person = mobx.observable({ firstName: 'Matt', lastName: 'Ruby', age: 37, fullName: function () { this.firstName + ' ' + this.lastName; } });

注意下区别,mobx.observable是我做的唯一区别,我们再来看下console.log输出的内容。

mobx.autorun(function () { console.log('first name: ' + person.firstName); }); person.age = 38; // 不打印内容 person.lastName = 'RUBY!'; // 仍然不打印内容 person.firstName = 'Matthew!'; // 打印内容

通过使用autorun, MobX只会检测使用到的内容。如果你觉得不够清楚,来看下下面的:

mobx.autorun(function () { console.log('Full name: ' + person.fullName); }); person.age = 38; // 不打印内容 person.lastName = 'RUBY!'; // 打印内容 person.firstName = 'Matthew!'; // 打印内容

相信你已经理解了。

MobX核心概念 observer var log = function(data) { $('#output').append('<pre>' +data+ '</pre>'); } var person = mobx.observable({ firstName: 'Matt', lastName: 'Ruby', age: 34 }); log(person.firstName); person.firstName = 'Mike'; log(person.firstName); person.firstName = 'Lissy'; log(person.firstName);

MobX可观察的对象都是普通的对象。这个例子中我们没有观察任何内容,这里例子也向你展示了怎样将MobX使用到你的项目中。只需要使用mobx.observable()或 mobx.extendObservable()就可以了。

autorun var person = mobx.observable({ firstName: 'Matt', lastName: 'Ruby', age: 0 }); mobx.autorun(function () { log(person.firstName + ' ' + person.age); }); // this will print Matt NN 10 times _.times(10, function () { person.age = _.random(40); }); // this will print nothing _.times(10, function () { person.lastName = _.random(40); });

当变量值改变时,你肯定想做一些事情,所以使用autorun(),将会在任何一个观察的内容改变时触发回调。注意下上面的例子中age改变时autorun()为什么不会触发。

computed var person = mobx.observable({ firstName: 'Matt', lastName: 'Ruby', age: 0, get fullName () { return this.firstName + ' ' + this.lastName

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptRubyjQuery数据UB变量值变量
分页:12
转载请注明
本文标题:使用MobX怎样管理JavaScript应用状态
本站链接:http://www.codesec.net/view/481693.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(78)