12/08/2018, 13:27

Những Khái Niệm Cơ Bản Về CoffeeScript <Part 1>

CoffeeScript đã trở nên ngày càng phổ biến trong vài năm gần đây do sự chấp nhận của các cộng đồng Node.js và Rails . Chúng ta hãy xem tại sao nó đang dần trở thành ngôn ngữ thay thế cho Javascript trong tương lai. CoffeeScript được xây dựng dựa trên JavaScript và nó biên dịch thành ...

CoffeeScript đã trở nên ngày càng phổ biến trong vài năm gần đây do sự chấp nhận của các cộng đồng Node.jsRails. Chúng ta hãy xem tại sao nó đang dần trở thành ngôn ngữ thay thế cho Javascript trong tương lai.

CoffeeScript được xây dựng dựa trên JavaScript và nó biên dịch thành JavaScript để bạn có thể chạy trên một trình duyệt web hoặc sử dụng với các công nghệ như: Node.js cho các ứng dụng máy chủ.

CoffeeScript cung cấp một cú pháp rõ ràng nên rất hấp dẫn với những người thích Python hay Ruby.

Ngày nay chúng ta không thể phủ nhận tầm quan trọng của JavaScript trong việc lập trình web và các ứng dụng web. JavaScript được tìm thấy ngày càng nhiều trong các ứng dụng máy tính để bàn và di động.

Với sự phổ biến ngày càng tăng của Node.js, JavaScript đã trở thành một lựa chọn khả thi cho các ứng dụng máy chủ và hệ thống. Một số nhà phát triển đã kịch liệt chống lại JavaScript phần lớn là vì cú pháp không nhất quán và việc triển khai kỳ quặc của nó.

Tuy nhiên, việc triển khai kỳ quặc này đã được giảm bớt do các máy ảo JavaScript được tiêu chuẩn hóa nhiều hơn. Cú pháp không nhất quán có thể được giải quyết phần nào bởi sự tiến triển tiếp theo của JavaScript: ECMAScript, một tiêu chuẩn mới nổi chịu rất nhiều ảnh hưởng của CoffeeScript.

Nếu bạn đang sử dụng JavaScript, CoffeeScript sẽ là một lựa chọn cám dỗ từ góc độ cú pháp, JavaScript đúng là một mớ hỗn độn. Nhiều khi mình đọc vào nhưng plugin sử dụng JavaScript tưởng như xem tranh. (yaoming)

CoffeeScript giải quyết những điểm yếu chính của JavaScript:

  • Cung cấp một cú pháp đơn giản hơn, làm giảm sự rập khuôn, chẳng hạn như các dấu ngoặc () or {} và các dấu , or ;.
  • Sử dụng khoảng trắng như là một cách để tổ chức các đoạn mã.
  • Cung cấp cú pháp đơn giản để thể hiện các hàm.
  • Cung cấp sự thừa kế dựa trên lớp (đó là tùy chọn, nhưng có thể rất có ích khi tiến hành phát triển ứng dụng).

Như đã đề cập, bạn có thể sử dụng CoffeeScript để viết các ứng dụng máy chủ và hệ thống chạy dựa trên Node.js. Mối quan hệ giữa CoffeeScriptNode.js thật ra còn mật thiế hơn, để cài CoffeeScript bạn cần cài Node.js trước, trong bài viết này mình sẽ không giới thiệu việc cài Node.js

  • CoffeeScript được phân phối dưới dạng một gói Node.js khi sử dụng trình quản lý gói của Node, NPM.
  • CoffeeScript phải được biên dịch, trình biên dịch của nó thực sự được viết bằng CoffeeScript và do đó, nó đòi hỏi phải có JavaScript runtime để làm công việc biên dịch. Máy ảo JavaScript V8 nằm trong nhân của Node.js hoàn toàn thích hợp cho nhiệm vụ này.
  • Mở Terminal chạy dòng lệnh sau: npm install --global coffee-script, --global làm cho CoffeeScript có sẵn trên toàn hệ thống chứ không phải chỉ dành cho một dự án cụ thể.
  • Lệnh npm sẽ xuất ra kết quả: /usr/bin/coffee -> /usr/lib/node_modules/coffee-script/bin/coffee., NPM tạo ra một lối tắt (shortcut) trong /usr/bin
  • Để kiểm tra xem tệp coffee chạy được có ở trên đường dẫn đó không: coffee -v

