浏览器最终处理的的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的中文教程,可以关注本博客,之后也会提供相关教程。