Thực hiện tác vụ khi load trang (Bài 4)
Trong các bài trước chúng ta đã thấy cách để thực thi mã của jQuery khi trang được load. Đó là dùng event handler $(document).ready(), tuy nhiên còn nhiều điều cần phải bàn về nó.
1. Thời điểm thực thi:
Trong bài trước, chúng ta đã biết $(document).ready() là cách mà mã jQuery được thực thi giống như được kích hoạt bởi JavaScript built-in onload event. Hai cái có tác vụ tương tự nhau, tuy nhiên thời điểm thực thi khác nhau.
Tác vụ window.onload được thực hiện khi toàn bộ nội dung trang web (document) được tải hết về browser. Có nghĩa là, tất cả các thành phần (element) trên document đã sẵn sàn cho việc xử lý bằng JavaScript. Bạn không cần phải lo lắng gì về thứ tự được load.
Trong khi đó, $(document).ready() được triệu gọi khi DOM đã sẵn sàn để sử dụng. Có nghĩa là các element đã được tải về đầy đủ và đã sẵn sàn cho sử dụng, nhưng không có nghĩa là tất cả các file liên quan đã được tải xong. Ngay khi mã HTML được tải về đầy đủ để hoàn thiện cấu trúc DOM thì mã jQuery đã được thực thi.
Do đó, để đảm bảo trang web đã được áp style trước khi mã jQuery được thực thi, chúng ta nên đặt các tag <link rel="stylesheet"> trước tất cả các tags <script> trong phần header.
Chúng ta hãy xem xét một ví dụ cụ thể, một trang web trình bày bộ sưu tập ảnh, có nhiều hình ảnh cỡ lớn trên trang hiển thị, mà chúng ta muốn ẩn, hiện, di chuyển … bằng jQuery. Nếu chúng ta sử dụng onload event thì người dùng sẽ phải chời đợi cho toàn bộ trang web được load về, kể cả các hình ảnh đã được tải xong trước khi sử dụng trang web. Tồi tệ hơn, nếu các hành vi chưa được gắn vào các yếu tố có hành vi mặc định (như là các link), tương tác của người sử dụng có thể xuất hiện các kết quả không mong đợi. Tuy nhiên, khi chúng ta sử dụng $(document).ready() của jQuery cho việc khởi tạo, giao diện được sẳn sàn để sử dụng sớm hơn.
2. Nhiều script trên một trang:
Trước đây, để thực thi một tác vụ khi trang được load ta thường dùng:
Một câu hỏi đặt ra là nếu ta muốn thực hiện một tác vụ khác, thì có vấn đề gì không? Ví dụ như:
Sử dụng jQuery, bạn có thể đặt bao nhiêu cái $(document).ready() cũng được, và tất cả các code bên trong mỗi cái đều được thực thi.
3. Cách thu gọn mã:
Với jQuery thay vi viết mã:
Trong nhiều trường hợp, bạn có thể sẽ sử dụng nhiều hơn 1 thư viện JavaScript, bên cạnh jQuery bạn muốn sử dụng một thêm một thư viện khác… và có thể thư viện này cũng sử dụng khai báo $ (vì nó đơn giản + thuận tiện). Do đó, chúng ta cần có cách để tránh việc đụng chạm khi sử dụng.
jQuery cung cấp một phương thức có tên .noConflict() để giải quyết việc này. Nhiệm vụ của nó là trả điều khiển ngược về thư viện kia. Sau đây là cách mà chúng ta cần biết để làm việc này:
1. Thời điểm thực thi:
Trong bài trước, chúng ta đã biết $(document).ready() là cách mà mã jQuery được thực thi giống như được kích hoạt bởi JavaScript built-in onload event. Hai cái có tác vụ tương tự nhau, tuy nhiên thời điểm thực thi khác nhau.
Tác vụ window.onload được thực hiện khi toàn bộ nội dung trang web (document) được tải hết về browser. Có nghĩa là, tất cả các thành phần (element) trên document đã sẵn sàn cho việc xử lý bằng JavaScript. Bạn không cần phải lo lắng gì về thứ tự được load.
Trong khi đó, $(document).ready() được triệu gọi khi DOM đã sẵn sàn để sử dụng. Có nghĩa là các element đã được tải về đầy đủ và đã sẵn sàn cho sử dụng, nhưng không có nghĩa là tất cả các file liên quan đã được tải xong. Ngay khi mã HTML được tải về đầy đủ để hoàn thiện cấu trúc DOM thì mã jQuery đã được thực thi.
Do đó, để đảm bảo trang web đã được áp style trước khi mã jQuery được thực thi, chúng ta nên đặt các tag <link rel="stylesheet"> trước tất cả các tags <script> trong phần header.
Chúng ta hãy xem xét một ví dụ cụ thể, một trang web trình bày bộ sưu tập ảnh, có nhiều hình ảnh cỡ lớn trên trang hiển thị, mà chúng ta muốn ẩn, hiện, di chuyển … bằng jQuery. Nếu chúng ta sử dụng onload event thì người dùng sẽ phải chời đợi cho toàn bộ trang web được load về, kể cả các hình ảnh đã được tải xong trước khi sử dụng trang web. Tồi tệ hơn, nếu các hành vi chưa được gắn vào các yếu tố có hành vi mặc định (như là các link), tương tác của người sử dụng có thể xuất hiện các kết quả không mong đợi. Tuy nhiên, khi chúng ta sử dụng $(document).ready() của jQuery cho việc khởi tạo, giao diện được sẳn sàn để sử dụng sớm hơn.
2. Nhiều script trên một trang:
Trước đây, để thực thi một tác vụ khi trang được load ta thường dùng:
<body onload="doStuff();">Hoặc sử dụng javascript:
window.onload = doStuff;Cả hai cách này đều làm những công việc như nhau, cái thứ 2 xem ra dễ coi hơn. Nhưng cần chú ý là cách thứ 2 chúng ta không sử dụng 2 dấu ngoặc đơn. Việc sử dụng 2 dấu ngoặc đơn sẽ khiến code thực thi ngay tức thì, ngược lại, đó chỉ là khai báo một cái tên hàm mà sẽ được gọi sau khi trang được load xong.
Một câu hỏi đặt ra là nếu ta muốn thực hiện một tác vụ khác, thì có vấn đề gì không? Ví dụ như:
window.onload = doOtherStuff;Tất nhiên là có vấn đề, vì tại đây bạn đã đăng ký cho window.onload một tên hàm khác chứ không phải add thêm vào nó (JavaScript không hỗ trợ việc add thêm này). Và việc thực thi chỉ có doOtherStuff();
Sử dụng jQuery, bạn có thể đặt bao nhiêu cái $(document).ready() cũng được, và tất cả các code bên trong mỗi cái đều được thực thi.
3. Cách thu gọn mã:
Với jQuery thay vi viết mã:
$(document).ready(function() {
// code của chúng ta ở đây...
});Chúng ta có thể thu gọn như sau:$().ready(function() {
// code của chúng ta ở đây...
});Hoặc ngắn hơn:$(function() {
// code của chúng ta ở đây...
});4. Trùng khai báo với thư viện khác:Trong nhiều trường hợp, bạn có thể sẽ sử dụng nhiều hơn 1 thư viện JavaScript, bên cạnh jQuery bạn muốn sử dụng một thêm một thư viện khác… và có thể thư viện này cũng sử dụng khai báo $ (vì nó đơn giản + thuận tiện). Do đó, chúng ta cần có cách để tránh việc đụng chạm khi sử dụng.
jQuery cung cấp một phương thức có tên .noConflict() để giải quyết việc này. Nhiệm vụ của nó là trả điều khiển ngược về thư viện kia. Sau đây là cách mà chúng ta cần biết để làm việc này:
<script src="prototype.js" type="text/javascript"></script> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); </script> <script src="myscript.js" type="text/javascript"></script>Trước tiên một thư việ khác (trong ví dụ này là Prototype) được chèn vào. Sau đó là jQuery, thằng jQuery được chèn sau sẽ giành $ cho nó. Vì thế ta gọi jQuery.noConflict(); kế tiếp nhằm mục đích bào jQuery trả $ về cho Prototype. Tuy nhiên, kể từ lúc này, chúng ta sẽ không sử dụng $ cho jQuery nữa mà thay và đó là sử dụng chữ jQuery. Ví dụ:
jQuery(document).ready(function($) {
// code ở đây ta có thể sử dụng $ như thường!
});
Hoặc ngắn gọn:jQuery(function($) {
// code ở đây ta có thể sử dụng $ như thường!
});
(Nguồn: ZendVN group - pn2design)
Nhận xét
Đăng nhận xét