CoffeeScript初识
- 前言
- CoffeeScript是什么
- CoffeeScript本地环境搭建
首先, 安装node环境 http://nodejs.org/
其次，安装基于node的CoffeeScript模块
npm install coffee-script
至此，coffee环境搭建成功，可以新建hello.coffee文件，编写CoffeeScript代码，在cmd中输入：
coffee -c hello.coffee
编译生成hello.js文件。
如果对grunt熟悉，基于grunt构建前端代码，可安装grunt的coffee插件 grunt-contrib-coffee对coffee文件进行自动化编译。
https://npmjs.org/package/grunt-contrib-coffee
- coffeeScript之我的认识
- 基本的coffeeScrpit语法，大家可以去官网查看详细的说明文档，这里说下典型的几个语法。
变量：变量申明无需var这样的关键字，例如:
#声明变量并赋值a
a = ”hello coffee”
利用coffee -c命令编译后代码
// Generated by CoffeeScript 1.6.3 (function() { var a; a = 'hello coffee'; }).call(this);
函数:无需function这样的关键字，只需写->。
square = (x) -> x * x
cube = (x) -> square(x) * x
编译后
var cube, square; square = function(x) { return x * x; }; cube = function(x) { return square(x) * x; };
数组和对象：对象不需要{ 和 }，只需正确的换行和缩进。
song = ["do", "re", "mi", "fa", "so"] singers = {Jagger: "Rock", Elvis: "Roll"} bitlist = [ 1, 0, 1 0, 0, 1 1, 1, 0 ] kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9
编译后
var bitlist, kids, singers, song; song = ["do", "re", "mi", "fa", "so"]; singers = { Jagger: "Rock", Elvis: "Roll" }; bitlist = [1, 0, 1, 0, 0, 1, 1, 1, 0]; kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 } };
关系运算符： &&用户and替换，||用 or等，更接近自然语言。 in在coffee中实现了特殊的功能，可参见：http://coffeescript.org/
in的应用
winner = yes if pick in [47, 92, 13
编译后
var winner; if (pick === 47 || pick === 92 || pick === 13) { winner = true; }
class: coffee类似java，ruby等语言引入class，来是先js的对象继承和组合
#声明类 class Animal #构造函数 constructor: (@name) -> #对象内方法 move: (meters) -> alert @name + " moved #{meters}m." #Snake继承Animal class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45 #利用类的构造函数实例化对象 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()
编译后
// Generated by CoffeeScript 1.6.3 (function() { var Animal, Horse, Snake, sam, tom, _ref, _ref1, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); Snake = (function(_super) { __extends(Snake, _super); function Snake() { _ref = Snake.__super__.constructor.apply(this, arguments); return _ref; } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake; })(Animal); Horse = (function(_super) { __extends(Horse, _super); function Horse() { _ref1 = Horse.__super__.constructor.apply(this, arguments); return _ref1; } Horse.prototype.move = function() { alert("Galloping..."); return Horse.__super__.move.call(this, 45); }; return Horse; })(Animal); sam = new Snake("Sammy the Python"); tom = new Horse("Tommy the Palomino"); sam.move(); tom.move(); }).call(this);
以上对coffee一些典型的语法做了说明，很多都是网站的说明，感觉有点累赘了，大家可去官网详细的说明。
2. coffee的优势和劣势
前几天公司内网也发起针对该不该用coffeeScript的讨论，其中不乏真知灼见。
优势：
1. 更少，更紧凑，和更清晰的代码，从上面的例子和官方的说明可知，CoffeeScript被称为“如诗一样美”，足见其代码更容易规范。
2. 按照标准的规则编译coffee，最终生成的代码都是js中比较精华的部分，可以避免一些错误，降低bug率。
3. 在很多常用模式的实现上采用了JavaScript中的最佳实践
4. CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测
5. CoffeeScript很多语法更接近自然语言，更符合人们思维的顺序
6. CoffeeScript弥补了js本身语言设计的不足，例如class及其继承，再者，我想coffeeScript中的一些语法优势也会被javascript设计小组发现，从而推动js的发展。
劣势：
1. 正因为CoffeeScript的简洁性，代码更少，因此信息量也就少了，这样就会降低代码的可读性。
2. 现在还没有好的js2Coffee的插件或者平台，基于CoffeeScript的项目需要团队中所有人都比较深入的理解coffee，会增加学习成本。
