Question

我想要做的是在{main} Circle添加stage.append circle。define [], () -> class Circle constructor: (@x, @y, @radius) -> @circle = $ document.createElement "div" @circle.addClass "circle" @circle.width @radius * 2 @circle.height @radius * 2 @circle.css left: @x top: @y。我认为Circle扩展jQuery将是一个很好的解决方案，但这似乎不起作用。

我目前的代码：

Circle.coffee：

define [
  'object/Circle'
], (Circle) ->

  stage = $ "#main"

  circle = new Circle 350, 350, 100
  stage.append circle.circle

Main.coffee：

{{1}}

Answer 1

可以这样做。您必须考虑两个案例。第一种情况是选择器是指向DOM中现有对象的字符串。第二种情况是选择器指向一个新的＆＃39;元素或当选择器指向另一个对象时。

对于第一种情况，您需要将新创建的jQuery对象复制到实例中。这是为了让jQuery有机会搜索DOM。检查此选项的最简单方法是检查selector是否为字符串而不是HTML标记。这种方法可能不够彻底，但对于基本用法，它可以工作。

对于第二种情况，您可以调用 init，并使用 this 作为第一个参数。这将在当前实例周围创建一个新的jQuery对象。

class Element extends jQuery
  constructor: (selector, context) ->
    # When selector is a string and not an html tag:
    # body, #my-id, .error-class etc.
    if typeof selector is 'string' and not selector.match /^<.*>$/
      jQuery.extend true, this, jQuery.fn.init(selector, context, jQuery document)

    # When selector is a jQuery object
    else if selector instanceof jQuery
      jQuery.extend true, this, selector

    else
      # When selector points to an object which doesn't exist in the DOM:
      # <div>, document.createElement('span')
      # Or when selector is an object
      jQuery.fn.init.call this, selector, context

    @constructor = jQuery

现在，您可以扩展元素以创建各种自定义元素。

class Square extends Element
  constructor: (size) ->
    super(document.createElement('div')) # Square is a div with no parent
    @width size
    @height size
    @css 'background', 'repeating-linear-gradient(45deg, blue, blue 15px, green 15px, green 30px)'

并使用元素，例如 $

new Element('body').append(new Square())

如何在Coffeescript中扩展jQuery，以便使用jQuery附加Coffeescript类？

1 个答案: