Sử dụng CoffeeScript ở phía máy khách
Ứng dụng tìm kiếm được viết bằng CoffeeScript
Các chữ viết tắt thường dùng
 JSON: JavaScript Object Notation (Ký pháp đối tượng JavaScript)
 UI: User interface (Giao diện người dùng)
Ứng dụng mẫu mà bạn sẽ tạo ra cho phép người dùng nhập một thuật ngữ tìm kiếm, tìm kiếm cả
trên Google lẫn Twitter, rồi hiển thị các kết quả kết hợp. Phía máy khách của ứng dụng nhận dữ
liệu do người dùng nhập vào và gửi nó đến máy chủ để tìm các kết quả. Khi máy chủ trả về các
kết quả, phía máy khách tạo ra các phần tử giao diện người dùng (UI) cho các kết quả đó và hiển
thị chúng trên màn hình. Bây giờ, hãy đừng lo lắng gì về phía máy chủ hoạt động như thế nào.
Bắt đầu bằng cách định nghĩa mô hình dữ liệu cho ứng dụng. Ứng dụng sẽ hiển thị các kết quả
tìm kiếm, vì vậy hãy định nghĩa một lớp SearchResult. Liệt kê 1 cho thấy định nghĩa này.

Liệt kê 1. Lớp SearchResult cơ sở

class SearchResult
constructor: (data) ->
@title = data.title
@link = data.link
@extras = data

toHtml: -> "<a href='#{@link}'>#{@title}</a>"
toJson: -> JSON.stringify @extras Lớp SearchResult khá đơn giản. Nó:
 Bắt đầu với một hàm tạo (constructor) định nghĩa hai biến thành viên: title (tiêu đề) và
link (liên kết).
 Tìm kiếm hai giá trị này trong đối tượng dữ liệu được chuyển tới hàm tạo.
 Lưu trữ phần còn lại của dữ liệu được chuyển tới một biến thành viên có tên là extras.
Điều này sẽ thuận tiện vì bạn biết bạn sẽ có hai loại kết quả tìm kiếm khác nhau trong

function GoogleSearchResult(data) {
GoogleSearchResult.__super__.constructor.call(this, data);
this.content = this.extras.content;
}
GoogleSearchResult.prototype.toHtml = function() {
return "" + GoogleSearchResult.__super__.toHtml.apply(this, arguments)
+ " <div class='snippet'>" + this.content + "</div>";
};
return GoogleSearchResult;
})(); Để gọi hàm tạo của lớp cha, bạn phải giữ một cá thể của lớp cha trong biến __super__ (có thể
dùng bất kỳ tên nào) và sau đó gọi hàm tạo một cách tường minh. Quay lại Liệt kê 2, bạn có thể
thấy việc này dễ dàng hơn bao nhiêu trong CoffeeScript. Lưu ý rằng ví dụ này đã định nghĩa một
biến cá thể mới được gọi là content (nội dung) trong lớp GoogleSearchResult. Về cơ bản, đây
là một đoạn HTML từ trang web do kết quả tìm kiếm trỏ tới. Không có gì đáng ngạc nhiên là lớp
GoogleSearchResult có đoạn này, nhưng lớp cơ sở lại không có. Cuối cùng, lưu ý việc nạp
chồng (override) của phương thức toHtml. Ví dụ này sử dụng phương thức toHtml của lớp cha
nhưng còn gắn thêm một div bổ sung có đoạn nội dung đó. Xem lại Liệt kê 3 để thấy bước gọi
này đến phương thức toHtml của lớp cha được thực hiện như thế nào. Vì bạn có một lớp con
GoogleSearchResult , nên bạn cũng cần một lớp con TwitterSearchResult, như thể hiện
trong Liệt kê 4.

Liệt kê 4. Lớp TwitterSearchResult

class TwitterSearchResult extends SearchResult
constructor: (data) ->
super data
@source = @extras.from_user

một ngôn ngữ lập trình trên cả phía máy khách lẫn phía máy chủ. Liệt kê 5 cho thấy các kết quả
tìm kiếm giả định từ Google.

