Javascript

Question

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

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

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

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

另一个考虑是创建一个可以有多个视图的组件，并让父级使用相同的控制器根据需要呈现每个视图 instance.Something 如：

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

None这些看起来很完整，有没有参考模式可以考虑？

Answer 1

记忆模式可能适合您。记忆涉及包装一个函数——在本例中是 AJAX 请求——这样使用任何给定输入的第一次调用都会触发底层函数，但它的 return 值存储在内部缓存中；使用相同输入的后续调用会在不触及底层函数的情况下检索缓存值。这是一个简单的实现¹ 和一个包装 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 代码的单个单元减少为组件——即使在理想世界中你宁愿拥有更少的组件——通常会使代码更容易维护，因为尽管你最终可能会得到许多特定于上下文的模块而不是一些高度可配置的通用模块，所有这些特定于上下文的模块在它们被调用的方式上都是通用的，这在代码可预测性方面更有用。

话虽如此，可以改进您对将一个控制器传递给多个视图的模式的想法。同样，我会将这种模式简化为组件形式，这样我们就可以在内部处理复杂情况，同时公开一个跨 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。

Javascript - 秘银嵌套组件

Javascript - Mithril nested components

model-view-controller

design-patterns

mithril.js