如何共享行爲組件之間的行爲

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

你也可以看看Frequently Used Expressions在RactiveJS。如果您經常使用特定表達式，則可以將該表達式添加到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(); 
}