Cách xây dựng một Plugin cho jQuery

0
189

[ VIDEO TUT ]

  • Đang cập nhật…

1. Giới thiệu

Plugin jQuery chính là việc chúng ta xây dựng sẵn một chức năng, một hiệu ứng nào đó và được tính toán theo những tham số chung chung.

Ưu điểm tuyệt vời của việc viết Plugin đó là chúng ta có thể tận dụng nó cho những bài toán khác nhau mà không cần phải viết đi viết lại nhiều lần, chỉ cần truyền những tham số khác nhau là chúng ta đã có được những chức năng, hiệu ứng khác nhau cho từng trường hợp cụ thể.

Trong bài hướng dẫn về cách xây dựng một Plugin cho jQuery ngày hôm nay thì tôi sẽ hướng dẫn các bạn từ ABC đến XYZ hiểu và xây dựng một Plugin đơn giản cho jQuery nhé.

2. Cú pháp tạo một Plugin cơ bản

hoặc

Trong đó

  • $ hay jQuery chính là đối tượng jQuery mà chúng ta đang sư dụng (phải viết giống hệt nhé)
  • test: là tên hàm và đặt tên tùy ý

Để chạy code trên các bạn chỉ việc gõ như sau:

Và kết quả hiển thị trên trình duyệt web sẽ như sau

1

Chú ý: Các bạn nhớ triệu gọi thư viện jquery cũng như khởi tạo vùng làm việc với jquery nhé.

3. Biến thể Plugin

Trong thực tế thì cách viêt Plugin như trên không được sử dụng, vì có thể từ khóa $ bị trùng với một số Javascript Framework khác, dẫn tới xung đột code (hay còn gọi là conflict).

Để tránh trường hợp này, chúng ta sẽ biến đổi cách viết cơ bản ở trên theo một cách viết mới bằng cách sử dụng kỹ thuật IIFE của Javascript để biến $ thành một định danh của đối tượng jQuery như sau

Trong đó

  • jQuery: đối tượng jquery (bắt buộc phải viết giống hệt)
  • $: nó giống như một biến cục bộ, một định danh của đối tượng jQuery

Để chạy code trên các bạn cũng vẫn làm tương tự như cách viết Plugin ban đầu

Và kết quả hiển thị trên trình duyệt web sẽ như sau:

2

4. Plugin có tham số truyền vào

Với Plugin như cách viết ở trên thì các bạn thấy, nó không được linh hoạt, vì các giá trị đều được fix cứng. Trong trường hợp tôi muốn hiển thị một câu thông báo khác thì chắc chắn rằng chúng ta sẽ lại phải vào Plugin và sử lại nội dung thông báo, như vậy thì quá bất tiện.

Để gải quyết vấn đề này chúng ta chỉ cần truyền tham số vào khi sử dụng Plugin và đương nhiên khi xây dựng Plugin thì chúng ta cũng cần phải lưu ý khai báo tham số để nhận giá trị truyền vào

Các bạn cập nhật lại nội dung code xây dựng Plugin

Và cập nhật lại code sử dụng Plugin

Và kết quả hiển thị trên trình duyệt web sẽ như sau:

3

5. Plugin có tham số dạng đối tượng

Ngoài việc các bạn có thể truyền nhiều tham số vào Plugin (mỗi tham số phân cách nhau bởi dấu phẩy) thì các bạn cũng có thể truyển tham số dạng đối tượng

Các bạn cập nhật lại nội dung code xây dựng Plugin

Và cập nhật lại code sử dụng Plugin

Và kết quả hiển thị trên trình duyệt web sẽ như sau:

3

6. Plugin có tham số mặc định

Trong trường hợp nếu như người sử dụng Plugin không truyền tham số vào thì chúng ta cũng có thể sử dụng dữ liệu mặc định thay cho dữ liệu không được truyền vào cho tham số

Các bạn cập nhật lại nội dung code xây dựng Plugin

Và cập nhật lại code sử dụng Plugin

Và kết quả hiển thị trên trình duyệt web sẽ như sau:

4

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Thầy Giáo Quốc Dân: Tuấn Hoàng

[Total: 1    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here