当前位置:  软件>JavaScript软件

Flux 模式实现 DeLorean

    来源: java/j2ee iis7站长之家   发布时间:2014-12-31

    本文导语:  DeLoreanjs(Delorean.js) 是极小的 Flux 模式实现: 单向数据流,是的你的应用逻辑比 MVC 还简单 自动监听数据变化情况,保持数据持续更新 这是个很完整的框架,没有视图框架 非常小,压缩后只有 4K 内置 React.js 集成,易于使...

DeLoreanjs(Delorean.js) 是极小的 Flux 模式实现:

  • 单向数据流,是的你的应用逻辑比 MVC 还简单

  • 自动监听数据变化情况,保持数据持续更新


  • 这是个很完整的框架,没有视图框架

  • 非常小,压缩后只有 4K

  • 内置 React.js 集成,易于使用 Flight.jsReactive.js 或者其他的 JS 库

  • 使用回滚提高 UI 和数据的一致性

示例:

/* * Stores are simple data buckets which manages data. */var Store = Flux.createStore({
  data: null,
  setData: function (data) {
    this.data = data;
    this.emit('change');
  },
  actions: {
    'incoming-data': 'setData'
  }});var store = new Store();/* * Dispatchers are simple action dispatchers for stores. * Stores handle the related action. */var Dispatcher = Flux.createDispatcher({
  setData: function (data) {
    this.dispatch('incoming-data', data);
  },
  getStores: function () {
    return {increment: store};
  }});/* * Action Creators are simple controllers. They are simple functions. *  They talk to dispatchers. They are not required. */var Actions = {
  setData: function (data) {
    Dispatcher.setData(data);
  }};// The data cycle.store.onChange(function () {
  // End of data cycle.
  document.getElementById('result').innerText = store.store.data;});document.getElementById('dataChanger').onclick = function () {
  // Start data cycle:
  Actions.setData(Math.random());};



    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Flux 的封装库 McFly
  • Flux
  • JUnit Flux


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3