Question

或许这更像是一个基本的javascript问题，而不是Ractivejs。

如何向Ractive组件添加共享行为...例如，如果多个组件具有strip_whitspace（）方法，我该如何避免在每个组件中重复它？

提前感谢您提供的任何javascript或Ractivejs洞察力。

Answer 1

通常的方法是使用extend，这看起来就像你在传统的OOP中继承的那样。在引擎盖下，它使用原型继承。

var CommonClass = Ractive.extend({
  // define common stuff
  strip_whitspace : function(){...}
});

var FirstClass = CommonClass.extend({
  // FirstClass stuff
});

var SecondClass = CommonClass.extend({
  // SecondClass stuff
});

如果您更喜欢动态构建对象而不是强制继承的组合方法，则可以始终使用其他库中的扩展函数，例如lodash的defaults。我更喜欢这种方法，因为我可以从多个公共对象继承。

var UtilsMixin = {
  strip_whitspace : function(){...}
};

var AnotherMixin = {...};

var FirstClass = Ractive.extend(_.defaults({
  // FirstClass stuff
}, UtilsMixin));

var SecondClass = Ractive.extend(_.defaults({
  // SecondClass stuff
}, UtilsMixin, AnotherMixin));

Answer 2

您还可以在RactiveJS中查看 Frequently Used Expressions 。如果经常使用特定表达式，则可以将该表达式添加到Ractive的默认数据中，如下所示：

var helpers = Ractive.defaults.data;

helpers.fromNow = function(timeString){
  return moment(timeString).fromNow()
}

helpers.formatTime = function(timeString){
  return moment(timeString).format("ddd, h:mmA");
}

helpers.humanizeTime = function(timeString){
  return moment.duration(timeString).humanize();
}

如何共享ractive组件之间的行为

2 个答案: