强大的 jQuery 与 LiveScript

jQuery 是一个非常有用且强大的库。不幸的是，它的强大功能有时会被 JavaScript 笨拙的语法所削弱。

LiveScript 是一种编译成 JavaScript 的语言。它只是 JavaScript 有一些语法改进和功能添加，允许你充分利用 jQuery 的潜力。

你熟悉 CoffeeScript 或 LiveScript 吗？如果熟悉，你可以跳过。

但首先，我们将简要回顾 LiveScript 的基础知识。

LiveScript 简述

与许多现代语言一样，代码块由空格缩进分隔，换行符用于代替分号终止语句（如果你想在一行上写多个语句，仍然可以使用分号）。

例如（左侧为 LiveScript，右侧为编译后的 JavaScript）

if 2 + 2 == 4
  doSomething()

if (2 + 2 === 4) {
  doSomething();
}

你可以使用 LiveScript 编译器/REPL 在LiveScript 网站上尝试所有这些示例。

为了进一步说明，在调用函数时可以省略括号。

add 2, 3

add(2, 3);

以及注释

# from here to the end of the line.

// from here to the end of the line.

在 jQuery 中，我们经常为回调定义函数，这在 JavaScript 中可能很麻烦。你必须使用一个八个字母的关键字function，并且必须使用所有这些花括号和分号。

在 LiveScript 中，事情变得轻松了许多。

(x, y) -> x + y

-> # an empty function

times = (x, y) ->
  x * y
# multiple lines, and be assigned to a var like in JavaScript

var times;
(function(x, y){ return x + y; });

(function(){});

times = function(x, y){
  return x * y;
};

如你所见，函数定义大大缩短了！你可能也注意到我们省略了return。在 LiveScript 中，几乎所有内容都是表达式，并且自动返回最后一个达到的表达式。但是，如果你想强制返回，仍然可以使用return，并且可以向定义中添加一个感叹号以抑制自动返回noRet = !(x) -> ...。

链式调用

jQuery 的核心在于链式调用。LiveScript 使链式调用变得优雅。

空格属性访问关闭隐式调用，因此你可以省略很多括号。此外，你可以使用反斜杠表示单个单词字符串。

$ \h1 .find \img .prop \src

$('h1').find('img').prop('src');

你可以用感叹号!调用没有参数的函数，例如f!。当你这样做并且正在进行链式调用时，你不需要在后面跟着一个点。

$ \.footer .parent!empty!append content

$ \.article .next!contents!

$('.footer').parent().empty().append(content);

$('.article').next().contents();

级联将链式调用提升到一个新的水平。不再有烦人的ends()。

$ \.content .parent!
  ..find \.sidebar
    ..append newContent
    ..addClass \highlight
  ..toggleClass \dark
  ..prepend newHeader

var x$, y$;
x$ = $('.content').parent();
y$ = x$.find('.sidebar');
y$.append(newContent);
y$.addClass('highlight');
x$.toggleClass('dark');
x$.prepend(newHeader);

反向回调

反向回调允许你取消嵌套回调函数。它们就像函数，只是箭头指向反方向。

首先，一个常见的例子 - 你是否厌倦了因为等待$(document).ready而不得不缩进所有内容？

<-! $
initializeApp!
...

$(function(){
  initializeApp();
  ...
});

反向回调在 Ajax 中真正闪耀。

data <-! $.get 'ajaxtest'
$ \.result .html data
processed <-! $.get 'ajaxprocess', data
$ \.result .append processed

$.get('ajaxtest', function(data){
  $('.result').html(data);
  $.get('ajaxprocess', data, function(processed){
    $('.result').append(processed);
  });
});

迭代

列表推导式提供了一种强大的方法来迭代集合。

values = [input.val! for form in $ \form for input in form]

var res$, i$, ref$, len$, form, j$, len1$, input, values;
res$ = [];
for(i$=0, len$=(ref$ = $('form')).length; i$ < len$; ++i$){
  form = ref$[i$];
  for (j$ = 0, len1$ = form.length; j$ < len1$; ++j$) {
    input = form[j$];
    res$.push(input.val());
  }
}
values = res$;

结论

这只是 LiveScript 中一些可用功能的简要概述。如你所见，它提供了一套丰富的功能，可以充分发挥 jQuery 的强大功能。

有关更多信息，请查看LiveScript 网站

有关 LiveScript 和 prelude.ls 的更多信息，关注 @gkzahariev。