Ứ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ề...
Sử dụng CoffeeScript phía máy khách Ứng dụng tìm kiếm viết 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 tạo cho phép người dùng nhập thuật ngữ tìm kiếm, tìm kiếm Google lẫn Twitter, hiển thị kết kết hợp Phía máy khách ứng dụng nhận liệu người dùng nhập vào gửi đến máy chủ để tìm kết Khi máy chủ trả kết quả, phía máy khách tạo phần tử giao diện người dùng (UI) cho kết hiển thị chúng hình Bây giờ, đừng lo lắng phía máy chủ hoạt động Bắt đầu cách định nghĩa mơ hình liệu cho ứng dụng Ứng dụng hiển thị kết tìm kiếm, định nghĩa lớp SearchResult Liệt kê cho thấy định nghĩa Liệt kê Lớp SearchResult sở class SearchResult constructor: (data) -> @title = data.title @link = data.link @extras = data toHtml: -> "#{@title}" toJson: -> JSON.stringify @extras Lớp SearchResult đơn giản Nó: Bắt đầu với hàm tạo (constructor) định nghĩa hai biến thành viên: title (tiêu đề) link (liên kết) Tìm kiếm hai giá trị đối tượng liệu chuyển tới hàm tạo Lưu trữ phần lại liệu chuyển tới biến thành viên có tên extras Điều thuận tiện bạn biết bạn có hai loại kết tìm kiếm khác ứng dụng (các kết từ Google kết từ Twitter) Định nghĩa hai phương thức cho lớp SearchResult: o toHtml, tạo chuỗi HTML đơn giản từ cá thể SearchResult, lợi dụng phép nội suy chuỗi CoffeeScript o toJson, dùng để chuyển đối tượng SearchResult thành chuỗi JSON Lớp Liệt kê cung cấp tính kết tìm kiếm Bạn nhận nhiều liệu từ kết tìm kiếm Google lẫn Twitter Mơ hình hóa kết cách tạo lớp cho kiểu kết tìm kiếm Liệt kê cho thấy kiểu kết tìm kiếm Google Liệt kê Lớp GoogleSearchResult class GoogleSearchResult extends SearchResult constructor: (data) -> super data @content = @extras.content toHtml: -> "#{super} #{@content}" Liệt kê cho thấy việc lập trình hướng đối tượng CoffeeScript dễ Lớp GoogleSearchResult lớp mở rộng (kế thừa) từ lớp sở SearchResult Liệt kê Hàm tạo gọi hàm tạo lớp cha (superclass) Nếu bạn thực thừa kế theo phong cách-lớp JavaScript, bạn biết việc khó khăn đến mức Liệt kê cho thấy mã JavaScript tạo Liệt kê Mã JavaScript lớp GoogleSearchResult GoogleSearchResult = (function() { extends(GoogleSearchResult, SearchResult); 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) + " " + this.content + ""; }; return GoogleSearchResult; })(); Để gọi hàm tạo lớp cha, bạn phải giữ cá thể lớp cha biến super (có thể dùng tên nào) sau gọi hàm tạo cách tường minh Quay lại Liệt kê 2, bạn thấy việc dễ dàng CoffeeScript Lưu ý ví dụ định nghĩa biến cá thể gọi content (nội dung) lớp GoogleSearchResult Về bản, đoạn HTML từ trang web kết tìm kiếm trỏ tới Khơng có đáng ngạc nhiên lớp GoogleSearchResult có đoạn này, lớp sở lại khơng có Cuối cùng, lưu ý việc nạp chồng (override) phương thức toHtml Ví dụ sử dụng phương thức toHtml lớp cha cịn gắn thêm div bổ sung có đoạn nội dung Xem lại Liệt kê để thấy bước gọi đến phương thức toHtml lớp cha thực Vì bạn có lớp GoogleSearchResult , nên bạn cần lớp TwitterSearchResult, thể Liệt kê Liệt kê Lớp TwitterSearchResult class TwitterSearchResult extends SearchResult constructor: (data) -> super data @source = @extras.from_user @link = "http://twitter.com/#{@source}/status/#{@extras.id_str}" @title = @extras.text toHtml: -> "@#{@source}: #{super}" Lớp TwitterSearchResult giống lớp GoogleSearchResult Liệt kê Hàm tạo sử dụng hàm tạo lớp cha Cũng: Định nghĩa biến thành viên riêng có tên source (nguồn) Xây dựng biến thành viên link cách sử dụng khuôn mẫu chuỗi ký tự biến thành viên Đặt lại giá trị biến thành viên title đến trường khác từ liệu đầu vào Ghi chồng phương thức toHtml lớp cha, gắn thêm liên kết đến người dùng tạo tweet Một lần nữa, phép nội suy chuỗi CoffeeScript làm cho việc sử dụng phương thức toHtml lớp cha trở nên dễ dàng tạo phương thức Để gọi phương thức toHtml lớp cha, bạn cần dùng từ khóa super Bạn dùng cách gọi super.toHtml, không cần phải làm thực gọi báo lỗi Chỉ cần dùng CoffeeScript hiểu bạn muốn gọi phương thức tương tự từ lớp cha, điều giúp bạn viết mã dễ dàng chút mà Bây bạn có cấu trúc liệu mà ứng dụng cần bạn bắt đầu viết số xử lý phía máy khách Sẽ dễ dàng nhiều thử nghiệm mã với tầng làm việc bên Vì khơng có tầng làm việc bên dưới, tiếp tục tìm hiểu phần thú vị nhất: liệu giả định Về đầu trang Sử dụng liệu giả định Khi xây dựng ứng dụng máy chủ - máy khách ứng dụng web đại, điều ln có nghĩa tạo giao diện dùng chung, nơi hai phần ứng dụng gặp sau tạo liệu giả định Điều cho phép bạn phát triển phần ứng dụng phía máy khách phía máy chủ song song với Cách tiếp cận đặc biệt tốt với CoffeeScript bạn sử dụng ngơn ngữ lập trình phía máy khách lẫn phía máy chủ Liệt kê cho thấy kết tìm kiếm giả định từ Google Liệt kê Các kết tìm kiếm giả định Google mockGoogleData = [ GsearchResultClass:"GwebSearch", link:"http://jashkenas.github.com/coffee-script/", url:"http://jashkenas.github.com/coffee-script/", visibleUrl:"jashkenas.github.com", cacheUrl:"http://www.google.com/search?q\u003dcache:nuWrlCK4v4J: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:"http://en.wikipedia.org/wiki/CoffeeScript", url:"http://en.wikipedia.org/wiki/CoffeeScript", visibleUrl:"en.wikipedia.org", cacheUrl:"http://www.google.com/search?q\u003dcache:wshlXQEIrhIJ :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 that transcompiles to JavaScript The language adds syntactic sugar inspired by Ruby, Python and Haskell to enhance \u003cb\u003e \u003c/b\u003e" , GsearchResultClass:"GwebSearch", link:"http://codelikebozo.com/why-im-switching-to-coffeescript", url:"http://codelikebozo.com/why-im-switching-to-coffeescript", visibleUrl:"codelikebozo.com", cacheUrl:"http://www.google.com/search?q\u003dcache:VDKirttkw30J: codelikebozo.com", title:"Why I\u0026#39;m (Finally) Switching to \u003cb\u003eCoffeeScript \u003c/b\u003e - Code Like Bozo", titleNoFormatting:"Why I\u0026#39;m (Finally) Switching to CoffeeScript Code Like Bozo", content:"Sep 5, 2011 \u003cb\u003e \u003c/b\u003e You may have already heard about \u003cb\u003eCoffeeScript\u003c/b\u003e and some of the hype surrounding it but you still have found several reasons to not make the \u003cb\u003e \u003c/b\u003e" ] Điều hiển nhiên việc tạo liệu giả định với cú pháp đơn giản CoffeeScript dễ dàng Ví dụ cho thấy chữ hay số viết tắt (literals) đối tượng CoffeeScript Liệt kê mảng Sử dụng thụt đầu dòng thêm để báo đối tượng đặc tính đối tượng lại thụt vào Mã tiện để so sánh với JSON Khoảng trống thay cho dấu ngoặc nhọn Chúng giống chữ hay số viết tắt JavaScript, thuộc tính khơng nằm dấu nháy Với JSON thuộc tính phải đặt dấu nháy Liệt kê cho thấy liệu giả định tương tự với kết tìm kiếm Twitter Liệt kê Các kết tìm kiếm giả định 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:"http://a3.twimg.com/profile_images/1185870726/gravatar _normal.jpg", source:" results = google: (new GoogleSearchResult obj for obj in mockGoogleData) twitter: (new TwitterSearchResult obj for obj in mockTwitterData) callback results Lớp MockSearch có phương thức đơn lẻ gọi search (tìm kiếm) Nó có hai tham số: query (truy vấn) để sử dụng cho việc tìm kiếm hàm callback (gọi lại) Lớp MockSearch trả kết nhanh chóng, việc tìm kiếm thực cần truyền qua mạng để nói chuyện với máy chủ Để xử lý việc JavaScript để đảm bảo bạn không làm cho UI bị treo, bạn thường sử dụng hàm callback Bước tạo đối tượng có tên results (kết quả) Bạn sử dụng lại cú pháp chữ hay số viết tắt đối tượng CoffeeScript Đối tượng results có hai trường: google twitter Các giá trị trường biểu thị cách sử dụng phép gồm mảng Biểu thức tạo mảng kiểu SearchResult thích hợp (GoogleSearchResult dùng cho Google TwitterSearchResult dùng cho Twitter) Cuối cùng, hàm callback gọi với đối tượng results chuyển cho Việc tìm kiếm giả định làm việc, đó, bạn cần sẵn sàng viết mã giao diện người dùng (UI) phía máy khách Về đầu trang Mang tất vào trình duyệt Trước liên kết giao diện người dùng với mã ứng dụng, xem xét giao diện người dùng mà bạn sử dụng Liệt kê cho thấy trang web đơn giản Liệt kê Trang web CoffeeSearch CoffeeSearch Keyword: Trang web có biểu mẫu để nhập từ khóa chuyển đến máy tìm kiếm Nó định nghĩa hai phần sẵn sàng dùng để thêm kết tìm kiếm vào chúng Trang web khơng định nghĩa mã JavaScript Thay vào đó, tất mã JavaScript tệp có tên doSearch, mà tệp phiên biên dịch CoffeeScript Lưu ý nhấn vào nút tìm kiếm, hàm có tên doSearch gọi Hàm phải nằm tệp search.js; thứ tệp search.js mà bạn chưa thấy Liệt kê cho thấy định nghĩa theo CoffeeScript Liệt kê Hàm doSearch trang web @doSearch = -> $ = (id) -> document.getElementById(id) kw = $("searchQuery").value appender = (id, data) -> data.forEach (x) -> $(id).innerHTML += "#{x.toHtml()}
" ms = new MockSearch ms.search kw, (results) -> appender("gr", results.google) appender("tr", results.twitter) Bạn thấy hàm có ký hiệu @ (một ký hiệu tắt this) đặt trước Khi định nghĩa mức cao kịch lệnh, this trở thành đối tượng chung (global) Trong trường hợp kịch lệnh trang web, đối tượng chung đối tượng cửa sổ, cho phép tham chiếu trang web mà bạn thấy Liệt kê Hàm doSearch làm nhiều việc vài dòng mã Mã này: Định nghĩa hàm cục có tên $, đại diện cho hàm document.getElementById Sử dụng hàm để nhận từ khóa nhập vào biểu mẫu tìm kiếm Liệt kê Định nghĩa hàm cục khác tên appender, nhận ID phần tử DOM mảng Sau duyệt qua mảng, tạo chuỗi HTML nối thêm phần tử có ID cho Tạo đối tượng MockSearch gọi phương thức search Chuyển từ khoá từ biểu mẫu tạo hàm gọi lại Hàm gọi lại sử dụng appender để nối thêm kết tìm kiếm từ Google vào div kết tìm kiếm từ Twitter vào div khác Bây bạn cần biên dịch tất mã chạy Hình cho thấy trang web với liệu giả định Hình Trang tìm kiếm với liệu giả định Ví dụ trơng khơng ấn tượng lắm, trình diễn tất hàm cần thiết phía máy khách Mặc dù bạn chưa viết mã phía máy chủ, bạn hồn tồn tin tưởng ứng dụng làm việc miễn mã phía máy chủ tạo liệu có cấu trúc giống liệu giả định ... bạn phát triển phần ứng dụng phía máy khách phía máy chủ song song với Cách tiếp cận đặc biệt tốt với CoffeeScript bạn sử dụng ngơn ngữ lập trình phía máy khách lẫn phía máy chủ Liệt kê cho thấy... ấn tượng lắm, trình diễn tất hàm cần thiết phía máy khách Mặc dù bạn chưa viết mã phía máy chủ, bạn hồn tồn tin tưởng ứng dụng làm việc miễn mã phía máy chủ tạo liệu có cấu trúc giống liệu giả... liệu giả định Về đầu trang Sử dụng liệu giả định Khi xây dựng ứng dụng máy chủ - máy khách ứng dụng web đại, điều ln có nghĩa tạo giao diện dùng chung, nơi hai phần ứng dụng gặp sau tạo liệu giả