Tối ưu mã nguồn ứng dụng là một công việc khá quan trọng đối với các ứng dụng lớn. Đối với ngôn ngữ lập trình JavaScript thì vấn đề này càng trở nên quan trọng hơn; bởi các ứng dụng JavaScript và ứng dụng web, đặc biệt là các ứng dụng Web 2.0 thường bị giới hạn về mặt kĩ thuật bởi khả năng xử lý của phần cứng, trình duyệt.

Tối ưu mã nguồn JavaScript trong các ứng dụng web sẽ giúp cho trình duyệt tốn ít tài nguyên để xử lí, sẽ làm cho tốc độ đáp ứng với người dùng nhanh hơn. Tuy nhiên bài viết hướng dẫn này xoay quanh các thủ thuật tối ưu JavaScript dựa trên thư viện jQuery.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

I have published several articles describing the many benefits we can all get from using jquery. Having access to many good plugins, examples and tutorials is important to get great ideas turned into excellent solutions as fast and elegant as possible and that is what jquery is all about. If you use jquery regularly or plan to start using it as more and more web developers tend to do I believe a few fundamentals and best practice tips to improve your jquery code will be worth spending a few minutes on. Please don’t hesitate to post a comment with your own tips and suggestions.

jQuery Tips

#1 – Load the framework from Google Code

Google have been hosting several JavaScript libraries for a while now on Google Code and you may want to load it from them instead of from your server.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

#2 – Storing Data

Use data method and avoid storing data inside the DOM. Some developers have a habit of storing data in the HTML attributes like fx.:

$('selector').attr('alt', 'data being stored');

// later the data can be retrieved using:
$('selector').attr('alt');

HTML attributes is not meant to store data like that and the “alt” as a parameter name does not really make sense.

The right alternative in most cases is using the data method in jQuery. It allows you to associate data with an element on the page.

$('selector').data('paramtername', 'data being stored');
// then later getting the data with
$('selector').data('paramtername');

This approach allows you to store data with meaningful names and it is more flexible as you can store as much data as you want on any element on the page. For more information about data() and removeData(), see here jQuery internals

One classical use of this is saving the default value of a input field because you want to clear it on focus.

<form id="testform">
 <input type="text" class="clear" value="Always cleared" />

 <input type="text" class="clear once" value="Cleared only once" />
 <input type="text" value="Normal text" />

</form>
 
$(function() {
 //Go through every input field with clear class using each function
 //(NB! "clear once" is two classes clear and once)

 $('#testform input.clear').each(function(){
   //use the data function to save the data
   $(this).data( "txt", $.trim($(this).val()) );

 }).focus(function(){
   // On focus test for default saved value and if not the same clear it
   if ( $.trim($(this).val()) === $(this).data("txt") ) {

     $(this).val("");
   }
 }).blur(function(){
   // Use blur event to reset default value in field that have class clear

   // but ignore if class once is present
   if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {

     //Restore saved data
     $(this).val( $(this).data("txt") );

   }
 });
});

#3 – Use Cheat Sheets

Most people can’t remember a lot of details and even though programmers tend to be better that the average the amount of information they need to have instant access too is devastating. Having a few cheat sheets printed out and placed next to the monitor is a good idea to speed up programming and to improve the code quality.

oscarotero jquery 1.3 (as wallpaper)

jQuery 1.3 Cheat Sheet

Quick reference to all jQuery 1.3 functions and properties. Note that it doesn't cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.

#4 – Minimize download time

Most browsers only download one script at the time and if you have several scripts being loaded on every page it can impact your download time.

You can use Dean Edwards service “packer” to compress your scripts and make download faster. You need to maintain a development version and a runtime version as all you in-line comments will be lost. You will find it here.

Another solution that take this to the extreme is interesting to take a look at. Basically it is a server based PHP script that combine javasctipt files and compress them in a easy to maintain approach. Take a look at and see if you can use the idea and some elements of the concept “Make your pages load faster by combining and compressing javascript and css files“.

#5 – Logging to the Firebug console in jQuery

Firebug is one of my favourite Firefox extensions providing tons of tools in a very usable structure to aid you in HTML+CSS+JavaScript development. Obviously it is worth having just for it’s excellent inspection feature allowing you to jump into the html and css and learn in a visual way what elements of the page is rendered by what code. As a jQuery and general Javascript developer Firefox also has good support for logging in your JavaScript code.

The easiest way to write to the Firebug console looks like this:

console.log("hello world")

You can pass as many arguments as you want and they will be joined together in a row, like

console.log(2,4,6,8,"foo",bar)

As a jQuery developer it even gets better using a tiny extension that Dominic Mitchell came up with to log any jQuery object to the console .

jQuery.fn.log = function (msg) {

    console.log("%s: %o", msg, this);
    return this;

};

With this extension you can simply call .log() on the object you are currently addressing fx.:

$('#some_div').find('li.source > input:checkbox')
    .log("sources to uncheck")

    .removeAttr("checked");

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới