如何在 CoffeeScript 中正确子类化 jQuery？答案

【问题标题】：How to properly subclass jQuery in CoffeeScript?如何在 CoffeeScript 中正确子类化 jQuery？
【发布时间】：2013-06-13 17:50:20
【问题描述】：

我想通过 JavaScript 添加一些 HTML，并在其上添加点击事件。因为我不想用 JavaScript 编写 HTML，所以我的 HTML 模板中有 HTML sn-ps，在 <script type="text/html"> 标记内，我想将它们包装在类中（这样看起来更好，以便我可以测试功能更好）。

在我的示例中，我有一个带有

的模板

<script type="text/html" id="remove-choice-button">                                
  <span class="close">×</span>
</script>

在我的 CoffeeScript 文件中，我有

class RemoveChoiceButton extends jQuery
  constructor: ->
    super($("#remove-choice-button").html().trim())

但是，如果我尝试将它添加到 DOM，它就不起作用，因为会发生这种情况：

jQuery ->

  console.log new RemoveChoiceButton().html()
  //=> undefined

我在哪里做错了？

【问题讨论】：

也许这只是你的问题中的一个错字，但console.log(new RemoveChoiceButton()).html() 可能不会像你认为的那样做。
已修复。还是不行。
顺便说一句，这不是和 Ruby 一样，如果你在括号前放一个空格，那么它们就不再是参数了吗？
没有“正确”的方法，因为这不是正确的做法。 jQuery 不是一个类，你不能扩展它。 CoffeeScript 并不神奇，它的 extend 关键字不会将其他随机函数转换为 CoffeeScript 类。
@meagar 为什么在 jQuery API 文档函数中返回 jQuery？您的意思是说您不能扩展使用 CoffeeScript 的 class 范例创建的笔记类？

标签： jquery coffeescript

【解决方案1】：

我不相信 jQuery 像一个典型的类那样工作。它比这更实用。你永远不会instance = new jQuery()。 Javascript 允许您使用基于类的范例，但您不能假设一切都以这种方式工作。

相反，让类从无继承，并简单地使用 jQuery。并在该类上提供一个方法来返回一个 jQuery 对象。

class RemoveChoiceButton extends jQuery
  constructor: ->
    @el = $("#remove-choice-button") # el for DOM *el*ement

  getContent: ->
    @el.html().trim()

console.log new RemoveChoiceButton().getContent()
# or
console.log new RemoveChoiceButton().el.html()

但是使用类听起来不是你真正想要的。如果你想运行一些代码来获得一个新按钮的 jQuery 对象，你只需要一个简单的函数。不是所有东西都应该是一个类。

makeRemoveChoiceButton = ->
  $($("#remove-choice-button").html().trim())

【讨论】：

jQuery() 是一个增强的构造函数，但仍然是一个构造函数，你绝对可以用new 调用它（虽然你是对的，但它在实际代码中并不多见）。小提琴here.
@FrédéricHamidi new jQuery 会做什么？我猜它只是忽略了它的内容，就像在没有 new 的情况下调用它一样。
@Jan，是的，IIRC 无论如何都会返回一个新对象，因此当使用new 调用时，它内部对this 的更改会丢失。我会仔细检查。 编辑： 双重检查，在 1.10.1 中 jQuery() 始终返回 new jQuery.fn.init(selector, context, rootjQuery)，因此无论是否在构造函数上下文中调用它确实都一样。
但是我仍然有可能不必调用RemoveChoiceButton实例上的方法来获取jQuery对象吗？
@janko-m 使用类时，构造函数会返回该类的实例。如果你想要别的东西，不要使用类！ getRemoveChoiceButton = -> $("#remove-choice-button").html().trim()