分类：Coffeescript

Play Framework Web开发教程(35): 使用LESS和CoffeeScript

浏览器最终处理的的HTML文档包含CSS和JavaScript，因此你的应用也必须输出这些浏览器支持的文件，但是使用CSS和JavaScript并不总是程序员最好的选择，很多程序员希望使用最新的Web技术，比如LESS和CoffeeScript。 LESS为一个stylesheet语言，通过LESS编译器可以把LESS语句翻译成CSS格式，同样CoffeeScrip通过编译也可以转换成JavaScript语言。
Play框架集成了LESS和CoffeeScript编译器，关于LESS和CoffeeScript的用法和优点不在本系列教材讨论的范围之列，本篇介绍如何在Play应用使用LESS和CoffeeScript。
如果你使用IntelliJ IDEA基础开发环境，LESS和CoffeeScript也会自动编译成对应的CSS和JavaScript，不需要你做额外的工作。
LESS
LESS(http://lesscss.org) 和CSS相比具有很多优点，比如LESS支持使用变量，minxin，嵌套，以及其它语言结构来帮助开发人员。比如下面的普通CSS，用来设置header,footer的背景色：

.header {
    background-color: #0b5c20;
}
.footer {
    background-color: #0b5c20;
}
.footer a {
    font-weight: bold;
}

这段CSS代码显示出来CSS的一些缺陷，我们必须重复定义background-color定义 ，而且需要重复定义.footer 如果需要定义footer内部的元素。 而如果使用LESS,上面代码可以改写为：

@green: #0b5c20;
.header {
  background-color: @green;
}
.footer {
  background-color: @green;
  a {
    font-weight: bold;
  }
}

我们可以定义一个变量@green，此外也可以嵌套定义。

coffeeScript
CoffeeScript(http://coffeescript.org) 和JavaScript相比在语法结构上有所增强.CoffeeScript是一套JavaScript的转译语言。受到Ruby、Python与Haskell等语言的启发，CoffeeScript增强了JavaScript的简洁性与可读性。此外，CoffeeScript也新增了更复杂的功能，例如列表内涵（List comprehension）、模式匹配（Pattern matching）等。一般来说，CoffeeScript可以在不影响执行效能的情况下，缩短约三分之一的程式码长度。
例如下面的JavaScript代码：

math = {
    root: Math.sqrt,
    square: square,
    cube: function(x) {
        return x * square(x);
    }
};

使用coffeescript改写成：

math =
  root: Math.sqrt
  square: square
  cube: (x) -> x * square x

关于LESS和CoffeeScript的中文教程，可以关注本博客，之后也会提供相关教程。

CoffeeScript开发教程(1): 概述

目前我们正在介绍Play应用开发，Play应用缺省支持CoffeeScript，那么什么是CoffeeScript呢？
CoffeeScript是一套JavaScript的转译语言。受到Ruby、Python与Haskell等语言的启发，CoffeeScript增强了JavaScript的简洁性与可读性。此外，CoffeeScript也新增了更复杂的功能，例如列表内涵（List comprehension）、模式匹配（Pattern matching）等。一般来说，CoffeeScript可以在不影响执行效能的情况下，缩短约三分之一的程式码长度。

简单的说“CoffeeScript”就是“JavaScript”，因为它最终编译后就是JavaScript，编译后的代码和CoffeeScript源码是一一对应的，你也可以在Coffeescript中使用任何JavaScript函数库，好处是简洁性与可读性。很多IDE不直接支持CoffeeScript的调试，这可能是它和JavaScript相比的一个缺点，不过我们选用IntelliJ IDEA作为开发环境，它支持CoffeeScript的调试，在学习过程中，你也可以使用http://coffeescript.org/上提供的”Try CoffeeScript“ 来测试CoffeeScript代码，并且我们的教程基本上翻译自这个教程。

下面是CoffeeScript和 编译后生成的JavaScript的对比：

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

------------------------------------------------------------------------------------------------------------
编译后的JavaScript
------------------------------------------------------------------------------------------------------------
var cubes, list, math, num, number, opposite, race, square,
  __slice = [].slice;

number = 42;

opposite = true;

if (opposite) {
  number = -42;
}

square = function(x) {
  return x * x;
};

list = [1, 2, 3, 4, 5];

math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

race = function() {
  var runners, winner;
  winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  return print(winner, runners);
};

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

cubes = (function() {
  var _i, _len, _results;
  _results = [];
  for (_i = 0, _len = list.length; _i < _len; _i++) {
    num = list[_i];
    _results.push(math.cube(num));
  }
  return _results;
})();
run: cubes