backbone.js如何与CoffeeScript一起使用？

Question

使用CoffeeScript编写backbone.js应用程序是否存在任何固有问题？您是否遇到了一些无法解决的问题或者必须使用一些特别笨重的解决方法？

Answer 1

没问题,真的.至少,没有一个不容易解决.

使用CS的问题与使用CS在任何地方可能遇到的问题相同:

• 调试仍在生成的JS中完成
• CS需要一个有时难以处理的预处理步骤
• 你团队的其他成员可能不会知道CS
• 关于CS有一些奇怪的事情(他们引入"类"但它们不是真正的类)

此外,由于Backbone dev与Coffeescript是基于"类"的,你发现自己想要在不同的文件夹中将你的类分成单独的文件.因此,您可能会遇到无序定义类的情况.例如,您的集合可能会在模型之前定义,但这不可能发生.为此,我建议使用可以管理依赖项(导入)的东西.我使用咖啡烤箱,但还有其他几个选项(例如,Rails在资产管道中内置了依赖管理)

这是我编写Backbone代码的首选方式.在我看来,Backbone.js开发实际上在CoffeeScript中比在Javascript中更好.对我来说,他们像巧克力和花生酱一样.(不是每个人都喜欢巧克力/花生酱......不是每个人都喜欢BB/CS)

类语义 Backbone开发在很大程度上依赖于扩展原型,这是使用CoffeeScript内置的东西.那么,在JS中扩展View的位置:

App.Models.MyModel = Backbone.View.extend({
    render: function() {
        ...
    }
});

CS替代方案是本机体验:

class App.Models.MyModel extends Backbone.Model
    render: ->
        ...

覆盖函数 Backbone中经常执行的一些操作,如覆盖函数变得更加简单.在Javascript中:

constructor: function ( attributes, options ) {
    this.constructor.__super__.constructor.apply( this, arguments );
    ...
}

变为:

constructor: (attributes, options) ->
    super

"this"上下文绑定 当你需要声明一个函数的上下文是"this"时,CS中的"胖箭头"非常有用

当函数被回调时,Javascript以不同的方式设置'this'.有几种方法可以解决它,但开箱即用,它很尴尬:

initialize: function() {
    this.model.bind('reset', this.render);
},

render: function () {
    this.$el.html("<ul></ul>");
    this.model.each(this.renderItem); // <--- Fails on "reset" because 'this' is wrong
    return this;
}

CoffeeScript有一个=>令牌,当任何人调用它时,它会自动将'this'绑定到该函数:

initialize: ->
    @model.bind 'reset', @render

render: =>
    @$el.html '<ul></ul>'
    @model.each @renderItem  # The fat arrow fixed it for you
    @

完成所有操作后,Backbone.js代码更易于编写,并且在CS中编写时更容易阅读.至少,这是我的看法.

祝好运!