Viết jQuery theo chuẩn

quocbb May 26, 2015 Jquery/Ajax, Kiến thức No Comments

Đây là một số tiêu chuẩn chung và tối ưu code jquery. Các tiêu chuẩn này không bao gồm tiêu chuẩn Javascript hoặc thực hành tốt nhất. Nếu có bất kỳ câu hỏi nào hoặc đề xuất cải tiến bạn hãy để lại nhận xét bên dưới.

jquery-toi-uu-hoa-code

Loading jQuery

1. Luôn cố gắng sử dụng một CDN (content delivery network) tạm hiểu là nơi lưu trữ theo từng vùng để include jquery trên trang của bạn
1
2
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js" type="text/javascript"><\/script>')</script>

Danh sách các CDN jquery phổ biến:
Google: https://developers.google.com/speed/libraries/devguide
Microsoft: http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery: http://jquery.com/download/
jsDelivr: http://www.jsdelivr.com
cdnjs: http://cdnjs.com
OSSCdn: http://osscdn.com

2. Thực thi một fallback để lưu trữ thư viện cục bộ của bạn cùng một phiên bản như trên
1
2
3
4
5
6
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
3. Loại bỏ http: hoặc https:. Xem thêm
4. Nếu có thể, hãy đặt Jquery và javascript của bạn ở cuối cùng của trang web. Xem thêm
5. Sử dụng version nào?

Không sử dụng Jquery phiên bản 2.x nếu bạn phải hỗ trợ Internet Explorer 6/7/8

Đối với những ứng dụng web mới, nếu bạn không có vấn đề gì về tương thích plugin, chúng tôi khuyến khích bạn sử dụng phiên bản jquery mới nhất

Khi tải jquery từ CDN’s, luôn luôn xác định phiên bản jquery mà bạn muốn tải (ví dụ: 1.11.0 khác với 1.11 hoặc 1.

Không tải nhiều phiên bản jQuery.

Không sử dụng jquery-latest.js từ jQuery CDN.

6. Nếu bạn đang sử dụng những thư việc khác như Prototype, MooTools, Zepto … Mặc dù việc sử dụng kí tự $ là tốt nhất, nhưng ở đây hãy cố gắng không sử dụng $ để gọi chức năng jQuery và thay vào đó hãy sử dụng với jQuery đơn giản. Bạn có thể trả điều khiển ngược về các thư viện kia bằng việc gọi phương thức .noConflict()
1
2
3
jQuery(document).ready(function($) {
// code ở đây ta có thể sử dụng $ như thường!
});
7. Để nâng cao tính năng phát hiện trình duyệt hãy sử dụng Modernizr

Biến jquery (Variables)

1. Tất cả các biến jquery được sử dụng để lưu trữ/ làm bộ nhớ đệm nên có tên bắt đầu bằng $
2. Luôn luôn trả về đối tượng trong biến để tái sử dụng
1
2
var $myDiv = $("#myDiv");
$myDiv.click (function () {...});
3. Có thể đặt tên biến bằng cách viết hoa chữ đầu tiên của 1 từ (CarnelCase)

Selectors

1. Sử dụng ID selector bất cứ khi nào có thể. Nó sẽ nhanh hơn vì được xử lý bằng việc sử dụng document.getElementById()
2. Khi sử dụng Class selector, không sử dụng các kiểu phần tử trong selector của bạn. So sánh hiệu suất :
1
2
var $products = $("div.products"); // Chậm
var $products = $(".products"); // Nhanh
3. Sử dụng find cho việc chọn Id->Child. Dùng .find() sẽ nhanh hơn vì lựa chọn đầu tiên được xử lý mà không cần thông qua công cụ chọn Sizzle
1
2
3
4
5
// BAD, truy vấn lồng nhau cho bộ chọn Sizzle
var $productIds = $("#products div.id");
// GOOD, #products đã được chọn bởi document.getElementByid(), chỉ div.id cần phải qua bộ chon Sizzle nên nhanh hơn
var $productIds = $("#products").find("div.id");
4. Nên cụ thể phía bên phải bộ chọn của bạn và ít cụ thể về bên trái
1
2
3
4
5
// Không tối ưu
$("div.data .gonzalez");
// Tối ưu
$(".data td.gonzalez");
5. Tránh dùng thừa selector quá nhiều
1
2
3
4
5
// Không tốt
$(".data table.attendees td.gonzalez");
 
// Tốt: Bỏ ở giữa nếu có thể
$(".data td.gonzalez");
6. Cung cấp cho selector của bạn một bối cảnh
1
2
3
4
5
// Chậm hơn vì nó đã đi qua toàn bộ DOM cho class
$('.class');
// nhanh hơn vì bây giờ chỉ chọn class mà là con của class-container
$('.class', '#class-container');
7. Tránh bao quát các chọn lọc
1
2
$('div.container > *'); // Không tốt
$('div.container').children(); // Tốt
8. Tránh chọn chung chung
1
2
$('div.someclass :radio'); // Không tốt
$('div.someclass input:radio'); // Tốt
9. Tránh dùng bộ chọn mà có nhiều Id. Vì Id chỉ được dùng 1 lần và được chọn bằng cách sử dụng document.getElementById()
1
2
3
4
$('#outer #inner'); // Không tốt
$('div#inner'); // Không tốt
$('.outer-container #inner'); // Không tốt
$('#inner'); // Tốt, chỉ gọi document.getElementById()

Thao tác với DOM

1. Luôn luôn tách rời bất kì yếu tố hiện có nào trước khi thao tác với nó bằng cách sử dụng detach() và đính kèm nó trở lại sau khi thao tác với nó.
1
2
3
var $myList = $("#list-container > ul").detach();
//...thao tác
$myList.appendTo("#list-container");// Đính trở lại
2. Sử dụng chuỗi nối hoặc array.join() thay cho .append()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Không tốt
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}
 
