CoffeeScript DOM 函数答案

【问题标题】：CoffeeScript Dom FunctionsCoffeeScript DOM 函数
【发布时间】：2015-01-01 16:08:19
【问题描述】：

coffeeScript 中这段 jQuery 代码的等价物是什么：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert($("#w3s").attr("href"));
            });
        });
    </script>
    </head>
    <body>
        <p><a href="http://www.google.com" id="w3s">Google.com</a></p>
        <button>Show href Value</button>
    </body>
</html>

PS：我知道任何类型的 Javascript 都可以用作 Coffee-Script，但我想了解这段代码的 Coffee-Script 语法。谢谢...

【问题讨论】：

js2coffee.org可以帮你
感谢您的快速回复，但这对我没有帮助。它给了我几乎与 jQuery 相同的代码。
你可能会因为提到 w3fools.com 而吸引一些反对票，所以你可能想要改变它。
如果你是对的，并且有人仅仅因为网站名称而投票给我，我可以礼貌地称他们为“愚蠢”。我会编辑它，谢谢。

标签： jquery coffeescript

【解决方案1】：

您的代码的严格翻译如下所示：

$ ->
  $("button").click (e)->
    alert $("#w3s").attr("href")

不过，我更喜欢下面的骨干风格。我对您的 html 进行了一些改动，将 p 和 button 标记包装在 div 中，以便您可以将其作为组件进行管理。这里的明显优势是可以重用的单个 DOM 组件的抽象，并且每个组件都有自己的上下文。由于coffeescript类的易用性，让它变得非常自然：

class window.ButtonAndLink
    constructor: (el)->
      @$el = $(el)
      # optionally, cache the href
      # @href = @$el.find('a').attr('href')
      @addListeners()

    addListeners: ->
      @$el.find('button').on 'click', @handleClick

    handleClick: (e)=>
      alert @$el.find('a').attr('href')
      # optionally, use the cached value
      # alert @href

$ ->
  $('.link-and-button').each (index, div)->
    new window.ButtonAndLink(div)

html 略有修改

<div class="link-and-button">
  <p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
  <button>Show href Value</button>
</div>

工作 jsfiddle：http://jsfiddle.net/9bj2oj9t/

【讨论】：

我不敢相信你用 11 行（主观性丑陋）代码来做你可以用 2 行做的同样的事情。
@Carpetsmoker 很明显，重用和上下文这些词对你来说已经丢失了。这只是用于创建动态范围的组件的模板。不过，我很欣赏反对票。仇恨者会讨厌。
fwiw，我有几个 10k 行的 JavaScript 应用程序，它们有一个 1 行 document.ready 函数，因为像这样的抽象。
我的意思不是这是否是一个好的“模式”，而是它是否适合这个问题；有时一个简单的函数比一个类更好，因为并非所有应用程序都是 10k 行应用程序。我完全愿意提供更多信息，因为 OP 在适当的时候没有要求，但恕我直言，这是“太多信息”，因为这个问题看起来很简单。它经常导致人们在不合适的地方复制这种代码......另外，我不赞成用勺子喂这些问题，很少或根本没有解释......
@Carpetsmoker 我想我读了 OP 的评论“与 jQuery 几乎相同的代码”，因为对显而易见的问题和对可能可用的其他模式的询问感到不知所措。对我来说，默认情况下在语言中具有结构，而不是依赖（如 js 中的主干）是该语言的主要特征之一。我无法帮助他对一个简单的 jquery 函数感到不知所措。我只是尽我所能摆脱功能性意大利面的世界，一次一个问题。