Tác giả
sp('Sergio Pereira')
Sergio Pereira
Các phiên bản khác English version PDF from O'Reilly Dutch (v1.5.0) Japanese (v1.5.0) PDF (v1.4.0) French (v1.4.0) Turkish (v1.4.0) Korean (v1.4.0) Italian (v1.4.0) Portuguese (v1.4.0) Chinese (v1.4.0) Chinese (v1.4.0) Hungarian (v1.4.0) Dutch (v1.4.0) Polish (v1.4.0) English (v1.4.0) English (v1.3.1) French (v1.3.1) Romanian (v1.3.1) Russian (v1.3.1) Cần tình nguyện viên ^_^
Tài liệu này là gì?
Trong trường hợp bạn chưa từng dùng thử, prototype.js là một thư viện JavaScript được viết bởi Sam Stephenson. Thư viện này có ý tưởng xuất sắc và là một mã tương thích chuẩn được viết rất tốt, với hàng loạt các thành phần liên quan đến việc xậy dựng những trang web đa dạng và có tính tương thích cao để giúp bạn xây dựng các trang Web2.0.
Nếu bạn cố gắng sử dụng thư viện này gần đây, bạn có thể nhận thấy rằng tài liệu kèm theo không phải là một điểm mạnh của nó. Như những nhà phát triển trước tôi, tôi phải cật lực xem toàn bộ mã lệnh và thực hành với nó. Tôi nghĩ sẽ là rất tuyệt nếu như để lại vài dòng ghi chú khi tôi học và chia sẻ nó với mọi người.
Tôi cũng giới thiệu un-official reference cho các đối tượng, lớp, hàm số, và phần mở rộng kèm theo thư viện này.
Khi bạn đọc những ví dụ và phần tham khảo, nhà phát triển quen thuộc với ngôn ngữ Ruby sẽ nhận thấy rằng có sự giống nhau có chủ ý các lớp có sẵn của Ruby và nhiều phần mở rộng khác được khởi tạo bởi thư viện này.
toc
Mục có liên quan
Advanced JavaScript guide.
toc
Các hàm tiện ích
Thư viện này mang đến rất nhiều các đối tượng và các hàm tiện ích đã được định nghĩa sẵn. Mục tiêu chủ yếu của các hàm này là nhằm giúp bạn đỡ phải lập đi lặp lại việc đánh máy và các thành ngữ.
toc
Sử dụng hàm $()
Hàm $() là một cách tiện lợi thay thế cho 1 hàm rất quen thuộc đó là document.getElementById() của DOM.Giống như hàm DOM, hàm này trả về thành tố ứng với id được truyền dưới dạng tham số.
Không giống với hàm DOM, hàm này đi xa hơn một bậc. Bạn có thể truyền 1 hay nhiều id và $() sẽ trả về một đối tượngArray với tất cả các thành tố được yêu cầu. Ví dụ dưới đây sẽ minh họa điều này.
Đây là một đoạn văn bản
Đây là một đọan văn bản khác
Một điều thú vị nữa về hàm này đó là bạn có thể truyền được chuỗi id hoặc là đối tượng của thành tốt đó. Điều này làm cho hàm này rất hữu ích khi tạo các hàm khác mà có thể nhận được cả dạng tham số.
toc
Sử dụng hàm $$()
Hàm $$() sẽ giúp bạn rất nhiều nếu bạn muốn tách biết các tập tin CSS ra khỏi khung nội dung. Nó truyền 1 hay nhiều bộ lọc(filter) CSS, từng cái một sẽ được dùng tuẩn tự để xác định thể hiện CSS. Nó sẽ trả về phần tử trùng khớp với bộ lọc CSS ấy
Sử dụng hàm này rất dễ. Hãy xem ví dụ sau:
User name:
Password:
Một ghi chú về hiệu suất. Hàm $$() hiện tại trong prototype.js không được xem là có hiệu quả đặc biệt. Nếu bạn muốn đào sâu hơn về XHTML bằng cách sử dụng $$() thường xuyên, bạn có thể xem xét những thể hiện khác, có thể sẽ thay thế hàm $$().
toc
Sử dụng hàm $F()
Hàm $F() lại là một cách ngắn gọn khác. Nó trả về giá trị của vùng nhập dữ liệu, như hộp văn bản, hay là danh sách thả xuống. Hàm này nhận tham số là id của thành tố hoặc là chính đối tượng của thành tố ấy.
toc
Sử dụng hàm $A()
Hàm $A() một tham số nó nhận được thành một đối tượng Array.
Hàm này kết hợp với phần mở rộng của lớp Array, làm cho nó dễ dàng có thể chuyển đổi hoặc sao chép bất cứ danh sách đếm được nào thành đối tượng Array . Có một số người khuyên là nên chuyển đổi đối tượng DOM NodeLists thành một mảng thông thường, để có thể tham chiếu dễ dàng.Xem ví dụ dưới đây.
toc
Sử dụng hàm $H()
Hàm $H() chuyển đổi các đối tượng thành các đối tượng Hash đếm được (enumerable) tương tự như các mảng.
toc
Sử dụng hàm $R()
Hàm $R() đơn giản chỉ là cách ngắn gọn viết thay cho new ObjectRange(lowerBound, upperBound, excludeBounds).
Đi đến phần ObjectRange để tham khảo đầy đủ về lớp này. Trong lúc ấy thì hãy xem qua ví dụ đơn giản sau để biết cách sử dụng vòng lặp với phương thức each. Xem thêm về phương thức này tại Enumerable .
toc
Sử dụng hàm Try.these()
Hàm Try.these() làm mọi việc đơn giản hơn khi bạn có ý định thử gọi nhiều hàm khác nhau cho đến khi có 1 hàm trong số đó hoạt động. Nó lấy tham số là tên của các hàm và gọi tuần tự các hàm đó cho đến khi có 1 hàm hoạt động. Hàm trả về kết quả của hàm được gọi thành công.
Trong ví dụ dưới đây, hàm xmlNode.text hoạt động trong một số trình duyệt, và hàm xmlNode.textContent hoạt động trong một số trình duyệt khác. Sử dụng hàm Try.these() chúng ta có thể trả về hàm có thể hoạt đọng.
toc
Đối tượng Ajax
Hàm tiệc ích được đề cập phía trên là rất tốt nhưng, sự thật là nó không phải là cách tốt nhất để làm công việc này. Bạn có thể tự viết nó hoặc có thể có nhưng hàm tương tự trong mã lệnh của bạn. Nhưng những hàm đó chỉ là phần nổi của tảng băng mà thôi.
Tôi chắc chắn là bạn thấy hứng thú với prototype.js là vì khả năng hỗ trợ AJAX của nó. Bây giờ hãy cùng giải thích vì sao thư viện này sẽ làm cho bạn thấy thoải mái hơn khi bạn cần thực hiện các cấu trúc login của AJAX.
Đối tượng Ajax là một đối tượng được định nghĩa sẵn, được tạo bởi thư viện nhằm gói gọn và làm đơn giản những đoạn mã khó hiểu khi viết các chức năng AJAX. Hàm này chứa một số lớp cung cấp các cấu trúc AJAX được gói gọn lại. Nào, hãy xem thử qua một số trong chúng.
toc
Mánh khóe với String
Strings là một đối tượng rất mạnh. Prototype.js tận dụng sức mạnh và nâng nó lên một tầm cao khác về chất lượng.
Thay thế Strings
Khi nghĩ đến thay thế chuỗi trong Javascript, thường thì đã có sẵn các phương thức như String.Replace. Mặc dù nó vẫn có thể hoạt động với biểu thức chính qui(regular expression) nhưng nó vẫn không linh hoạt bằng phương thức thay thế mới trong prototype.js
Hãy đến với phương thức String.gsub. Với phương thức này bạn không chỉ có thể tìm và thay thế 1 chuỗi cố định hay 1 biểu thức chính qui bạn còn có thể kiểm soát được nhiều hơn quá trình thay thế. Ví dụ: bạn có thể sử dụng 1 mẫu có sẵn để chỉ cho phương thức cách mà bạn muốn các kết quả tìm kiếm sẽ được biến đổi (thay vì chỉ là thay thế thông thường)
Ví dụ dưới đây sẽ tìm kiếm những từ chứa 't' và thay thế cả cụm theo sau 't' bằng 'tizzle'. Trong trường hợp ví dụ không rõ ràng, biểu thức chính qui mà chúng ta chọn sẽ sẽ có dạng khai báo thành nhóm : \w+ được để trong ngoặc. Chúng ta có thể lấy được giá trị của nhóm này bằng cách sử dụng #{1} trong chuỗi thay thế mẫu.
Trong ví dụ, chúng ta tiến hành bắt lấy những gì phía sau 't' và thêm vào 'tizzle'. Nếu chúng ta có nhiều nhóm trong biểu thức chính qui, chúng ta có thể lấy các giá trị như sau strong>#{2}, #{3}, ...
Không nên chỉ dừng tại đây. Những thay thế mà chúng ta vừa thực hiện không phải là mạnh mẽ lắm vì chúng ta chỉ giới hạn chúng ở dạng khớp mẫu (pattern matching) và thay thế. Sẽ là thế nào nếu chúng ta có thể thao tác trên các mẫu khớp với những phép logic tùy ý, và từ đó tạo ra những giá trị thay thế mong muốn? Chúng ta có thể làm được như vậy nếu chúng ta truyền 1 hàm dưới dạng tham số thứ 2 vào gsub. Hàm này sẽ nhận 1 mảng với chuỗi khớp (index 0) và bất cứ giá trị nhóm nào(index 1 đến N.)
Mẫu sẵn có của Strings
Khi số lượng mã Javascript tăng lên, đồng nghĩa với việc bạn sẽ thấy xung quanh mình sẽ là tập hợp các đối tượng có cùng 1 kiểu, và bạn cần phải sắp xếp nó theo một trật tự nhất định.
Trong ứng dụng của bạn, sẽ không phải là hiếm để bắt gặp những đoạn code chạy lặp lại qua danh sách các đối tượng, khởi tạo các chuỗi dựa trên đặc tính của đối tượng và trật tự nhất định của một số phần tử. Prototype.js có Template class, nhằm giúp bạn với những tình huống nêu trên.
Ví dụ dưới đây sẽ hướng dẫn cách để định dạng một danh sách các mục trong 1 giỏ hàng trong vài dòng HTML.
Để tham khảo đầy đủ hơn về danh sách các hàm liên quan đến chuỗi, xem String extensions
toc
Sử dụng lớp Ajax.Request
Nếu bạn không sử dụng bất cứ thư viện hỗ trợ nào, bạn có thể phải viết rất nhiều mã lệnh để tạo ra đối tượng XMLHttpRequest và phải theo dõi các tiến trình không đồng bộ (asynchronous) của nó. Sau đó thì tách ra những hồi đáp (response) và thi hành chúng. Và bạn có thể cho là mình may mắn nếu bạn không cần phải hỗ trợ nhiều hơn 1 loại trình duyệt.
Để hỗ trợ các hứng năng của AJAX, thư viện định nghĩa lớp Ajax.Request.
Cứ cho rằng bạn có một ứng dụng mà cần phải thông tin với máy chủ thông qua url http://yourserver/app/get_sales?empID=1234&year=1998, mà trả về một hồi đáp XML như sau :
Giao tiếp với máy chủ và nhận lại mã XML này thật là đơn giản khi dùng đối tượng Ajax.Request . Ví dụ sau sẽ cho thấy nó hoạt động thế nào.
Bạn có thể thấy được tham số thứ 2 được truyền cho phương thức khởi tạo (constructor) của đối tượng Ajax.Request hay không? Tham số {method: 'get', parameters: pars, onComplete: showResponse} thể hiện một đối tượng vô danh trong phần chú thích ngữ nghĩa (a.k.a. JSON). Điều này có nghĩa là chúng ta đang truyền 1 đối tượng có 1 thuộc tính là method chứa chuỗi 'get', và một thuộc tính khác là parameters chứa các chuỗi truy vấn của yêu cầu HTTP (HTTP request), và một onComplete thuộc tính/phương thức chứa hàm showResponse.
Có thể có thêm một số thuộc tính nữa mà bạn có thể định nghĩa trong đối tượng này, như asynchronous, có thể là true hoặc false và xác định nếu lời gọi của AJAX đến máy chủ sẽ được thực hiện không đồng bộ (giá trị mặc định là true.)
Tham số này định nghĩa một số tùy chọn cho lời gọi AJAX. Trong phần ví dụ, chúng ta đã gọi url trong phần tham số thứ 1 thông qua lệnh HTTP GET, truyền chuỗi truy vấn chứa trong biến pars, và đối tượng Ajax.Request sẽ gọi hàm showResponse khi nó kết thúc việc nhận phản hồi.
Như bạn có thể đã biết rằng XMLHttpRequest thông báo tiến trình trong suốt quá trình gọi HTTP. Tiến trình này có thể cung cấp 4 bậc khác nhau: Loading, Loaded, Interactive, hoặc Complete. You Bạn có thể làm cho đối tượng Ajax.Request gọi một hàm tùy ý trong bất cứ bậc nào, Complete là phần thông dụng nhất. Để xác định hàm cho đối tượng, đơn giản chỉ cần cung cấp thuộc tính/phương thức onXXXXX trong phần lựa chọn yêu cầu, như onComplete trong ví dụ của chúng ta. Hàm mà bạn truyền vào sẽ được gọi bởi đối tượng với 2 tham số, tham số thứ nhất là đối tượng XMLHttpRequest (a.k.a. XHR), tham số thứ hai sẽ là header của HTTP, phản hồi X-JSON (nếu có tồn tại). the second one will be the evaluated X-JSON response HTTP header (if one is present). Bạn có thể sử dụng XHR để lấy dữ liệu trả về và có thể kiểm tra xem thuộc tính status mà sẽ chứa các mã kết quả HTTP của lệnh gọi. X-JSON header rất hữu ích khi bạn muốn trả về một số mã lệnh nào đó hay dữ liệu dưới định dạng JSON.
Hai lựa chọn hấp dẫn khác có thể được dùng để xử lý các kết quả. Bạn có thể chỉ định lựa chọn onSuccess như một hàm có thể được gọi khi AJAX gọi thi hành mà không có lỗi xảy ra. , và ngược lại lựa chọn onFailure có thể là hàm để được gọi khi lỗi máy chủ xảy ra. Giống như là các hàm onXXXXX, 2 hàm này sẽ được gọi để truyền XHR , trong có có hàm gọi AJAX và X-JSON header.
Ví dụ của chúng ta không xử lý phản hồi XML với bất kì cách thức hấp dẫn nào cả. Chúng ta chỉ xuất XML ra vùng văn bản. Cách sử dụng tiêu biểu của phản hồi này có thể tìm những thông tin cần thiết bên trong XML và cập nhật một thành phần trang, hoặc có thể một số loại biến đổi XSLT để tạo ra mã HTML trong trang.
Trong phiên bản 1.5.0, một mẫu dùng để điều khiển các sự kiện gọi lại(event callback handling) được giới thiệu. Nếu bạn có mã lệnh mà phải luôn xử lý một sự kiện đặc biệt nào đấy, mặc cho hàn AJAX nào được gọi, bạn đều có thể sử dụng đối tượng mới này Ajax.Responders.
Cứ cho rằng bạn muốn thể hiện một số hiển thị bằng lời gọi AJAX khi nó đang trong tiến trình, ví dụ như xoay icon hay là một vài thứ khác. Bạn có thể sử dụng 2 phần điều khiển sự kiện toàn cục để giúp bạn. Một cái là để biểu diễn icon khi lời gọi đầu tiên bắt đầu và một cái khác sẽ dấu icon khi lời gọi kết thúc. Xem ví dụ dưới đây.
Loading...For more complete explanations, see the Ajax.Request reference and the options reference.
toc
Sử dụng lớp Ajax.Updater
Nếu bạn có một máy chủ đầu cuối có thể trả về thông tin dưới dạng HTML, thư viện sẽ làm mọi việc dễ dàng hơn cho bạn với lớp Ajax.Updater. Với lớp này bạn có thể xách định thành phần nào sẽ được nhận mã HTML trả về từ lời gọi AJAX. Ví dụ sau đây sẽ làm rõ hơn điều này.
Như bạn thấy, mã lệnh trông rất giống với ví dụ trước, trừ một ngoại lệ của hàm onComplete và id của thành phần được truyền cho phương thức khởi tạo. Hãy thay đổi mã lệnh một tí để xem nó có thể điều khiển được lỗi của máy chủ trên máy khách thế nào.
Chúng ta sẽ thêm vào một số tùy chọn nữa chọn lời gọi, để chỉ định một hàm để bắt lỗi. Điều này được thực hiện bằng cách sử dụng lựa chọn onFailure . Chúng ta cũng sẽ chỉ định placeholder chỉ được nhiều hơn khi thao tác thành công. Để đạt được điều này chúng ta phải phải thay đổi 1 tham số từ 1 id đơn giản của phần tử đến 1 đối tượng với 2 thuộc tính, success (được sử dụng khi tất cả đều thành công) và failure (được sử dụng khi có lỗi). Chúng ta sẽ không sử dụng thuộc tính failure trong ví dụ, chỉ có hàm reportError bên trong lựa chọn onFailure.
Nếu máy chủ của bạn trả về mã JavaScript cùng với mã HTML, đối tượng Ajax.Updater có thể định giá trị mã JavaScript đấy. Để lấy một tượng để nhận phản hồi dưới dạng mã JavaScript, bạn đơn giản chỉ thêm evalScripts: true; vào danh sách thuộc tính trong tham số cuối cùng của đối tượng khởi tạo. Nhưng ở đây có 1 lỗ hổng. Những khối mã này sẽ không được thêm vào mã của trang. Với tên tùy chọn evalScripts gợi ý rằng những mã này sẽ được định giá trị. Thế thì có khác biệt gì? Hãy giả định rằng URL được yêu cầu như sau :
Trừ trường hợp bạn đã thử nó trước, bạn biết nó sẽ không chạy. Lý do là khối mã lệnh sẽ bị định giá trị, và việc định giá trị của mã như trên sẽ không tạo ra một hàm nào mang tên sayHi. Nó sẽ chẳng làm gì cả. Để tạo hàm này chúng ta cần thay đổi mã lệnh để khởi tạo hàm. Xem bên dưới.
Ghi chú rằng trong ví dụ trước chúng ta không sử dụng từ khóa var để khai báo các biến. Làm như thế sẽ tạo ra một đối tượng hàm mang tính cục bộ đối với khối mã lệnh (ít nhất thì cũng trong IE). Không có từ khoá var đối tượng hàm sẽ có phạm vi hoạt động trong cửa sổ đó, và đó là điều chúng ta muốn.
Để có được giải thích rõ ràng hơn, hãy xem Ajax.Updater reference và options reference.
toc
"?" và □ là cái gì?
Khi bạn viết mẫu thử 1 vài script để cập nhật trang bằng cách sử dụng đối tượng Ajax.Updater, và nó hoạt động rất tốt. Nó vẫn tốt cho đến khi bạn chạy script của mình với dữ liệu thật đột nhiên trong các chuỗi cập nhật xuất hiện những dấu '?' và '□' hay những dấu hiệu lạ khác tại những chỗ không phải là tiếng Anh chuẩn.
Điều nghi ngờ đầu tiên của bạn là prototype.js. Nhưng khoang hãy đổ lỗi cho nó. Hãy hỏi xem là bạn đã thật sự hiểu về mã kí tự(character encoding), mã trang và cách mà trình duyệt xử lý nó hay chưa?
Sau đây tôi sẽ trình bày một cách rõ ràng về vấn đề này, và cho bạn một số gợi ý để bạn có thể bắt đầu chỉnh sửa cho phù hợp với yêu cầu của mình.
Đơn giản là hãy làm theo cách sau: hãy cho trình duyệt những gì mà nó muốn bạn cho nó. Ví dụ: nếu bạn cập nhật trang chứa các kí tự Unicode/UTF-8 thì hãy cho trình duyệt biết về điều ấy.
Hãy bắt đầu với 1 trường hợp đơn giản khi bạn cập nhật trang với văn bạn ở dạng HTML tĩnh nằm trên server. Khi tạo ra tập tin đó, tùy vào công cụ biên tập của bạn mà rất có thể tập tin sẽ được lưu ở dạng ANSI(non-Unicode). Điều này là mặc định ở 1 số công cụ biên tập, đặc biệt là các công cụ biên tập mã nguồn vì kích thước tập tin sẽ nhỏ hơn, và cũng rất hiếm để có kí tự Unicode trong mã nguồn.
Giả sử bạn có tập tin sau tên là static-content.html trên server. Bạn lưu nó dưới dạng ANSI.
Hi there, José. Yo no hablo español.
Trang của bạn sẽ cập nhật bằng việc sử dụng vài dòng mã sau đây.
(this will be replaced)
onclick="updateWithFile()" type="button"/>
Khi bạn nhấn nút, tập tin sẽ được gọi nhưng những kí tự không phải tiếng Anh sẽ được thay thế bằng dấu ? và những kí tự khác. Nó sẽ trông giống như "Hi there, Jos?. Yo no hablo espa?ol." hay "Hi there, Jos?Yo no hablo espa?", tùy vào trình duyệt của bạn.
Trong trường hợp này thì chỉ cần lưu tập tin lại với dạng phù hợp. Hãy lưu nó lại ở dạng UTF-8 và chạy lại. Bạn sẽ thấy rằng nó sẽ hiển thì đúng(bạn nhớ refresh lại trình duyệt để loại bỏ cache)
Nếu HTML mà bạn dùng không phải là dữ liệu tính, và nếu nó được tạo ra bởi một số framework (như ASP.NET, PHP, Ruby hay Perl,), hãy chắc chắn rằng mã tạo ra HTML phải ở dạng phù hợp bao gồm cả HTTP headers. Mỗi hệ cơ sở đều có cách riêng để giải quyết vấn đề này, nhưng đều tương tự nhau cả.
Ví dụ trong ASP.NET bạn có thể xác lập trong web.config
Trong ASP 3.0 bạn sử dụng dòng mã sau. Response.CodePage = 65001
Response.CharSet = "utf-8"
Trong PHP, cú pháp để thêm vào header trông như sau.
Trong trường hợp, mục đích cuối cùng của bạn là để có HTTP header sau gởi cùng với yêu cầu. Content-Type: text/html; charset=utf-8
Chúng ta sử dụng UTF-8 trong ví dụ phía trên, nhưng nếu bạn cần những thiết lập khác bạn có thể dễ dàng thay đổi.
Enumerating... Wow! Damn! Wahoo!
Chúng ta đã rất quen thuộc với vòng lặp. Bạn biết đấy, tạo ra một mảng, thêm vào nó các phần tử cùng type, tạo một cấu trúc lặp (for, foreach, while, repeat, ...), truy cập mỗi phần tử một cách tuần tự, bằng số chỉ vị trí của nó, sau đó thì thao tác gì đấy với các phần tử.
Khi bạn nghĩ về nó, hầu hết bạn đều có một mảng trong mã lệnh của bạn, có nghĩa rằng bạn sẽ sử dụng mảng đó trong 1 vòng lặp sớm hay muộn. Sẽ không tốt hơn sao nếu đối tượng mảng có nhiều chức năng hơn để thao tác với các vòng lặp này. Và đúng thế, nó sẽ hay hơn rất nhiều. Và nhiều ngôn ngữ lập trình cung cấp những chức năng như thế cho các mảng hoặc những cấu trúc tương tự (như là tập hợp, danh sách)
Và, ngỡ ra rằng prototype.js cho chúng ta đối tượng Enumerable, đối tượng này khởi tạo một loạt các mánh khóe giúp chúng ta thao tác với dữ liệu lặp. Thư viện prototype.js tiến xa hơn 1 bước nữa và mở rộng lớp Array với tất cả các phương thức của Enumerable.
toc
Vòng lặp, theo type của Ruby
Trong javascript chuẩn, nếu bạn muốn thể hiện tuần tự các phần tử của một mảng, bạn phải viết rất đầy đủ như sau.
Với người bạn mới, prototype.js, bạn có thể viết lại vòng lặp này như sau. function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
simpsons.each( function(familyMember){
alert(familyMember);
});
}
Bạn có thể nghĩ rằng "cần gì phải làm to chuyện, chỉ là nồi cũ vung mới thôi mà" Hãy khoan đã nào, ở ví dụ trên, đúng là chẳng có gì đặc biết cả. Sẽ chẳng có gì là thay đổi với một ví dụ đơn giản. Nhưng dù sao thì hãy cứ đọc tiếp đi nào.
Trước khi chúng ta tiếp tục, bạn có thấy là hàm này được truyền dưới dạng tham số cho phương thức each hay không? Hãy bắt đầu thay nó bằng một hàm lặp.
toc
Vài điều về mảng
Như chúng ta đã đề cập ở trên, việc tất cả các phần tử trong một mảng có cùng một type, cùng thuộc tính và phương thức là rất thông dụng. Hãy xem làm thế nào chúng ta có thể tận dụng ích lợi của các hàm lặp với các mảng mới này.
Tìm một phần tử phù hợp với tiêu chuẩn.
Bây giờ hãy thêm 1 mánh nữa nào. Xem làm sao chúng ta có thể lọc ra các phần tử trong các mảng, và chỉ lấy về 1 thành viên mong muốn của mỗi phần tử.
This text has
a lot of
links. Some are
external
and some are local
Cần phải luyện tập nhiều thì mới có thể hoàn toàn quen thuộc với cú pháp này được. Hãy xem qua Enumerable và Array để tham khảo toàn bộ các hàm.
toc
Tài liệu tra cứu cho prototype.js
Phần mở rộng cho các lớp JavaScript
Một trong số các cách mà thư viện prototype.js sử dụng để thêm các chức năng đó là mở rộng các lớp đã có sẵn của JavaScript.
toc
Phần mở rộng cho lớp Object
Phương thức
Loại
Các tham số
Mô tả
extend(destination, source)
static
destination: bất cứ đối tượng nào, source: bất cứ đối tượng nào
Cung cấp 1 cách để khởi tạp sự kế thừa bằng cách sao chép toàn bộ các thuộc tính và phương thức từ source đến destination.
inspect(targetObj)
static
targetObj: bất cứ đối tượng nào
Trả về một chuỗi dễ đọc biểu diễn cho targetObj. Nó mặc định là giá trị trả về của toString nếu đối tượng được gọi không định nghĩa phương thức inspect .
toc
Phần mở rộng cho lớp Number
Phương thức
Loại
Các tham số
Mô tả
toColorPart()
instance
(none)
Trả về con số dưới dạng thập lục phân. Hữu dụng khi muốn chuyển đổi thành phần màu RGB bên trong mã HTML.
succ()
instance
(none)
Trả về số kế tiếp. Hàm này được sử dụng trong hoàn cảnh liên quan đến vòng lặp.
times(iterator)
instance
iterator: đối tượng hàm phù hợp với Function(index)
Gọi lặp lại hàm iterator bằng cách truyền chỉ số hiện tại cho tham số index.
Ví dụ dưới đây sẽ hiển thị hộp cách báo từ 0 đến 9.
toc
Phần mở rộng cho lớp Function
Phương thức
Loại
Các tham số
Mô tả
bind(object)
instance
object: đối tượng sở hữu phương thức
Trả về một khởi tạo của hàm có liên kết với đối tượng hàm (phương thức)chủ. Hàm trả về sẽ có cùng các tham số như hàm gốc.
bindAsEventListener(object)
instance
object: đối tượng sở hữu phương thức
Trả về một khởi tạo của hàm có liên kết với đối tượng hàm (phương thức)chủ. Hàm trả về sẽ có đối tượng của sự kiện hiện tại là tham số của nó.
Hãy xem những phần mở rộng này trong thực tế. Test?
toc
Phần mở rộng cho lớp String
Phương thức
Loại
Các tham số
Mô tả
stripTags()
instance
(none)
Trả về một chuỗi mà không có thẻ HTML hay XML
stripScripts()
instance
(none)
Trả về chuỗi mà không có các khối
toc
Các lớp và đối tượng mới được định nghĩa bởi prototype.js
Thư viện hỗ trợ bạn bằng cách cung cấp nhiều đối tượng được khởi tạo để hỗ trợ cho thiết kế hướng đối tượng và hỗ trợ các chức năng tổng quát.
toc
Đối tượng PeriodicalExecuter
Đối tượng này cung cấp phép logic để gọi nhiều lần 1 hàm, với số lượng thời gian được cho.
Phương thức
Loại
Các tham số
Mô tả
[ctor](callback, interval)
constructor
callback: hàm không có tham số, interval:số giây
Tạo một khởi tạo của đối tượng mà gọi lặp lại hàm.
Thuộc tính
Loại
Mô tả
callback
Function()
Hàm sẽ được gọi. Không có tham số nào sẽ được truyền vào.
frequency
Number
Khoảng thời gian (giây)
currentlyExecuting
Boolean
Xác định xem nếu hàm đang được gọi
toc
Đối tượng Prototype
Đối tượng Prototype không có vai trò quan trọng gì ngoài việc khai báo phiên bản của thư viện đang sử dụng.
Thuộc tính
Loại
Mô tả
Version
String
Phiên bản của thư viện
emptyFunction
Function()
Một đối tượng hàm rỗng
K
Function(obj)
Một đối tượng hàm trả về tham số được cho.
ScriptFragment
String
Biểu thức chính qui dùng để xác định mã lệnh
toc
Đối tượng Enumerable
Đối tượng Enumerable cho phép viết mã gọn gàng hơn khi phải lặp lại nhiều phần tử trong cấu trúc tương tự như danh sách.
Có rất nhiều đối tượng thừa kế đối tượng Enumerable để sử dụng hiệu quả hơn giao diện(interface) của nó.
Phương thức
Loại
Các tham số
Mô tả
each(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi lặp lại hàm được cho, truyền mỗi phần tử trong danh sách vào tham số thứ 1, và vị trí của phần tử vào tham số thứ 2.
all([iterator])
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Hàm này dùng để kiểm tra toàn bộ các giá trị bằng cách sử dụng hàm được truyền. all sẽ trả về false nếu hàm lặp trả về false hoặc null cho bất cử phần tử nào. Ngược lại, nó sẽ trả về true. Nếu không có iterator nào được truyền vào, thì sự kiểm tra này sẽ tốt nếu bản thân phần tử là khác false hoặc null. Bạn có thể hiểu đơn giản như sau "kiểm tra tất cả các phần tử mà không phải là false."
any(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)(tùy chọn).
Hàm này dùng để kiểm tra toàn bộ các giá trị bằng cách sử dụng hàm được truyền. any trả về true nếu hàm lặp không trả về false hoặc null cho bất cứ phần tử nào. Ngược lại, nó sẽ trả về false . Nếu không có iterator nào được truyền vào, thì sự kiểm tra này sẽ tốt nếu bản thân phần tử là khác false hoặc null.Bạn có thể hiểu đơn giản như sau "kiểm tra bất cứ phần tử mà không phải là false."
collect(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử bên trong tập hợp và trả về mỗi kết quả trong một Array, một kết quả cho mỗi phần tử bên trong tập hợp theo cách tuần tự.
detect(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử trong tập hợp và trả về phần tử đầu tiên khiến cho hàm lặp trả về giá trị true (hoặc không false). Nếu không có phần tử nào trả về giá trị true thì detect trả về null.
entries()
instance
(none)
Giống như toArray().
find(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Giống như detect().
findAll(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử trong tập hợp và trả về một Array với tất cả các phần tử mà làm cho hàm lặp trả về giá trị true. Hàm này ngược lại với hàm reject().
grep(pattern [, iterator])
instance
pattern: một đối tượng RegExp dùng để so sánh các phần tử, iterator: một đối tượng hàm có dạng Function(value, index)
Kiểm tra giá trị chuỗi của mỗi phần tử trong tập hợp với pattern của biểu thức chính qui (regular expression). Hàm này sẽ trả về một Array chứa toàn bộ các phần tử phù hợp với biểu thức chính qui. Nếu hàm lặp được truyền thì Array sẽ chứa kết quả của lời gọi từ hàm lặp này tương ứng với mỗi phần tử.
include(obj)
instance
obj: bất cứ đối tượng nào
Cố gắng tìm đối tượng được cho trong tập hợp. Trả về true nếu đối tượng được tìm thấy, false nếu ngược lại.
inject(initialValue, iterator)
instance
initialValue: bất cứ đối tượng nào được dùng như giá trị khởi đầu, iterator: một đối tượng hàm có dạng Function(accumulator, value, index)
Kết hợp tất cả các phần tử trong tập hợp bằng cách sử dụng hàm lặp. Bộ lặp (iterator) sẽ được gọi để truyền kết quả của vòng lặp trước vào bộ đếm (accumulator). Vòng lặp đầu tiên lấy initialValue trong tham số bộ đếm . Kết quả cuối cùng là cái cuối cùng trả về giá trị.
invoke(methodName [, arg1 [, arg2 [...]]])
instance
methodName: tên của phương thức sẽ được gọi bởi mỗi phần tử, arg1..argN: các tham số sẽ được truyền vào phương thức.
Gọi các phương thức được xác định bởi Phương thứcName đối với mỗi phần tử của tập hợp , truyền các tham số đã cho (arg1 ... argN), và trả kết quả về trong đối tượng Array.
map(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Giống như collect().
max([iterator])
instance
iterator:một đối tượng hàm có dạng Function(value, index)(tùy chọn)
Trả về phần tử có có giá trị lớn nhất trong tập hợp hoặc kết quả lớn hoặc kết quả lớn nhất có được từ lời gọi các hàm lặp đối với mỗi phần tử nếu hàm lặp được chỉ định.
member(obj)
instance
obj: bất cứ đối tượng nào
Giống như include().
min([iterator])
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Không có nhận xét nào:
Đăng nhận xét