// Tốt
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);
 
//Tốt nhất
var array = [];
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>";
}
$myList.html(array.join(''));
3. Đừng thao tác trên các yếu tố vắng mặt, hãy kiểm tra nó trước khi làm việc
1
2
3
4
5
6
7
8
// Không tốt:
$("#nosuchthing").slideUp();
 
// Tốt
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

Sự kiện (Events)

1. Chỉ sử dụng một tài liệu sẵn sàng(Document Ready) xử lý trên mỗi trang. Điều này giúp cho việc gỡ lỗi và theo dõi hành vi của nó dễ dàng hơn.
2. Không sử dụng chức năng ẩn danh để gắn các sự kiện. Chức năng ẩn danh rất khó để gỡ lỗi, bảo trì, kiểm tra hoặc tái sử dụng
1
2
3
4
5
$("#myLink").on("click", function(){...}); // Không tốt
 
// Tốt
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);
3. Sự kiện Document ready không phải là một chức năng ẩn danh. Nhắc lại, chức năng ẩn danh rất khó để gỡ lỗi, bảo trì, kiểm tra, hoặc tái sử dụng
1
2
3
4
5
6
7
$(function(){ ... }); // Không tốt: Bạn không thể tái sử dụng hoặc viết kiểm tra cho chức năng này
 
// Tốt
$(initPage); // or $(document).ready(initPage);
function initPage(){
   
}
4. Sự kiện document.ready() nên được bao gồm từ các tập tin bên ngoài và nội tuyến JavaScript có thể được sử dụng để gọi các xử lý đã sẵn sàng sau thiết lập ban đầu
1
2
3
4
<script src="my-document-ready.js"></script>
<script>
    $(document).ready(initPage); // or $(initPage);
</script>
5. Không sử dụng việc gọi sự kiện trong HTML(JavaScript nội tuyến), đây là một cơn ác mộng của việc gỡ lỗi. Luôn ràng buộc các sự kiện với jQuery để nhất quán, điều này giúp cho việc đính kèm và loại bỏ các sự kiện tự động dễ dàng hơn
1
2
<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- Không Tốt -->
$("#myLink").on("click", myEventHandler); // Tốt
6. Khi có thể, hãy sử dụng tùy chỉnh namespace cho sự kiện.Nó dễ dàng hơn để unbind chính xác sự kiện mà bạn đính kèm và không ảnh hưởng đến các sự kiện khác liên kết với phần tử DOM
1
2
$("#myLink").on("click.mySpecialClick", myEventHandler); // Tốt
$("#myLink").unbind("click.mySpecialClick");

