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

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Tommy Tran
Tue, 18/12/2012, 16:13 (GMT+7)
0 Bình luận

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

Giớ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:

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

Bạn thấy bài viết này như thế nào?:

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies