Javascript – Cơ chế hoạt động của jQuery

jQuery_logoGiới thiệu cách thức hoạt động của jQuery và phương pháp để tạo ra một thư viện tương tự. Trước khi đọc bài này, bạn cần có các kiến thức về lập trình hướng đối tượng (OOP) trong javascript và các kiến thức căn bản về jQuery.

Đối tượng ‘jQuery’ và ‘$’

Javascript là một ngôn ngữ hướng đối tượng (OOP), tuy nhiên thay vì phải tạo ra các class, mỗi function trong javascript được coi là một class và bạn có thể tạo ra đối tượng từ các function. Điều này tương tự như con trỏ hàm trong C/C++ hay delegate trong .NET, bạn có thể truyền các function vào làm tham số của các function khác và gán cho các biến.

Javascript cho phép đặt tên bắt đầu bằng các chữ cái, hai kí tự đặc biệt là $, _ và các kí tự unicode. Như vậy, bạn có thể tạo một vài đối tượng javascript từ function như sau:

var $$ = y2Query = function(selector) {
    // do something
}

Hai đối tượng trên tương tự như ‘$’ và ‘jQuery’ được sử dụng trong jQuery.

Tạo một “class” Query

jQuery sử dụng cú pháp $(selector) để trả về một wrapper của các thành phần trong tài liệu HTML. Đối tượng wrapper này cung cấp các phương thức dùng để thao tác với các thành phần HTML bên trong nó như text(), html(), hide(), show(),…

Vậy thì theo cách đó, ta cũng sẽ tạo một class/function wrapper tương tự, tôi đặt tên là QueryObj. Function này nhận vào một tham số là selector, vì đây chỉ là ví dụ nên tôi chỉ dừng ở phạm vi selector là id của của thẻ HTML. Để nhận biết, các id sẽ bắt đầu là một kí tự ‘#’ như trong  jQuery.

Tôi sử dụng phương thức document.getElementById() để lấy về thẻ HTML tương ứng và lưu vào trong thuộc tính element (không cần khai báo) của QueryObj.

function QueryObj(selector) {
	if(selector.substr(0,1)=="#")
	{
		this.element = document.getElementById(selector.substr(1));
	}
	// else ...
	return this;
}

Tôi sẽ tạo ra thêm một phương thức cho QueryObj là html(). Phương thức này dùng để trả về hoặc gán nội dung HTML của một thành phần trong tài liệu:

QueryObj.prototype = {
	html: function(value){
		if(value==undefined)
		{
			return this.element.innerHTML;
		}else
		{
			this.element.innerHTML=value;
			return this;
		}
	}
	// …
};

Chaining trong jQuery

Bạn cần chú ý đến câu lệnh return this trong các phương thức của QueryObj. Nếu không có nó, các phương thức của đối tượng QueryObj này sẽ không trả về một đối tượng hợp lệ để bạn có thể tiếp tục gọi các phương thức liên tiếp nhau trong một dòng lệnh. Bản thân  jQuery, đa số các phương thức đều trả về một đối tượng query. Khái niệm này được gọi là chaining:

// without chaining
$("#abc").fadeIn();
$("#abc").addClass("header");
$("#abc").css("width", "200px");

// vs. chaining
$("#abc").fadeIn()
   .addClass("header")
   .css("width", "200px");

Ví dụ hoàn chỉnh

Vậy là đã xong, bây giờ tôi sẽ tạo ra các đối tượng y2Query để sử dụng:

var $$ = y2Query = function(selector) {
	return new QueryObj(selector);
};

Minh họa:

Simple jQuery-like library
Mã nguồn hoàn chỉnh của trang .html:

<html>
<head>
<title>Inside jQuery</title>
<script>
var $$ = y2Query = function(selector) {
	return new QueryObj(selector);
};

function QueryObj(selector) {
	if(selector.substr(0,1)=="#")
	{
		this.element = document.getElementById(selector.substr(1));
	}
	// else ...
	return this;
}

// API methods
QueryObj.prototype = {
	html: function(value){
		if(value==undefined)
		{
			return this.element.innerHTML;
		}else
		{
			this.element.innerHTML=value;
			return this;
		}
	}
};

window.onload=function()
{
	alert($$('#div1').html()); // output: Welcome to YinYang's Blog
};
</script>
</head>
<body>

<div id="div1">Welcome to YinYang's Blog</div>

<button onclick="$$('#div1').html('Good bye!')">Click Me!</button>

</body>
</html>

YinYang’s Programming Blog

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s