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

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:

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

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?: 
Average: 10 (1 vote)
Ảnh của Tommy Tran

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

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Kindle Fire bị phàn nàn lỗi Wi-Fi

Kindle Fire bị phàn nàn lỗi Wi-Fi

Cnet dẫn thông tin từ trang công nghệ Electronista cho biết, người dùng Kindle Fire nhận thấy khả năng bắt sóng Wi-Fi của chiếc máy tính bảng này khá yếu.

Hướng dẫn tăng tốc độ xây dựng Gatsby trong xử lý hình ảnh của Drupal

Hướng dẫn tăng tốc độ xây dựng Gatsby trong xử lý hình ảnh của Drupal

Drupal Backender Learns Gatsby: Speed up Gatsby Builds With Drupal Image Processing

Dân mạng lên cơn sốt với “Sát thủ - Chết bất hủ”

Dân mạng lên cơn sốt với “Sát thủ - Chết bất hủ”

Trò vui mới đang gây xôn xao cộng đồng Facebook Việt này.

Công ty diệt chuột T&C

 

Diet con trung