0

我想用 CoffeeScript 类而不是函数来定义 flightjs 组件，但这似乎是不可能的，因为 flight 忽略了对象的原型。我不能写：

define ['flight/component'], (defineComponent) ->
     class MyDropdown
          constructor: () ->
               @defaultAttrs #attrs
               @after 'initialize', () ->
                  #doSmth

          func1: (evt, data) ->
          func2: (evt, data) ->

     return defineComponent MyDropdown

代替

define ['flight/component'], (defineComponent) ->

    return DefineComponent () ->

        this.func1 = (evt, data) ->
        this.func2 = (evt, data) ->

        this.defaultAttrs #attrs
        this.after 'initialize', () ->
            #doSmth

因为第一个代码示例将 func1 和 func2 绑定到 MyDropdown 原型

MyDropdown.ptototype.func1

所以我发现的唯一解决方法是在构造函数已经是飞行组件时创建“代理”类来绑定原型方法：

define [], () ->
    class FlightComponent
        constructor: (childClass) ->
            # constructor is ommited because I don't want to override component's constructor
            @[name] = func if name isnt 'constructor' for name, func of childClass.prototype

    return FlightComponent


define ['flight/component', 'js/FlightComponent'], (defineComponent, FlightComponent) ->
     class MyDropdown extends FlightComponent
          constructor: () ->
               super MyDropdown
               @defaultAttrs #attrs
               @after 'initialize', () ->
                  #doSmth

          func1: (evt, data) ->
          func2: (evt, data) ->

    return defineComponent MyDropdown

我认为我必须使用类作为参数调用父构造函数才能使其与飞行 API 一起使用，这很尴尬。我可以克服父类，只是在构造函数的开头编写代码，但我发现继承更灵活（如果我将来添加 DataComponent 和 Component 类）。

所以我想知道有没有更好的方法来将 CoffeeScript 的完整期货与 Twitter Flight 结合使用？

飞行不允许将方法绑定到对象原型似乎是违反直觉的......或者我错过了什么？

编辑

我现在发现的最佳解决方案：

define ['flight/component', 'js/mixin1', 'js/mixin2'], (defineComponent, withA, withB) ->

     class MyDropdown extends defineComponent withA, withB

          constructor: ->
               # yay, got access to mixins, component and MyDropdown's prototype methods
4

2 回答 2

0

Flight 采用更面向方面的方法来创建组件。不是使用继承，而是使用mixins将功能或属性直接注入到组件中。

mixin API 文档页面有一个如何将 mixin 注入组件的示例。

于 2014-01-23T07:42:31.353 回答
0

我发现的最佳解决方案是简单地使用 mixins 扩展组件。

js/withAB

define ['flight/component', 'js/mixins/mix1', 'js/mixins/mix2'], (defineComponent, withA, withB) ->

    defineComponent withA, withB

js/myComponent

define['js/withAb'] (componentWithAB) ->

    myComponent extends componentWithAB

        constructor: ->
            @defaultAttrs
                name: 'selector'

            @after 'initialize', ->
                @on 'smth', 'event', @method1

        method1:->
           # code

在代码中

require 'js/myComponent', (myComponent) ->
     myComponent.attachTo 'selector'

这样 myComponent 是扩展飞行的 api 组件的类，并且具有两个 mixinx 方法。另一个组件可以很容易地扩展这个类，覆盖一些方法并定义它自己的构造函数。

将组件定义为类而不是函数有助于使组件与 mixin 不同。类中的代码结构也更好，因为在对象初始化（不是组件初始化！）之后发生的所有逻辑都放在构造函数中，而所有函数都绑定到原型。

在我现实生活中的应用程序而不是引导文件 js/withAB 中，我编写了将 mixins（或什么都没有）作为参数并返回混合了它们的组件实例的函数。

于 2014-02-01T22:22:04.627 回答