Ajax

1. Tránh sử dụng .getJSON() hoặc get(), đơn giản chỉ cần sử dụng $ajax() như là những gì được gọi nội bộ
2. Không sử dụng http , https. Sử dụng URL giản lược( bỏ giao thức http/https khỏi đường dẫn của bạn)
3. Không đặt thông số yêu cầu trong URL, mà hãy gửi chúng qua đối tượng data
1
2
3
4
5
6
7
8
9
10
11
// Ít dùng
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
 
// Nên dùng
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});
4. Thử xác định các thiết lập dataType vì nó dễ dàng hơn để biết loại dữ liệu mà bạn đang làm việc
5. Sử dụng xử lý sự kiện Delegated cho sự kiện gắn với nội dung tải bằng cách sử dụng Ajax. Sự kiện Delegated có lợi thế là có thể xử lý các sự kiện từ các yếu tố con được thêm vào tài liệu sau này.
1
$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);
6. Sử dụng Promise interface
1
2
3
4
5
6
$.ajax({ ... }).then(successHandler, failureHandler);
 
// Hoặc
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);
7. Template Ajax mẫu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var jqxhr = $.ajax({
    url: url,
    type: "GET", // Mặc định là GET, bạn có thể thay đổi nếu muốn
    cache: true, // Mặc định là true
    data: {}, // thêm các thông số yêu cầu vào data object
    dataType: "json", // xác định kiểu dữ liệu
    jsonp: "callback", // Chỉ định này để phù hợp với tên của tham số gọi lại API của bạn đang chờ đợi cho các yêu cầu JSONP
    statusCode: { // nếu bạn muốn xử lý từng mã lỗi cụ thể, sử dụng bản đồ thiết lập trạng thái
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

Hiệu ứng và hình động(Effects và Animations)

1. Áp dụng một phương pháp hạn chế và nhất quán để thực hiện chức năng animation
2. Không làm quá các hiệu ứng động mà không được yêu cầu

Hãy thử sử dụng hiệu ứng đơn giản : show/hide , toggle, slideUp/slideDown

Hãy thử dùng các khoảng thời gian có sẵn “slow”,”fast” hoặc 400(mediun)

Plugins

1. Luôn luôn chọn một plugin với hỗ trợ(support), tài liệu hướng dẫn, kiểm tra và hỗ trợ người dùng tốt
2. Kiểm tra tính tương thích của plugin với phiên bản jquery mà bạn đang sử dụng
3. Bất kỳ thành phần nào được tái sử dụng nhiều nên được thực thi như là một plugin jQuery

Chaining

1. Sử dụng chaining để thay thế cho biến nhớ đệm và những lựa chọn đa cuộc gọi
1
$("#myDiv").addClass("error").show();
2. Sử dụng ngắt dòng và thụt đầu dòng phù hợp để đoạn code dễ đọc hơn
1
2
3
4
5
$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();
3. Đối với chuỗi dài có thể chấp nhận các biến trung gian

Một vài thứ khác

1. Sử dụng
1
2
3
4
5
6
7
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // Không tốt, 3 lần gọi đến attr()
// Tốt, chỉ 1 lần gọi attr()
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});
2. Không trộn lẫn CSS với Jquery
1
2
3
$("#mydiv").css({'color':red, 'font-weight':'bold'}); // Không tốt
.error { color: red; font-weight: bold; } /* Tốt */
$("#mydiv").addClass("error"); // GOOD
3. Không sử dụng phương thức Deprecated. Xem thêm
4. Kết hợp jQuery với javascript khi cần thiết
1
2
$("#myId"); // chậm hơn so với
document.getElementById("myId");

 

Leave a Reply

Your email address will not be published. Required fields are marked *