Question

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语法。谢谢......

Answer 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/

CoffeeScript Dom功能

1 个答案: