Vài mẹo nhỏ giúp bạn code JQuery một cách bá đạo hơn

Hello tất cả thế giới, ngày hôm nay mình sẽ chia sẻ với mọi người một vài thủ thuật trong JQuery mà mình tự tổng hợp được qua quá trình nghịch ngợm khá nhiều với nó. Hi vọng nó sẽ là một tài liệu tham khảo hữu ích cho những bà con nào muốn sử dụng JQuery một cách hiệu quả hơn. OK chúng ta bắt đầu thôi

1 Đừng viết $(DOCUMENT).READY nữa

Nghe có vẻ hơi ghê gớm nhưng thực ra bạn cứ viết như thế này cũng chẳng sao đâu. Từ thời lớp mầm mình vẫn hay viết như thế này mà.

$(document).ready(function() {
    // Viết cái gì đó vào đây
}

Tuy nhiên bây giờ chúng ta nên viết gọn nó lại như thế này.

$(function(){
    // Viết cái gì đó vào đây
});

Gọn hơn bao nhiêu phải không ạ.

2 Kiểm tra điều kiện khi gọi method

Nói đến kiểm tra điều kiện chúng ta nghĩ ngay đến dùng điều kiện if...else phải không ạ. Cách mà chúng ta vẫn thường làm ví dụ như

if (success) {
  obj.show();
} else {
  obj.hide();
}

Tuy nhiên chúng ta có thể thu gọn nó hơn một chút nữa như sau:

var methodName = (success ? 'show' : 'hide');
obj[methodName]();

Nhìn nguy hiểm hơn hẳn chưa :v :v :v

3 Chuyển đổi External CSS Resource

Trong nhiều trường hợp chúng ta muốn chuyển đổi CSS cho toàn bộ trang hiện tại. Mà CSS đó đang được viêt tại một file CSS khác. Vậy làm thế nào để thay thế được đây. JQuery giúp chúng ta có thể thực hiện điều này trong một nốt nhạc. Giả sử chúng ta có một đoạn HTML như sau:

<ul>
	<li><a href="home">Home</a></li>
	<li><a href="home">About</a></li>
	<li><a href="home">Contact me</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a>
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a>
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

Khi chúng ta muốn thay đổi External CSS khi click chọn theme. Chúng ta sẽ làm như sau:

$("a.cssSwitcher").click(function() {
    //Lấy REL trong thẻ A thêm vào thẻ LINK
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});

4 Disable click chuột phải

Nhiều lúc trong một trang web bạn không muốn người dùng thao tác với chuốt phải, mục đích là gì thì tùy vào từng trường hợp cụ thể. Tóm lại nếu bạn cần cắt phéng cái chuột phải của người dùng thì có thể thêm vào trong file js gốc của trang web đoạn code như sau:

$(document).bind("contextmenu",function(e){
	//Trong này có thể viết hàm xử lý gì đó tùy bạn

	// Return false để loại bỏ thao tác với chuột phải
    return false;
});

5 Nối chuỗi hay còn gọi là cộng chuỗi

Cách đơn giản nhất là sử dụng dấu cộng như sau:

'Tabbu' + ' '  + 'And' + ' ' + 'Tabby' // Tabbu And Tabby

Đây là cách ngây thơ nhất ta chúng ta có thể làm. Tuy nhiên để nhanh hơn chúng ta nên sử dụng hàm join() như sau:

['Tabbby', 'And', 'Tabbu'].join(' '); // Tabby And Tabbu

6 Trả về giá trị mặc định của hàm và kiểm tra điều kiên đúng

Chúng ta thường viết các hàm xét giá trị mặc định bằng cách sử dụng điều kiện if..else. Ví dụ như sau:

function setName(name) {
    if (name) {
       this.name = name;
    } else {
       this.name = 'Tabby';
    }
    return this.name;
}
setName(); // Tabby
setName('Tabbu'); //Tabbu

Dài dòng quá, chúng ta có thể viết thêm một cách ngắn gọn hơn như sau:

function setName(name) {
    return this.name = name || 'Tabby';
}
setName(); // Tabby
setName('Tabbu'); //Tabbu

Nhỉn ngắn gọn và nguy hiểm hơn rất nhiều phải không nào. Ngoài ra khi kiểm tra điều kiện đúng để thực hiện một công việc nào đó, thay vì thực hiện:

var success = true;
if (success){
    console.log('xxxx');
}

Chúng ta có thể làm như sau:

var success = true;
success && console.log('xxxx');

Cũng đơn gian và nguy hiểm không kém.(^_^)

7 Sử dụng template

Mời xem code sẽ hiểu ngay ý đồ

var hotGirl = 'Trang'; // Huyền, Linh, Thu

// Bình thường thì viết như thế này
hotGirl + ' ơi. Em là mối tình duy nhất của anh @@';

// Giờ sửa lại như thế này cho ngáo hơn chút
var template = '{hotGirl} ơi. Em là mối tình duy nhất của anh @@';
var txt = template.replace('{hotGirl}', hotGirl);

Vậy là OK rồi đóa

Tham khảo

Google

Viblo

Tổng hợp các thủ thuật JQuery

Lời cuối cùng cho phép em được gửi lời cảm ơn chân thành nhất đến bác Google đã cung cấp cho em rất nhiều bí kíp võ công để em tập tành trong thời gian rảnh. Cảm ơn bác Viblo đã cho em mảnh đất dụng võ để em còn có nơi tập tành và thi triển với bà con. Em xin chân thành cảm ơn và chúc hai bác ngày càng phát triển ạ.