Các bước cơ bản để tạo plugin bằng jQuery Chúng ta gần như không thể hiểu được jQuery nếu không nắm rõ CSS Selectors: Trong jQuery thì phần mã CSS selector được bắt đầu bởi đối tượng jQ
Trang 1Các bước cơ bản để tạo plugin bằng jQuery
Chúng ta gần như không thể hiểu được jQuery nếu không nắm rõ CSS Selectors:
Trong jQuery thì phần mã CSS selector được bắt đầu bởi đối tượng jQuery
$ chính, đây chỉ là tên củafunction, và nó có đi kèm với tham số – chính là CSS Selector của chúng ta Và về bản chất thì Selector hoạt động tương tự như
các CSS selector thường gặp trong các file style.css Nhiều người chỉ biết đến ID
selector (#) và class selector (.) nhưng chúng chỉ là những đối tượng nhất định
thuộc về bộ Selectors:
Nếu bạn có thể hiểu được các chi tiết trong biểu đồ trên thì những phần còn lại
của jQuery cũng không có gì khó khăn để nắm bắt Và một khi đã biết được
những nguyên tắc cơ bản nhất của quy trình viết plugin jQuery thì hầu như không
có ai muốn quay trở về với Javascript Dưới đây là một số câu hỏi thường gặp khi
chúng ta bắt tay vào quá trình viết plugin jQuery:
CSS Selectors là gì?
Sự khác biệt khi sử dụng $.myfunction và $.fn.myfunction là gì?
Ký hiệu $ nghĩa là gì?
Chức năng chính và cách sử dụng của function jQuery.extend?
Làm thế nào để khởi tạo plugin jQuery và chuyển tới tham số chức năng?
Làm thế nào để truyền giá trị default và khởi tạo tham số override?
Đối tượng trong JavaScript:
Trang 2Như tất cả chúng ta đã biết rằng, JavaScript là 1 ngôn ngữ lập trình hướng đối tượng, và nó không phù hợp để mô tả hoặc trình diễn những tính năng của jQuery với những người nào đó chưa từng nghiên cứu về khái niệm đối tượng trong JavaScript Đặc điểm cơ bản về thiết kế đối tượng trong JavaScript là khi người sử dụng khai báo hoặc khởi tạo 1 function, thì function đó sẽ là 1 class ở chế độ mặc định, và sau đó sẽ được dùng như 1 đối tượng
Bên cạnh đó, chúng ta có thể sử dụng toán tử new để tạo bản copy của cùng class
Và nó chỉ xảy ra khi người dùng thay thế bằng từ khóa class quen thuộc, JavaScript sẽ ưu tiên từ khóa function hơn Lưu ý rằng class trong JavaScript có
thể được sử dụng dưới dạng 1 class đã được kế thừa – inhertited từ class khác (bằng cách thực hiện các prototype inheritance) hoặc được xây dựng chính xác
như 1 function từ trong mã nguồn Nói theo cách ngắn gọn thì trong JavaScript, tất
cả đều là đối tượng
Mặt khác, function closures thường được sử dụng với các event trong jQuery
1 function closure điển hình chính là 1 loại function không có tùy biến hoặc tên
bất kỳ, mà đơn giản chỉ là 1 đối tượng của function đó
Các đối tượng chính trong jQuery:
Về mặt bản chất, thì các đối tượng chính của jQuery đều được định nghĩa với từ khóa function như 1 đối tượng với tên định danh là $, và chúng còn tương đương
với global function, chẳng hạn như window.$ Ví dụ, trongJavaScript khi chúng
ta mở rộng một đối tượng window nào đó (phải có sẵn trong trình duyệt từ khâu
thiết kế), hoặc nói theo cách khác là gán thêm function member với (.) tới đối tượng window, và cũng có nghĩa rằng chúng ta có thể gọi đối tượng đó bằng window.myobj(); hoặc đơn giản là myobj(); Bởi vì với mỗi function được gắn với object window đều có thể được gọi từ global scope trong toàn bộ script
Còn từ bên trong, các đối tượng của jQuery sẽ được tạo như sau:
Trang 3var jQuery = window.jQuery = window.$ = function(selector, context) {
// other internal initialization code goes here };
Thuật toán khai báo chính xác này cho phép người dùng dễ dàng chuyển đến các đối tượng jQuery chính qua tên jQuery hoặc ký hiệu $ Các bạn cần biết
rằng jQuery, window.jQuery, window.$ hoặc đơn giản chỉ là $ đều có thể được
sử dụng thay thế cho nhau, bởi vì quá trình khai báo ở phần đầu của bộ mã, và nó
có liên quan đến toàn bộ đối tượng
1 điểm nữa cần lưu ý là tham số selector và context của jQuery có chức năng hoạt
động như 1 object bình thường Selector thường là chuỗi – string có chức năng lựa chọn 1 số lượng nhất định các element từ DOM –Document Object Model Hoặc cũng có thể là đối tượng this (self reference) Tham số jQuery selector có
thể chấp nhận nhiều giá trị giống nhau trong trường hợp người dùng muốn sử
dụng trong quá trình khởi tạo style của CSS Ví dụ, các bạn hãy tham khảo quá trình gọi đối tượng trong jQuery như sau:
// Select all elements of class: "someClass" and
jQuery(".someClass").css("border", "1px solid red");
// Select an element with id: someId and insert dynamic html into it jQuery("#someId").html("<b>So Bold!</b>");
$("#someId").html("<b>So Bold!</b>");
Trang 4Rất ngắn gọn và đơn giản, các bạn không còn phải tự
viết function document.getElementById vốn rất dễ gây nhầm lẫn Chỉ với 1 dòng
lệnh, jQuery sẽ chọn tất cả các thành phần theo yêu cầu bằng các rà soát toàn
bộDOM và áp dụng “hiệu lực” Một điểm rất đáng chú ý nữa của jQuery là chế độ
tương thích với tất cả các trình duyệt hiện nay