Javascript - 秘银嵌套组件

Question

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

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

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

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

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

//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 } )
} )

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

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

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 中一致的接口：

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。