Liệt kê 5. Các kết quả tìm kiếm giả định của Google

mockGoogleData = [
GsearchResultClass:"GwebSearch",
link:"
url:"
visibleUrl:"jashkenas.github.com",
cacheUrl:" />v4J:jashkenas
.github.com",
title:"\u003cb\u003eCoffeeScript\u003c/b\u003e",
titleNoFormatting:"CoffeeScript",
content:"\u003cb\u003eCoffeeScript\u003c/b\u003e is a little language
that
compiles into JavaScript. Underneath all of those embarrassing braces and
semicolons, JavaScript has always had a \u003cb\u003e \u003c/b\u003e"
,
GsearchResultClass:"GwebSearch",
link:"
url:"
visibleUrl:"en.wikipedia.org",
cacheUrl:"
:en.wikipedia.org",
title:"\u003cb\u003eCoffeeScript\u003c/b\u003e - Wikipedia, the free
encyclopedia",
titleNoFormatting:"CoffeeScript - Wikipedia, the free encyclopedia",
content:"\u003cb\u003eCoffeeScript\u003c/b\u003e is a programming
language

không nằm trong các dấu nháy. Với JSON các thuộc tính này cũng phải được đặt trong dấu nháy.
Liệt kê 6 cho thấy dữ liệu giả định tương tự với các kết quả tìm kiếm của Twitter.

Liệt kê 6. Các kết quả tìm kiếm giả định của Twitter

mockTwitterData = [
created_at:"Wed, 09 Nov 2011 04:18:49 +0000",
from_user:"jashkenas",
from_user_id:123323498,
from_user_id_str:"123323498",
geo:null,
id:134122748057370625,
id_str:"134122748057370625",
iso_language_code:"en",
metadata:
recent_retweets:4,
result_type:"popular"

profile_image_url:"
_normal.jpg",
source:"<a
href="
=12&quot; rel="nofollow">Twitter for Mac</a>",
text:""CoffeeScript [is] the closest I felt to the power I had twenty
years ago in Smalltalk" - Ward Cunningham ( Nice.",
to_user_id:null,
to_user_id_str:null
]
dùng mà bạn sắp sử dụng. Liệt kê 8 cho thấy một trang web rất đơn giản.

Liệt kê 8. Trang web CoffeeSearch

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CoffeeSearch</title>
<script type="text/javascript" src="search.js"></script>
</head>
<body>
<div>
<label for="searchQuery">Keyword:</label>
<input type="text" name="searchQuery" id="searchQuery"></input>
<input type="button" value="Search" onclick="doSearch()"/>
</div>
<div class="goog" id="gr"/>
<div class="twit" id="tr"/>
</body>
</html> Trang web ở trên có một biểu mẫu cơ bản để nhập một từ khóa và chuyển nó đến một máy tìm
kiếm. Nó đã định nghĩa hai phần và sẵn sàng dùng để thêm các kết quả tìm kiếm vào chúng.
Trang web này đã không định nghĩa mã JavaScript nào trong đó. Thay vào đó, tất cả mã
JavaScript đều ở trong một tệp có tên là doSearch, mà tệp này sẽ là phiên bản biên dịch của
CoffeeScript. Lưu ý rằng khi nhấn vào nút tìm kiếm, một hàm có tên là doSearch được gọi ra.

Hàm gọi lại sử dụng appender để nối thêm các kết quả tìm kiếm từ Google vào một div
và các kết quả tìm kiếm từ Twitter vào một div khác.
Bây giờ bạn có thể chỉ cần biên dịch tất cả mã và chạy nó. Hình 1 cho thấy trang web với dữ liệu
giả định.

Hình 1. Trang tìm kiếm với dữ liệu giả định

Ví dụ này có thể trông không ấn tượng lắm, nhưng nó trình diễn tất cả các hàm cần thiết ở phía
máy khách. Mặc dù bạn vẫn chưa viết mã phía máy chủ, nhưng bạn có thể hoàn toàn tin tưởng
rằng ứng dụng này sẽ làm việc miễn là mã phía máy chủ tạo ra dữ liệu có cấu trúc giống như dữ
liệu giả định.