CoffeeScript Basics

1. Giới thiệu về coffeescript
CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

The golden rule of CoffeeScript is: “It’s just JavaScript”. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Các bạn có thể tham khảo CoffeeScript basic trên http://coffeescript.org/#overview

2. Sau đây demo một phần nhỏ của CoffeeScript trên Ruby on Rails

b1. Tạo một ứng dụng Rails gồm có 1 ô textbox để nhập giá trị
b2. Viết demo.js để validate cho textbox đó như sau:

var CreditCard = {
cleanNumber: function(number) {
return number.replace(/[- ]/g, "");
},

validNumber: function(number) {
var total = 0;
number = this.cleanNumber(number);
for (var i=number.length-1; i >= 0; i--) {
var n = +number[i];
if ((i+number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 - 9 : n*2;
}
total += n;
};
return total % 10 == 0;
}
};

$(function() {
$("#order_credit_card_number").blur(function() {
if (CreditCard.validNumber(this.value)) {
$("#credit_card_number_error").text("");
} else {
$("#credit_card_number_error").text("Invalid credit card number.");
}
});
});

Trên đây là code js để validate ô textbox trong ví dụ, sau đây chúng ta sẽ xem từng phần mã js làm gì và chuyển đổi sang coffeescript như nào.

– Phần đầu tiên, chúng tôi sẽ chuyển đổi là chức năng cleanNumber mà mục đích là để làm sạch bất kỳ số lượng thẻ được nhập bằng cách loại bỏ các không gian và dấu gạch ngang cách.

var CreditCard = {
cleanNumber: function(number) {
return number.replace(/[- ]/g, "");
}
}

Mã coffescript:

CreditCard =
cleanNumber: (number) ->
number.replace /[- ]/g, ""

Với CoffeeScript chúng ta có thể loại bỏ rất nhiều cú pháp JavaScript. CoffeeScript sử dụng các tab xác định khối câu lệnh vì vậy chúng tôi có thể loại bỏ tất cả các dấu ngoặc nhọn.

Với CoffeeScript chúng ta cũng có thể loại bỏ bất kỳ việc sử dụng từ khóa var vì đây là không cần thiết và ở cuối của một hàm chúng ta không cần thêm từ khóa return. Giá trị cuối cùng trong một chức năng sẽ tự động được trả lại, giống như nó là trong Ruby. Phẩy cũng không cần thiết trong CoffeeScript và có thể được gỡ bỏ.

Các trường hợp ngoại lệ các hàm có đối số được gọi (cleanNumber: (number)). Ngoặc đơn là cần thiết ở đây để cho CoffeeScript biết rằng một chức năng đang được gọi.

Cuối cùng, chúng ta phải thay đổi cách một hàm được gọi. Chúng ta cần phải loại bỏ các từ khóa function và thay thế nó bằng ->

Chúng ta có thể biên dịch thử bằng cách vào : http://coffeescript.org/#overview click chọn tab tryCoffeeScript copy đoạn mã coffeescript trên vào bên trái để trình biên dịch lại xem có tương ứng như js ban đầu không.

– Tiếp theo chúng ta xem tới function validNumber

js:

validNumber: function(number) {
var total = 0;
number = this.cleanNumber(number);
for (var i=number.length-1; i >= 0; i--) {
var n = +number[i];
if ((i+number.length) % 2 == 0) {
n = n*2 > 9 ? n*2 - 9 : n*2;
}
total += n;
};
return total % 10 == 0;
}

coffescript:

validNumber: (number) ->
total = 0
number = @cleanNumber(number)
for i in [(number.length-1)..0]
n = +number[i]
if (i+number.length) % 2 == 0
n = if n*2 > 9 then n*2 - 9 else n*2
total += n
total % 10 == 0

Chúng ta đã loại bỏ được các dấu ngoặc và từ khóa function.
Ngoài ra bất cứ nơi nào chúng ta thấy trong mã js chúng ta gọi tới method cleanNumber = từ khóa this thì coffeescript thay thế nó bằng @, thêm nữa là coffeescript thay đổi điều kiện if else ? bằng if then else như ví dụ.

Tiếp theo đến đoạn logic for if, để xem có thay đổi gì trong đoạn mã trên chúng ta thử làm với đoạn mã sau trước:
coffeescript:

for number in [1,2,3]
alert number

Chúng ta có thể biên dịch thử bằng cách vào : http://coffeescript.org/#overview click chọn tab tryCoffeeScript copy đoạn mã coffeescript trên vào bên trái để trình biên dịch lại xem có tương ứng như js ban đầu không.
js tương ứng với coffeescript trên như sau:

var i, len, number, ref;

ref = [1, 2, 3];
for (i = 0, len = ref.length; i < len; i++) {
number = ref[i];
alert(number);
}

Tiếp theo chúng ta thử với đoạn mã
coffeescript:

for number in [1..3]
alert number

hoặc

for number in [3..1]
alert number

js tương ứng với coffeescript trên như sau:

var number;
for (number = 1; number <= 3; number++) {
alert(number);
}

var i, number;

for (number = i = 3; i >= 1; number = --i) {
alert(number);
}

So với ví dụ ban đầu chúng ta đã thấy sự khác biệt và tiện dụng của coffeescript 🙂

Với đoạn mã

$(function() {
$("#order_credit_card_number").blur(function() {
if (CreditCard.validNumber(this.value)) {
$("#credit_card_number_error").text("");
} else {
$("#credit_card_number_error").text("Invalid credit card number.");
}
});
});

Cũng tương ứng ta chuyển đổi sang coffeescript như sau:

jQuery ->
$("#order_credit_card_number").blur ->
if CreditCard.validNumber(@value)
$("#credit_card_number_error").text("")
else
$("#credit_card_number_error").text("Invalid credit ↵
card number.")

Reference: http://asciicasts.com/episodes/267-coffeescript-basics