Javascript - Mithril 嵌套组件

Question

我正在使用 Mithril 组件构建仪表板。仪表板由通用小部件组件组成，这些小部件嵌套更具体的组件，例如 Twitter 小部件、销售小部件等。通用小部件与嵌套组件无关。

现在我需要补充嵌套组件中的通用小部件。例如，通用小部件有一个带有删除和刷新常用操作的工具栏，我想添加内部组件特定操作，例如在销售小部件的情况下更改日期范围，在 Twitter 小部件的情况下更改帐户。

对此的直接方法是将内部组件分解为工具栏和内容的 2 个子组件，例如 sales_toolbar_component 和 sales_content_component。这两个子组件都需要通过 ajax 加载相同的数据，因此会导致重复。一种方法是遵循混合架构 ( http://mithril.js.org/components.html#hybrid-architecture )，其中顶级组件将执行 ajax 调用并在每个子组件的构造函数中传递数据。然而在这种情况下，父组件是通用的，不知道子数据要求

另一种方法是让一个子组件执行 ajax 调用并通过观察者模式通知兄弟组件，这似乎有点内部耦合/依赖

另一个考虑是创建一个可以有多个 View 的组件，并让父级使用相同的 Controller 实例根据需要呈现每个 View 。类似于:

//create a component whose controller and view functions receive some arguments
var component = m.component(MyComponent, {name: "world"}, "this is a test")

var ctrl = new component.controller() // logs "world", "this is a test"
m.component(MyComponent.toolbar(ctrl));
m.component(MyComponent.content(ctrl));   

这些似乎都不完整，有没有我可以考虑的引用模式？

Answer 1

内存模式可能适合您。内存涉及包装一个函数——在本例中是 AJAX 请求——这样第一次调用任何给定的输入都会触发底层函数，但它的返回值存储在内部缓存中；使用相同输入的后续调用会在不触及底层函数的情况下检索缓存值。这是一个简单的实现¹ 和一个包装了 Mithril 的 m.request 的记忆化 AJAX 请求函数:

function memoize( fn ){
  var cache = {}

  return function memoized( input ){
    if( !( input in cache ) )
      cache[ input ] = fn( input )

    return cache[ input ]
  }
}

var get = memoize( function( url ){
  return m.request( { method : 'GET', url : url } )
} )

这样无论哪个组件先执行都会发出请求；下一个组件(将在之后立即执行)将检索相同的值。

关于拥有多 View 组件的想法，这实际上与您最初的提议没有任何不同。考虑以下代码:

var Wrapper = {
  controller : function(){
    // AJAX or whatnot
  },

  view : function( ctrl ){
    return m( '.Wrapper', 
      m( Toolbar, ctrl )
      m( Content, ctrl )
    )
  }
}

m( Wrapper, { name : 'world' }, 'This is a test' )

在这里，我使用了引用 Wrapper 而不是 MyComponent，Toolbar 和 Content 只是组件正如最初提议的那样。包装器不是通用的，MyComponent 也不是。我发现尝试尽可能将 Mithril 代码的单个单元减少为组件——即使在理想世界中你宁愿拥有更少的组件——通常会使代码更容易维护，因为尽管你最终可能会得到许多特定于上下文的模块所有这些特定于上下文的模块在调用方式上都是通用的，而不是一些高度可配置的通用模块，这在代码可预测性方面更有用。

话虽如此，有可能改进您对将一个 Controller 传递给多个 View 的模式的想法。同样，我会将这种模式简化为组件形式，这样我们就可以在内部处理复杂情况，同时公开一个在 Mithril 中保持一致的接口(interface):

var MultiView = {
  controller : function( controller ){
    return new controller()
  },

  view : function( ctrl ){
    var views = [].slice.call( arguments, 2 )

    return m( 'div',
      view.map( function( view ){
        return view( ctrl )
      } )
    )
  }
}

m( MultiView, function controller(){ /* AJAX or whatnot */ }, Toolbar.view, Content.view )

¹ 这个内存函数适用于任何接受单个字符串参数的函数，这对 AJAX 请求来说是完美的。如果您想要更全面的内存解决方案，请查看 funes .