Một số lưu ý khi phát triển các ứng dụng viết bằng javascript cho Drupal:
Tabs và khoảng trắng
Không dùng ký tự tabs, thay thế 1 tabs bằng 2 dấu khoảng trắng. Đa số các IDE hổ trợ việc này.
Netbean: Vào Tools -> Options -> Editor -> Formatting: Chọn vào phần Expand Tabs to Spaces và phần Tab Size chỉnh từ 4 xuống còn 2.
Eclipse: Vào Window -> Preferences (Eclipse -> Preferences cho Mac) sau đó ở bên tay trái:
Vào: General -> Editors -> Text Editors chọn vào Insert spaces for tabs, thay đổi Indentation size từ 4 thành 2
Các phép toán với chuỗi
Luôn dùng dấu khoảng trắng ngăn cách các biểu thức được nối với nhau bằng toán tử + để tăng tính dễ đọc (readability)
var string = 'Foo' + bar;
string = bar + 'foo';
string = bar() + 'foo';
string = 'foo' + 'bar';
Tương tự cho trường hợp sử dụng +=
var string += 'Foo';
string += bar;
string += baz();
Quy ước đặt tên
Khi phát triển cho Drupal thì quy ước đặt tên là sử dụng lowerCamelCased. Có nghĩa là từ đầu tiên của tên biến, tên hàm, tên đối tượng hay tên class... phải bắt đầu bằng một chữ cái (a-z) in thường và ứng với mỗi chữ cái đầu tiên của từ tiếp theo phải được in hoa. Không được dùng dấu gạch nối - hoặc gạch dưới _ giữa các từ
// Đúng
var myFunction = function () {
}
// Sai
var MyFunction = function () {
}
// Sai
var my-Function = function () {
}
Sử dụng dấu chấm phẩy
Javascript cho phép không cần sử dụng các ký tự ngăn cách hàm, biểu thức... tuy nhiên để tiện cho việc debug cũng như các thao tác liên quan thì Drupal quy ước chúng ta phải sử dụng dấu ; khi đóng hàm, khi sử dụng các toàn tử ngoại trừ các toán tử sau:for, function, if, switch, try, while
Ví dụ:
Drupal.behaviors.tableSelect = function (context) {
// Statements...
}; // Phải có dấu ; ở đây
Hoặc là:
do {
// Statements...
} while (condition); // Cũng phải có dấu ; ở đây
Bổ sung: Khi sử dụng return cũng phải có dấu ; và các kết quả trả về phải nằm cùng một hàng. Việc này tránh việc xảy ra lỗi khi ta sử dụng chức năng Optimize JavaScript files của Drupal.
Cách toán tử điều khiển
Đây là các lệnh thường xuyên được dùng, ví dụ if, for, while, switch, .... Khi sử dụng các từ khóa này thì sau đó phải có một dấu khoảng trắng để ngăn cách giữa từ khóa và các điều kiện kèm theo để phân biệt. Mặc dù có các toán tử khi sử dụng ta không dùng vào mục đích gì thì javascript cho phép bỏ qua nhưng Drupal khuyến khích ta nên sử dụng dấu {} trống để tăng tính dễ đọc và giảm khả năng lỗi xảy ra khi có thêm các dòng mới được thêm vào.
if
if (condition1 || condition2) {
action1();
}
elseif (condition3 && condition4) {
action2();
}
else {
defaultAction();
}
switch
switch (condition) {
case 1:
action1();
break;
case 2:
action2();
break;
default:
defaultAction();
}
try
try {
// Statements...
}
catch (variable) {
// Error handling...
}
finally {
// Statements...
}
for
Có nhiều cách sử dụng từ khóa for và Drupal khuyên chúng ta nên sử dụng theo cách for in. Chú ý nữa là khi ta sử dụng theo cách này thì vòng lặp của chúng ta sẽ lấy hết tất cả các thuộc tính kể cả thuộc tính được thừa hưởng để sử dụng nên khi có yêu cầu đặc biệt như chỉ lấy các thuộc tính của chính đối tượng đó thì ta nên sử dụng if từ ngoài vòng lặp để tăng hiệu suất. Cách dùng:
for (var variable in object) if (filter) {
// Statements...
}
Ví dụ đối với yêu cầu của chúng ta ở trên (Chỉ lấy ra các thuộc tính của chính bản thân object chứ không lấy các thuộc tính được thừa hưởng bằng cách sử dụng hàm hasOwnProperty):
for (var variable in object) if (object.hasOwnProperty(variable)) {
// Statements...
}
Hàm
Hàm và phương thức
Như quy ước chung, tên hàm và phương thức cũng phải được đặt tên theo quy tắc lowerCamelCase
Drupal.behaviors.tableDrag = function (context) {
for (var base in Drupal.settings.tableDrag) {
if (!$('#' + base + '.tabledrag-processed', context).size()) {
$('#' + base).filter(':not(.tabledrag-processed)').each(addBehavior);
$('#' + base).addClass('tabledrag-processed');
}
}
};
Gọi hàm
Khi gọi hàm thì không được có khoảng trắng nào giữa tên hàm, dấu mở ngoặc và tham số đầu tiên; dùng dấu khoảng trắng để ngăn cách giữa các tham số; không có dấu khoảng trắng giữa tham số cuối cùng với dấu đóng ngoặc và dấu ;. Ví dụ:
foobar = foo(bar, baz, quux);
Để tăng tính dễ đọc của code ta có thể sử dụng thêm các dấu khoản trắng ở trước dấu =.
short = foo(bar);
longVariable = foo(baz);
Đối với các hàm không tên thì giống như các toán tử điều khiển, cần có một dấu khoảng trắng giữa từ function và dấu mở ngoặc. Nếu ta không sử dụng dấu khoảng trắng có nghĩa là ngầm đình ta tạo ra một hàm và đặt tên là "function"
div.onclick = function (e) {
return false;
};
Định nghĩa hàm
Tương tự như cách gọi hàm, chú ý là với các tham số có giá trị mặc định thì phải đặt ở cuối cùng. Điều này tiện cho việc sử dụng và gọi hàm.
function funStuff(field) {
alert("This JS file does fun message popups.");
return field;
}
Chú ý với các hàm không tên cũng hoàn toàn giống như trường hợp trên
Biến và mảng
Tất cả các biến nên được định nghĩa bằng từ khóa var trước khi được sử dụng và chỉ nên được định nghĩa một lần. Điều này giúp cho chương trình dễ dàng đọc và dễ tìm ra các biến chưa được định nghĩa có thể trở thành các biến toàn cục.
Không nên định nghĩa các biến từ bên ngoài; cố gắng định nghĩa và sử dụng biến chỉ nằm trong bản thân của hàm. Các biến phải được định nghĩa ở đầu hàm.
Hằng số và biến toàn cục
Các hằng số cũng sử dụng quy tắc đặt tên lowerCamelCasing. Với các từ khóa của javascript thì ta phải sử dụng chữ in thường (Khác với PHP phải sử dụng chữ in hoa) như false, true, null. Khác với PHP khi sử dụng các từ khóa này in hoa thì điều này là không hợp lệ trong Javascript.
Các biến được định nghĩa bằng PHP cũng phải theo quy ước lowerCamelCasing, điều này tạo ra sự phù hợp với các biến được sử dụng trong javascript.
<?php
drupal_add_js(array('myModule' => array('basePath' => base_path())), 'setting');
?>
Khi định nghĩa như trên từ trong javascript ta truy xuất bằng cách:
Drupal.settings.myModule.basePath;
Mảng
Mảng cũng phải được định dạng với khoảng trắng ngăn cách giữa các phần tử.
someArray = ['hello', 'world'];
Chiều dài tối đa cho phép là 80 ký tự, khi dòng của chúng ta dài hơn thì phải xuống dòng. Thêm lưu ý là phần tử cuối cùng của mảng không có dấu , như PHP để tương thích và chạy tốt trên trình duyệt IE.
Chú thích
Cũng sử dụng cách định dạng chú thích của Doxygen
Cố gắng miêu tả càng rõ ràng càng tốt, các chú thích đều được Drupal bỏ đi khi sử dụng nên ta không phải lo lắng về việc tăng dung lượng của file...
Cách chú thích của C (/**/) và C++ (//) đều sử dụng được.
Chú thích đầu file
Để quản lý tốt thì ngay đầu file mã nguồn ta nên chú thích bằng dòng:
// $Id$
Điều này giúp cho CVS server tự động parse thành chuỗi chứa thông tin để quản lý. Sau này khi dùng với SVN ta cũng có thể sử dụng được.
Cách nhúng javascript
Javascript không được nhúng trực tiếp vào trong HTML.
Sử dụng "with"
Từ khóa with cho phép ta truy cập nhanh vào các phần tử của đối tượng. Tuy nhiên cách này không được khuyến khích. Ví dụ để truy cập vào foo.bar.foobar.abc, foo.bar.foobar.xyz ta có thể dùng:
with (foo.bar.foobar) {
var abc = true;
var xyz = true;
}
Quy ước này giúp cho chúng ta dễ dàng nhìn vào và biết được khi nào có cái gì thay dổi. Nhìn vào đoạn code ở trên ta khó mà biết được khi nào thì foo.bar.foobar thay đổi, hay là có biến abc hay xyz toàn cục nào không...
Giải quyết việc muốn truy cập trên bằng cách truyền thống như sau:
foo.bar.foobar.abc = true;
foo.bar.foobar.xyz = true;
Nếu thực sự muốn dùng cách viết tắt, có thể sử dụng theo kiểu:
var o = foo.bar.foobar;
o.abc = true;
o.xyz = true;
Điều kiện
So sánh
Cũng như trong PHP, ta có thể sử dụng == và != để so sánh các biểu thức. Điều này rất tệ, ví dụ: '\t\r\n' == 0 sẽ cho kết quả là true. Khi so sánh mà không chắc về kiểu dữ liệu ta nên dùng === và !==.
Dấu phẩy
Javascript là một ngôn ngữ được thực hiện theo ưu tiên từ trái qua phải nên khi gặp các biểu thức điều kiện được ngăn cách bằng đấu , thì sẽ được thực hiện theo ưu tiên từ trái qua phải. (Và cũng như toán học các biểu thức nằm trong ngoặc sẽ được ưu tiên xử lý trước). Ví dụ về cách dùng:
var x = (y = 3, z = 9);
Lúc này thì ta sẽ có: x=9, y=3, z=9. Sử dụng điều kiện kiểu này làm cho chương trình trở nên khó đọc và khó hiểu. Không khuyến khích sử dụng các điều kiện dạng này.
Cách sử dụng các từ khóa không có tính dễ đọc (unreachable)
Để tăng tính dễ đọc của chương trình, các từ khóa return, break, continue, throw phải theo sau } hoặc case hoặc default chứ không nên đứng độc lập.
Khởi tạo (Constructor)
Constructor được thiết kế để sử dụng với từ khóa new. Khi cần tạo ra nhiều đối tượng có chung các thuộc tính và phương thức.
Viết rút gọn
Một vài quy ước viết rút gọn được định nghĩa trong javascript.
- Thay cho
new Array()dùng[] - Thay cho
new Object()dùng{} - Đừng dùng
new Number,new String,new Boolean.
eval là quỷ dữ
Dùng eval là một cách làm giảm hiệu suất đáng kể. Khi eval được gọi thì trình duyệt sẽ kiểm tra hết tất cả các bộ nhớ đang được sử dụng và tạo ra một vùng nhớ mới để lưu trữ các biến này, chạy mã nguồn trong evil, xử lý rác, sau đó đưa lại các biến trở ngược lại vào vùng nhớ cũ. Làm cách này mã nguồn sẽ không thể được cache lại và và chậm chạp. Có nhiều cách khác để thay thế cho eval.
Phòng tránh XSS
Trước khi đưa dữ liệu ra trình duyệt hãy sử dụng hàm Drupal.checkPlain(), hàm này tương tự như hàm check_plain() của Drupal ở PHP.
typeof
Khi sử dụng typeof đừng sử dụng dấu ngoặc.
if (typeof myVariable == 'string') {
// ...
}
Chỉnh sửa DOM
Khi cần tương tác vào các phần tử HTML trên cây DOM, đừng sử dụng trực tiếp để chương trình chạy tốt trên các trình duyệt. Hãy sử dụng jQuery để làm việc này.
Đừng dùng kiểu này:
this.popup = document.createElement('div');
this.popup.id = 'autocomplete';
Hãy dùng như vầy:
this.popup = $('
')[0];
Các hàm đặc biệt dành riêng Drupal 6 trở về sau
Drupal 6 có hổ trợ các hàm dùng cho việc theming và translation
Theming
Drupal cung cấp một cơ chế tương tác tới theme trong javascript. Bất kỳ module nào có sinh ra HTML thì phải có hàm tạo ra theme mặc định ở bên trong Drupal.theme.prototype
String Translation
Các chuỗi trong Javascript nên được đưa vào trong hàm Drupal.t(). Hàm này có tác dụng như hàm t() bên phía PHP. Ngoài ra Drupal còn cung cấp hàm tương tự như format_plural() ở phía javascript là hàm Drupal.formatPlural(). Các tham số giống hoàn toàn với phía PHP.
Add new comment