Question

我试图使用jquery和coffeescript从头开始构建一些DOM元素...问题是保持jquery链的可读性以及正确使用换行符并打算在coffeescript中...

例如，我有一个<div>元素，我想追加一些<p>元素，设置样式，添加一些属性并添加eventhandler。在纯JavaScript中我会做这样的事情：

var elem = $("<div">)
  .append($("<p>")
    .css({"color":"red"})
    .attr("id", "pElement")
    .text("example text...")
  )
  .append($("<p>")
    .css({"font-weight":"bold"})
    .text("example text...")
    .on("click", document, function() {
      alert("clicked");
    })
  );

但是＆＃34;移植＆＃34;这个例子给coffeescript像：

elem = $("<div">)
  .append $("<p>")
    .css
       color:"red"
    .attr "id", "pElement"
    .text "example text..."
  .append $("<p>")
    .css
      font-weight:"bold"
    .text "example text..."
    .on "click", document, ->
      alert "clicked"

无法编译以更正javascript ...

正确的方法是什么？＃34;移植＆＃34; coffeescript的例子？

Answer 1

我喜欢在下一行的开头放置任何链式函数调用，因此很明显该行是链的一部分。根据下一个函数调用的长度，我可以将它链接在同一行上。

elem = $('<div>').append($('<p>')
.css('color': 'red')
.attr('id', 'pElement')
.text('example text...'))
.append($('<p>').css('font-weight': 'bold')
.text('example text...').on('click', document, ->
  alert 'clicked' 
))

这转化为：

var elem;

elem = $('<div>').append($('<p>').css({
'color': 'red'
}).attr('id', 'pElement').text('example text...')).append($('<p>').css({
  'font-weight': 'bold'
}).text('example text...').on('click', document, function() {
  alert('clicked');
}));

显然这与那里的风格指南相反。他们建议缩进链式通话。对我来说，缩进意味着“块”（函数，if / else等），链接对我来说不像是“块”。我认为没有缩进它会更好。

在coffeescript中链接jquery方法和参数

1 个答案: