Facebook Twitter LinkedIn E-mail
magnify
Home Archive for category "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