Trình biên dịch CoffeScript bằng câu lệnh coffee -c, để trình biên dịch có thể dich được 1 tệp tin, bạn phải chuyển nó về định dạng tệp tin .coffeescript.

Ví dụ ta tạo tệp tin coffee_test.coffee

for i in [0..10]
  console.log "Hi, Coffee #{i}"

Khi bạn chạy câu lệnh trên Terminal: $ coffee coffee_test.coffee, kế quả trả về cho chúng ta là.

Hi, Coffee 0
Hi, Coffee 1
Hi, Coffee 2
Hi, Coffee 3
Hi, Coffee 4
Hi, Coffee 5
Hi, Coffee 6
Hi, Coffee 7
Hi, Coffee 8
Hi, Coffee 9
Hi, Coffee 10

Để có cái nhìn sâu hơn về biên dịch trong CoffeeScript như thế nào, bạn hãy chạy lệnh coffee -c coffee_test.coffee lúc này nó sẽ tạo ra file coffee_test.js để biên dịch và nội dung trong file coffee_test.js sẽ như sau:

(function() {
  var i;
  for (i = 0; i <= 10; i++) {
   console.log("Hi, Coffee " + i);
  }
}).call(this);

Lợi ích của CoffeeScript là ở chỗ, ngoài việc nó cung cấp một cú pháp đẹp hơn so với JavaScript, nó còn biên dịch thành JavaScript rất đơn giản, hợp lý.

Bạn có thể tự hỏi tại sao tất cả mã được gói trong một hàm, đó là vì JavaScript chỉ hỗ trợ phạm vi mức hàm, bằng cách gói mọi thứ trong một hàm, bạn chắc chắn rằng biến chỉ có phạm vi ở hàm đó.

Bạn biết cách để biên dịch chương trình CoffeeScript, tiếp theo hãy xem xét tính năng có ích nhất của CoffeeScript đó là REPL.

REPL là một công cụ tiêu chuẩn được tìm thấy trong nhiều ngôn ngữ lập trình, đặc biệt là ngôn ngữ lập trình hàm.

REPL tương đương với IRB của Ruby, chỉ cần nhập coffee sẽ khởi chạy REPL của CoffeeScript.

Ví dụ:

coffee> nums = [1..10]
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

coffee> isOdd = (n) -> n % 2 == 1

coffee> odds = nums.filter isOdd
[ 1, 3, 5, 7, 9 ]

coffee> odds.reduce (a,b) -> a + b
25

Mỗi khi bạn nhập một biểu thức vào REPL, nó sẽ tính toán biểu thức đó, in kết quả và sau đó chờ biểu thức tiếp theo. Thật là rất giống IRB trong Rails đúng không nào!? (ok)

COFFEESCRIPT JAVASCRIPT
is ===
isnt !==
not !
and &&
or ||
true, yes, on true
false, no, off false
@, this this
of in
in no JS
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
  <script type="text/coffeescript">
    sub = (a,b) -> if (b==0) then a else sub(b, a % b)
    $("#button").click ->
      a = $("#a").val()
      b = $("#b").val()
      $("#c").html sub(a,b)
  </script>
</head>
<body>
  Input A: <input type="text" id="a"/><br/>
  Input B: <input type="text" id="b"/><br/>
  <input type="button" value="Calculate" id="button"/> <br/>
  Result: <span id="c"/>
</body>
</html>

Ở ví dụ trên mình sử dụng thư viện Ajax của Google để tải jQuery.

Tải thư viện trình biên dịch CoffeeScript từ kho lưu trữ Github của Jeremy Ashkenas người tạo nên CoffeeScript (Đọc thêm)

Ví dụ trên là phép tính giữ hai biểu thức đơn giản mình viết làm demo để các bạn mới tìm hiểu về CoffeeScript lắm được cấu trúc cơ bản.

Bài viết sau mình sẽ đi vào từng khía cạnh trong CoffeeScript, các bạn nhớ đón đọc nhé (thankyou).

  • Cấu trúc viết code của CoffeeScript rất ngắn gọn, mạch lạc và cực kỳ dễ hiểu
  • Bạn có thể khám phá CoffeeScript bằng cách sử dụng REPL, giống như IRB trong Rails

0