Mẹo vặt JavaScript

Chủ đề này tập hợp một số mẹo vặt đúc kết từ kinh nghiệm thực tế sử dụng JavaScript (JS). Để hiểu và sử dụng được những mẹo này, người đọc cần có kiến thức trung bình khá trở lên về JS, nghĩa là ít nhất cũng đã đọc qua Nhập môn JS, JS nâng cao và Tài liệu hướng dẫn về prototype.js.

Để làm việc hiệu quả, các thành viên trong cùng project cần tuân theo qui ước chung. JS và Ruby có rất nhiều điểm tương đồng. Qui ước sau lấy chút tinh thần của Ruby.

var CONST = 10; // hằng số
var $global; // biến toàn cục
var i; // biến cục bộ
var Klass; // class

Trong JS không có hằng số, nên viết hoa tên biến để tự nhắc nhở đừng thay đổi giá trị của chúng.

JS không bắt phải thêm var khi khai báo biến. Nhưng khi khai báo biến, nên thêm var để nhìn là biết ngay (1) biến được khai báo ở chỗ nào và (2) giới hạn hoạt động của nó. Ví dụ:

function f() {
total = 0;
for (i = 1; i <= 6; i++)
total += i;
return total;
}

alert(f());

alert(total);
alert(i);

Trong ví dụ trên, vì total và i không được khai báo với var nên chúng được coi như biến toàn cục, trái với ý của lập trình viên là muốn vùng hoạt động của chúng bị giới hạn trong f.

Nên khai báo tất cả các biến sử dụng trong hàm ngay ở đầu hàm, giống như ngôn ngữ C. Lí do là trong phạm vi hàm, biến khai báo trong block có scope vượt ra ngoài phạm vi của block, có thể gây hậu quả không lường trước. Ví dụ:

function f() {
for(var i = 0; i < 10; i++) {
document.write(i + ':');
for(var i = 0;i < 5; i++) {
document.write(' ' + i);
}
document.write("<br />");
}
}

Khi chạy, f sẽ chạy vô hạn, vì biến i trong block thứ hai có tác dụng cả ở ngoài block, tác động đến biến i trong block thứ nhất.

JS không cần dấu chấm phẩy (;) để ngăn cách. Nhưng nên dùng, chương trình sẽ dễ đọc hơn và tương thích với các chương trình làm gọn/mã hóa JS (cruncher, obfuscator).

Hàm cũng chỉ là biến

Đoạn mã 1	Đoạn mã 2
// cách khai báo 1 function f() { alert('f'); } f(); alert(f); f = 5; alert(f);	// cách khai báo 2 var f = function() { alert('f'); } f(); alert(f); f = 5; alert(f);

Hai đoạn mã trên cho thấy 2 điều:

Hàm cũng chỉ là biến, giá trị có thể thay đổi.
Có thề khai báo hàm theo kiểu của khai báo biến. Kiểu khai báo này hay hơn, vì nó cho thấy bản chất của hàm trong JS.

Tóm lại, trong JS mọi thứ đều là biến, đều có thể thay đổi.

onload của window và onready của DOM

window.onload được gọi sau khi trang web được load xong. Do đó, nên dùng window.onload làm điểm bắt đầu của chương trình, tương tự như dùng hàm main trong ngôn ngữ C hoặc Java.

Như khái niệm resource của chương trình desktop, trang HTML có thể coi là resource của chương trình web. Trình duyệt nạp trang web theo từng dòng từ trên xuống dưới, mà đoạn JS thường được đặt trước đoạn HTML, nên lỗi lập trình viên hay gặp phải là khởi tạo biến phụ thuộc đoạn HTML trong khi đoạn HTML chưa được nạp.

Nếu dùng prototype.js, thì nên dùng Event.observe, nó cho phép nhiều hàm cùng bắt window.onload.

Ví dụ:

Event.observe(window, 'load', f1, false);
Event.observe(window, 'load', f2, false);

var f1 = function() {
alert('f1');
}

var f2 = function() {
alert('f2');
}

Cập nhật: nên dùng onready của DOM thay cho onload của window

Tham khảo:

Dùng class

JS hỗ trợ lập trình hướng đối tượng khá tốt. Không dùng tính năng này mà để biến và hàm tóe loe, thì lúc chương trình phức tạp sẽ rất khó kiểm soát. Để hiểu rõ lập trình hướng đối tượng trong JS, nên đọc quyển Professional JavaScript for Web Developers

