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...
Nội dung trích xuất từ tài liệu:
Mẹo vặt JavaScript 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à Rubycó 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ụcvar i; // biến cục bộvar Klass; // classTrong 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 document.write();}}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 // cách khai báo 2function f() { var f = function() {alert(f); alert(f);} }f(); f();alert(f); alert(f);f = 5; f = 5;alert(f); 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 DOMwindow.onload được gọi sau khi trang web được load xong. Do đó, nên dùng window.onloadlà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ủachươ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 JSthườ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ắtwindow.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 windowTham khảo: • http://www.geekdaily.net/2007/07/27/javascript-windowonload-is-bad-mkay/ • http://clientside.cnet.com/code-snippets/event-scripting/a-dom-ready-extension-for- prototype/Dùng classJS 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óeloe, 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ượngtrong JS, nên đọc quyển Professional JavaScript for Web DevelopersViệ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ủabạn lebinh.Tách HTML và JSNên viết (1) các đoạn và (2) xử lí sự kiện (như onclick, onchange, ...) thành tập tinriê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.jsSubmitKhi 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 AjaxCross-domain Ajax không phải là một vấn đề mới. Ngay khi có Ajax người ta đã muốn giảiquyế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ácvớ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 webkhá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ỹ ...