Giới thiệu jQuery trong Drupal

Đầu tiên ta cần biết là Drupal đã quyết định không viết riêng cho mình một bộ framework javascript nữa (không như PHP và CSS họ viết riêng cho mình một bộ framework) mà họ sử dụng một bộ thư viện javascript rất nổi tiếng đó là jQuery từ bản Drupal 5. Chi tiết hơn về việc tại sao nhóm phát triển Drupal quyết định sử dụng jQuery mà không sử dụng các thư viện khác như là mootools, foo, dojo, prototype (Lúc đó prototype và mootools có ưu thế hơn hẳn so với jQuery) có thể đọc thêm tại 2 bài viết sau:

• History of jQuery in Drupal
• What JavaScript library should we use? (Regardless of licencing issues)

Drupal Javascript API

Lưu ý: Những gì được viết ở đây là dành cho bản Drupal hiện đang được sử dụng rộng rãi là Drupal 5 và 6 (Từ khi Drupal bắt đầu sử dụng jQuery làm library). Có những thay đổi đối với bản Drupal 7 sắp phát hành và sẽ được cập nhật chi tiết.

Đối tượng quan trọng nhất mà Drupal tạo ra đó là Drupal (Xem trong file drupal.js) với một số properties(thuộc tính) mà ta có thể sử dụng như là Drupal.behaviors, Drupal.settings...
Dòng đầu tiên của file drupal.js là dòng khởi tạo đối tượng Drupal:

var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'themes': {}, 'locale': {} };

Ý nghĩa của dòng này là đối tượng Drupal sẽ sử dụng lại chính nó khi nó có tồn tại, nếu như đối tượng Drupal chưa tồn tại thì khởi tạo một đối tượng mới là một đối tượng gồm 4 thuộc tính: settings, behaviors, themes, và locale với mỗi thuộc tính cũng là một đối tượng. Đây là một dòng viết tắt để khai báo một đối tượng. (Có thể xem thêm tại blog của Sang để biết thêm về các cách tạo đối tượng: Using Object from Javascript hoặc chuyên sâu về kỹ thuật hơn ở trang Mozilla: Object Initializers. Đối tượng Drupal này có thể được dùng lại hoặc thừa kế từ các module khác. Dưới đây sẽ nói chi tiết từng đối tượng của Drupal

Drupal.settings

Drupal.settings cho phép chúng ta đưa những thông tin từ PHP vào cho Javascript. Điều này có nghĩa là chúng ta có thể giúp cho Javascript của chúng ta hiểu linh hoạt hơn về những cấu hình mà không phải thay đổi code. Ví dụ chúng ta muốn cho Javascript hiểu cái URL hiện tại đang chạy Drupal thì từ PHP chúng ta tạo ra một mảng như sau:

<?php
$my_settings = array(
'basepath' => $base_path,
'animation_effect' => variable_get('effect', 'none')
);
?>

Sau đó gọi hàm drupal_add_js, với tham số thứ 2 có giá trị là "setting":

<?php
drupal_add_js(array('my_module' => $my_settings), "setting");
?>

Lưu ý là để tránh bị conflict(xung đột) với các settings của các module khác, Drupal tạo ra các biến này theo namespace. Từ giờ bạn có thể sử dụng các thông tin mà vừa cấu hình ở trên trong Javascript bằng các biến sau:

var basepath = Drupal.settings.my_module.basepath;
var effect = Drupal.settings.my_module.animation_effect;

Lưu ý: Drupal.settings có sự thay đổi ở Drupal 7. Những gì nói ở trên đây chỉ đúng với bản Drupal 5 và Drupal 6.

Drupal.behaviors

Khi sử dụng jQuery chúng ta đã quen với việc đặt các dòng code của chúng ta kiểu như thế này:

$(document).ready(function(){
// ....
});

Điều này giúp cho code của chúng ta không bị lỗi vì những đoạn mã của chúng ta sẽ chỉ được thực thi sau khi DOM đã được tạo hoàn toàn, các thao tác chỉnh sửa, lắng nghe các sự kiện trên element sẽ không bị lỗi. Từ bản Drupal 6 chúng ta không cần sử dụng $(document).ready() nữa mà chỉ việc thêm vào một hàm cho đối tượng Drupal.behaviors. Khi chúng ta cần thao tác gì đó trên cây DOM bằng Javascript thì code của chúng ta nên như sau:

Drupal.behaviors.myModuleBehavior = function (context) {
//do some fancy stuff
};

Tất cả các hàm được định nghĩa là một properties (thuộc tính) của Drupal.behaviors sẽ được thực thi sau khi DOM được tạo xong. Lý do chúng ta nên sử dụng cách này là vì các thay đổi trên cây DOM sẽ được Drupal.behaviors quản lý. Ví dụ module của chúng ta sẽ gọi AJAX và kết quả trả về sẽ được bổ sung thêm vào cây DOM, khi chúng ta muốn tạo thêm các sự kiện trên cây DOM mới này (như là ẩn các h3 element) thì chúng ta phải viết code thêm cho hàm gọi AJAX. Với việc làm như trên chúng ta chỉ việc gọi lại Drupal.behaviors.myModuleBehavior(newcontext) với newcontext là những gì chúng ta nhận được từ AJAX. Điều này giúp cho các element có sẵn trên cây DOM không bị gán sự kiện một lần nữa.
Lưu ý: Bản Drupal 7 cũng đã có cách giải quyết việc này mà chúng ta không cần phải viết lại các hàm gán sự kiện cho các element mới được tạo nữa.

Drupal.theme

Drupal.theme() định nghĩa ra một cách tương tác và tạo theme ở phía client-side giống với hàm theme() chạy ở phía server-side. Hàm này có nội dung như sau:

Drupal.theme = function(func) {
for (var i = 1, args = []; i < arguments.length; i++) {
args.push(arguments[i]);
}
return (Drupal.theme[func] || Drupal.theme.prototype[func]).apply(this, args);
};

Có nghĩa là, khi ta sử dụng hàm Drupal.theme() ta cần đặt hàm tạo theme của chúng ta ở tham số đầu tiên, các tham số tiếp theo sẽ được truyền qua cho hàm tạo theme mà chúng ta nhập vào. Hàm tạo theme của chúng ta nên là một properties của Drupal.theme. Ví dụ cho dễ hiểu:

Drupal.theme.prototype.myThemeFunction = function (left, top, width) {
var myDiv = '

';
myDiv +=

';
return myDiv;
};

Như vậy từ trong Javascript khi cần sử dụng chúng ta gọi bằng cách này:

Drupal.theme('myThemeFunction', 50, 100, 500);


Drupal.locale

Drupal.locale chứa dữ liệu của hàm Drupal.t (Các dữ liệu sẽ được đồng bộ từ phía server-side tới client). Có nghĩa là khi thực thi hàm này bằng Javascript hoàn toàn tương đương với khi ta sử dụng hàm t() ở phía server-side. Đối tượng này tập hợp những chuỗi đã được dịch mà hàm Drupal.t có thể truy cập và trả về kết quả. Ví dụ chúng ta đã dịch đoạn sau: "Hello world" thành "Xin chào", ở PHP thì chúng ta sử dụng bằng cách:

<?php
t('Hello world');
;>

thì tùy vào ngôn ngữ của người truy cập mà sẽ hiện ra Hello world hay là Xin chào. Điều này hoàn toàn tương tự khi ta sử dụng bằng Javascript:

Drupal.t('Hello world');