Việc khai báo và sử dụng class rất đơn giản nếu dùng prototype.js, xin xem thêm hướng dẫn của bạn lebinh.

Tách HTML và JS

Nên viết (1) các đoạn <script> và (2) xử lí sự kiện (như onclick, onchange, ...) thành tập tin riêng, tách khỏi tập tin HTML, sao cho trong tập tin HTML, không còn bất kì đoạn mã JS nào.

Việc tách này mang lại một số lợi điểm:

Tập tin HTML không còn vướng đống spaghetti JS, nên dễ thiết kế và chỉnh sửa giao diện.
Các đoạn JS liên quan đến nhau được tập hợp lại thành một hoặc nhiều tập tin, nên dễ viết và sửa lỗi.

Ví dụ:

choices.html
choices.js

Submit

Khi dùng JavaScript để submit form thông qua iframe (ví dụ khi muốn upload file), chú ý là form và các thành phần cần submit nằm trong form không được đặt là disabled.

Cross-domain Ajax

Cross-domain Ajax không phải là một vấn đề mới. Ngay khi có Ajax người ta đã muốn giải quyết vấn đề này vì cả Firefox và IE đều không cho phép bạn gửi 1 request đến một domain khác với domain hiện hành.

Sẽ rất tuyệt với nếu có thể lấy dữ liệu từ trang từ điển Fast Dictionary để dùng ở mọi trang web khác.

Có 4 giải pháp:

Dùng 1 proxy. Gửi request tới một trang trên máy chủ của mình và trang này forward tới trang ở domain khác, nhận dữ liệu trả lời và chuyển lại cho trang ban đầu. Nhược điểm của phương pháp này là phải thực hiện từ phía server-side và do đó tốn tài nguyên/băng thông của server.
Dùng JS. Tương tự như cách Google Analytics dùng khi nhúng một đoạn Javascript để theo dõi những ai truy cập vào trang web. Nhược điểm là dữ liệu chuyển qua lại phải là dạng JSON.
Dùng Flash. Đây là một kỹ thuật tấn công DOS phổ biến bằng cách cài flash vào trang web và request sang trang khác. Nhược điểm là phụ thuộc vào flash và bị một số nguy cơ bảo mật khác
Dùng IFrame. Đây là một kỹ thuật khá phức tạp. Tuy nhiên, Dojo đã cho phép bạn thực hiện điều này bằng cách khá đơn giản. Đây là giải pháp tương đối toàn vẹn. Nhược điểm chính là IFrame sẽ tiêu tốn bộ nhớ của browser nhưng có lẽ không đáng kể.

Frame busting

Để tránh trang của mình chạy trong frame của người khác, có thể dùng:

if (top != self) {
top.location.href = location.href;
}

Thu nhỏ ảnh

Thỉnh thoảng ảnh nhúng vào diễn đàn, blog... to quá khổ, cần thu nhỏ cho vừa khít thành phần HTML bao quanh ảnh. Nếu dùng prototype.js thì chỉ đoạn mã ngắn sau, nhìn mã chắc các bạn đoán được thuật toán.

Nén

Đối với file JS to, nhất là khi dùng các thư viện như Dojo hay “YUI”: http://developer.yahoo.com/yui/, có thể dùng JavaScript Compressor để nén lại. Tỉ lệ nén thường đạt trở lên 50%.

Nguyên tắc nén là loại bỏ khoảng trắng và các dấu xuống dòng. Do đó khi viết chương trình, nên cẩn thận các dấu ; { }. Có thể dùng chương trình JSLint để kiểm tra xem source code không “chuẩn” chỗ nào, sau đó sửa lại cho tương thích với chương trình nén.

Theo cntt

Nhắn tin cho tác giả

Huỳnh Thanh Phong @ 00:04 24/12/2010
Số lượt xem: 439

Số lượt thích: 0 người

phonght4040 Thông báo

Tài nguyên dạy học

Thông tin

Các ý kiến mới nhất

Hỗ trợ trực tuyến

Điều tra ý kiến

Thống kê

Ảnh ngẫu nhiên

Thành viên trực tuyến

Sắp xếp dữ liệu

Đồng hồ HTP thông báo : Bây giờ là

HUỲNH THANH PHONG

Trạng thái

Tạo bài viết mới Mẹo vặt JavaScript