CoffeeScript Dom Функции

-2

Что является эквивалентом этого JQuery кода в CoffeeScript:CoffeeScript Dom Функции

<!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 может работать как CoffeeScript, но я хочу, чтобы изучить синтаксис CoffeeScript для этот код. Спасибо ...

источник

2014-11-05 hayalet

[js2coffee.org] (HTTP: // js2coffee.org/) может помочь вам – Satpal

Благодарим за быстрый ответ, но он мне не помогает. он дает мне почти тот же код с jQuery. – hayalet

Возможно, вы захотите привлечь несколько голосов, просто упоминая http://w3fools.com, чтобы вы могли изменить это. –

Строгий перевод кода будет выглядеть следующим образом:

$ -> 
    $("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/

источник

2014-11-05 16:00:19

Не могу поверить, что вы используете 11 строк (субъективный уродливый) код, чтобы сделать то же самое, что вы можете сделать в 2 строках. – Carpetsmoker

@Carpetsmoker ясно, что слова повторное использование и контекст были потеряны на вас. Это всего лишь шаблон для создания компонентов с динамическим охватом. Однако я ценю нисходящее движение. ненавистники пусть ненавидят. –

fwiw, у меня есть несколько 10-строчных javascript-приложений, которые имеют 1 строку 'document.ready', из-за абстракций, подобных этому. –

CoffeeScript Dom Функции

ответ

Смежные вопросы