Question

我正在编写一些代码来将角度动画封装到coffeescript类中。我认为这很难看。有什么建议可以让它发光吗？

我不喜欢这样的事实：我必须首先创建对象并返回一个对象，其中 addClass 和 removeClass 间接指向我的实例方法。

html使用

<div ng-hide="..." class="message">...</div>

丑陋的代码

class MessageAnimation
  constructor: () ->
    console.log 'MessageAnimation:init'

  animation_up: (element, cl, done) ->
    element.removeClass cl
    element.velocity 'slideUp',
      duration: 500
      complete: () ->
        element.addClass cl
        done()
    return

  animation_down: (element, cl, done) ->
    element.velocity 'slideDown',
      duration: 500
      complete: () ->
        done()
    return

angular.module('some_nice_app').animation '.message', () ->
 @messageAnimation = new MessageAnimation()
 return {
   addClass: @messageAnimation.animation_up
   removeClass: @messageAnimation.animation_down
 }

....但也许我毕竟不需要一个类，因为它只是实例化的类。你觉得怎么样？

Answer 1

除非您需要创建需要从其他方法引用的状态，否则您可能不需要创建类。 AKA，在您给出的示例中，您的方法中没有this.引用。您可以使用类作为命名空间方法的便捷方法，但在这种情况下，它们与普通的JS对象没有区别。例如：

class MessageAnimation
  # the prefix of @ places this method on the prototype as a 'static' method
  @animation_up: ->



angular.module('some_nice_app').animation '.message', () ->
  addClass: MessageAnimation.animation_up # note: CS will automatically return the object, your use of return is redundant but some people prefer to be explicit.

Answer 2

或使用旧时尚方式：

angular.module('manor_app').animation '.message', ->
  animation_up =  (element, cl, done) ->
   ...

  animation_down = (element, cl, done) ->
   ...

  addClass: animation_up
  removeClass: animation_down

我认为我发现静态类更具可读性

如何为ngAnimation挂钩编写更好的coffeescript类

2 个答案: