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.
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.
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.
functionQueryObj(selector) {if(selector.substr(0,1)=="#"){this.element = document.getElementById(selector.substr(1));}// else ...returnthis;}
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){returnthis.element.innerHTML;}else{this.element.innerHTML=value;returnthis;}}// …};
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ậ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) {returnnewQueryObj(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 methodsQueryObj.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><divid="div1">Welcome to YinYang's Blog</div><buttononclick="$$('#div1').html('Good bye!')">Click Me!</button></body></html>
YinYang’s Programming Blog
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
Không gian áp mái hiện nay không còn bị xem như là một nơi chuyên chứa đồ cũ, một nơi không ai thèm nhòm ngó tới... bởi không gian này đã được chăm chút và đưa vào sử dụng trong hầu hết các căn nhà hiện đại.
Content editors can help make the web a more accessible place, one published moment at a time.
Tiêu đề luôn là phần quan trọng nhất của một bài viết hấp dẫn. Một tiêu đề tuyệt với khiến người đọc không
