Javascript - Mithril嵌套组件

Javascript - Mithril nested components

本文关键字：组件 嵌套 Mithril Javascript      更新时间：2023-09-26

我正在使用mithril组件构建一个仪表板。仪表板由通用小部件组件组成，其中嵌套更具体的组件，如twitter小部件、销售小部件等。通用小部件不知道嵌套的组件。

现在我需要从嵌套组件中添加通用小部件。例如，通用小部件有一个工具栏，其中包含delete &刷新，我想添加内部组件特定的操作，如更改日期范围的情况下销售小部件，更改帐户的情况下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));

这些似乎都不完整，有没有我可以考虑的参考模式?

记忆模式可能适合您。记忆包括包装一个函数——在本例中是AJAX请求——这样，带有任何给定输入的第一次调用都会触发底层函数，但其返回值存储在内部缓存中;具有相同输入的后续调用在不触及底层函数的情况下检索缓存值。下面是一个简单的实现1和一个记忆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一致的接口:

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 )

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

相关文章：