Question

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

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

直接向前的方法是将内部组件分解为2个子组件工具栏和内容，例如 sales_toolbar_component ＆amp; 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

记忆模式可能适合您。 Memoization涉及包装函数 - 在这种情况下是AJAX请求 - 这样第一次调用任何给定的输入都会触发底层函数，但它的返回值存储在内部缓存中;具有相同输入的后续调用将检索缓存的值，而不触及基础函数。这是一个简单的实现¹和一个memoized AJAX请求函数，它包含了Mithril的m.request：

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代码的单个单元减少到组件 - 即使您在理想世界中更少的组件 - 通常会使代码更容易维护，因为您可能最终会得到许多特定于上下文的模块而不是一些高度可配置的通用模块，所有这些特定于上下文的模块在调用方式上都是通用的，这在代码可预测性方面更有用。

话虽如此，有可能改进您对将一个控制器传递给多个视图的模式的想法。同样，我会将这种模式减少为组件形式，这样我们就可以在内部处理并发症，但是在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 )

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

Javascript - Mithril嵌套组件

1 个答案: