Khóa học Javascript - Bài 2: Giới thiệu về Prototype

Prototype
Trang chủ http://www.prototypejs.org/

Là một Javascript framework mạnh mẽ, lâu đời. Điểm mạnh của Prototype là tập thư viện hướng đối tượng dùng để xử lý dữ liệu rất phong phú. Đi kèm theo đó có một add-on nổi tiếng là http://script.aculo.us/ trang bị cho Prototype khả năng tạo hiệu ứng phong phú.


Prototype có cấu trúc hướng đối tượng rất tốt, nó trang bị những phương thức xử lý cho những đối tượng cơ sở của Javascript: Array, String, Object, Date...

Một số điểm nổi bật

Duyệt mảng

var array = new Array(1, 2, 3, 4, 5);
array.each(function (item) {
    alert(item);
}); // thay vì phải dùng for(var i = 0; i < array.length; i++) alert(array[i]);

Tìm những mục không trùng lắp của mảng

var array = new Array(1, 2, 3, 3, 4, 4, 5);
var uniqueItems = array.uniq(); // Đơn giản gọn nhẹ, đỡ phải viết hàng tá dòng mã thuật toán kiểm tra
alert(uniqueItems);

Loại bỏ những thẻ HTML trong chuỗi

alert("<b>This is bold text</b>".stripTags());

Chuyển chữ đầu mỗi từ thành hoa

alert('hello world'.capitalize());

Thay thế nội dung theo mẫu

var myTemplate = new Template('The TV show #{title} was created by #{author}.');
var myData = {
    title: 'The Simpsons',
    author: 'Matt Groening',
    network: 'FOX'
};
alert(myTemplate.evaluate(myData));

Và còn nhiều, nhiều những phương thức trang bị cho những đối tượng khác. Tất nhiên Prototype không chỉ thực hiện việc xử lý dữ liệu, đối tượng, Prototype còn có những tập phương thức dùng để tương tác với những thẻ HTML như:

Lấy thông tin một thẻ

var myTag = $('tag-id'); // thay thế bởi document.getElementById('tag-id');

Ẩn một thẻ

$('tag-id').hide();

Theo dõi sự thay đổi một thẻ

<script src="http://linq2js.byethost5.com/blog/prototype.js" type="text/javascript"></script>
Nhập giá trị <input type="text" size="20" id="my-input-tag"/>
<script type="text/javascript">
    var observer = new Form.Element.Observer(
    'my-input-tag', // tag id
    0.2,  // Tính bằng giây, 0.2 second ~ 200 millseconds
    function (el, value) {
        alert('Bạn đã thay đổi giá trị, giá trị mới là: ' + value)
    });
</script>

Và tất nhiên không thiếu phần Ajax
Bạn có thể sử dụng câu lệnh truy vấn ajax đến máy chủ thật đơn giản với

new Ajax.Request(location.href, {
    onSuccess: function (response) {
        alert("Đây là nội dung lấy từ server: " + response.responseText);
    }
});

Bạn cũng có thể tham khảo tại http://api.prototypejs.org/ để biết thêm thông tin những phương thức, tham số và ví dụ sử dụng.

Bài sau: "Ăn kèm" script.aculo.us với Prototype