在Backbone中查看mixin的正确方法
我始终扩展基础骨干视图,并为每个部分提供基础视图,以便可以在多个层面上进行扩展。 我的问题是,查看mixins最有效的方法是什么:可重用的视图部分可以混入任何视图。 例如:
var BaseProfile = Backbone.View.extend({ ...}); var UserProfile = BaseProfile.extend({ ...}); var VideoSupport = Backbone.View.extend({ ...});
用UserProfile
视图混合VideoSupport
视图(一个事件对象和一些方法)的最佳方法是什么?
underscore.js库提供了一个你想要的extend
方法。 您可以在任何对象上定义function,然后将所有方法和属性从该对象复制并粘贴到另一个对象。
视图,模型和路由器上的主干extend
方法是下划线extend
的包装。
var MyMixin = { foo: "bar", sayFoo: function(){alert(this.foo);} } var MyView = Backbone.View.extend({ // ... }); _.extend(MyView.prototype, MyMixin); myView = new MyView(); myView.sayFoo(); //=> "bar"
我可能会推荐使用Backbone.Cocktail ,它提供了一个非常简洁的指定mixin(尊重inheritance)的方法:
var Mixin = { initialize: function() { console.log("I'll be called as well as the class's constructor!"); } }; var View = Backbone.View.extend({ mixins: [ MyMixin ] });
我在这篇博客文章中详细介绍了它。
你可以使用这个要点https://gist.github.com/3652964
您可以使用Backbone.Mix库 ,该库使用embedded到原型链中的mixin
var Editable = { edit: function(){ console.log('edit'); } }; var Article = Backbone.Model.mix(Editable).extend({ initialize: function(){ Backbone.Model.prototype.initialize.call(this); this.edit(); // logs "edit" } });
我需要能够覆盖和调用混合方法(ala超)更接近于如何ruby处理模块。 如果存在于类中,那么简单的扩展方法将会打乱mixin方法。 由于我在CoffeeScript中构build了所有的函数,所以我可以访问超级对象,它可以让我填充方法。它还将自动合并事件对象,以便您可以在混合中定义事件处理程序。
_.extend Backbone, mixin: (klass, mixin, merge) -> debugger unless mixin mixin = mixin.prototype || mixin merge ||= ["events"] sup = _.extend({},klass.__super__) for name,func of mixin if base = sup[name] && _.isFunction(base) sup[name] = -> func.apply this, arguments base.apply this, arguments else sup[name] = func hp = {}.hasOwnProperty prototype = klass.prototype for name,func of mixin continue unless hp.call(mixin,name) continue if _(merge).contains name prototype[name] = func unless prototype[name] klass.__super__ = sup _(merge).each (name) -> if mixin[name] prototype[name] = _.extend({},mixin.events,prototype.events) @
用法
class SimpleView extends Backbone.View events: "click .show" : "show" calculate: -> super + 5 show: -> console.log @calculate() class CalculatableViewMixin events: "click .calculate" : "show" calculate: -> 15 Backbone.mixin SimpleView, CalculatableViewMixin
另一种select是Backbone.Advice ,它提供了AOP风格的mixin的function(可以在扩展对象方法的调用之前 , 之后或周围注入自定义行为)。