Với một newbie mới bước vào lập trình web, để hiển thị và xử lý sự kiên click lên 1 banner, họ thường viết code trong js file như sau:

1
2
3
4
5
6
7
// document ready
$(function() {
$('.banner').show();
$('.banner').on('click', function() {
// event handle
})
})

Giả sử rằng các yêu cầu liên quan đến banner này càng nhiều như hiển thị với hiệu ứng slide, không hiển thị với thiết bị không phải là iOS device, hoặc là hiển thị hiệu ứng này với các banner khác…Khi đó phần code trên dần dần bị nhiều lên và code trở nên khó bảo trì. Hơn nữa ta cũng không thể kế thừa được code này để áp dụng chức năng tương tự cho các banner khác. Chính vì vậy việc viết code js thông minh, có thể kế thừa, dễ bảo trì luôn là một ưu tiên đối với lập trình viên web. Giờ chúng ta sẽ viết lại đoạn code trên ở 1 level cao hơn nhé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(function( $, window ) {
window.banner = {
init: function( options ) {
// Tham số mặc định khi khởi tạo 1 banner object mới
var defaults = {
'bannerClass': 'top-banner',
'iDeviceCheck': true, // Chỉ hiển thị trên iOS devices
'animationSpeed': 'fast',
'animationEasing': 'swing',
'animationOnComplete': $.noop
}

options = $.extend( defaults, options );

// isIDevice(): Kiểm tra xem có phải iOS device hay không, hàm này các bạn tự viết nhé
var iDevice = isIDevice();

// Không làm gì nếu không phải i0S device và tuỳ chọn iDeviceCheck là true
if ( options.iDeviceCheck && !iDevice ) {
return;
}

// Gọi hiển thị banner
banner.show.call( this, options );

// Xử lý sự kiện
$('.' \+ options.bannerClass).on('click', function(){
// event handle
})
},

show: function( options ) {
$('.' \+ options.bannerClass)
.fadeIn( options.animationSpeed, options.animationEasing, options.animationOnComplete);
},

hide: function( options ){}

}
})( jQuery, window)

Việc đóng gói như 1 class trong lập trình OOP, ta có thể mở rộng, kế thừa và bảo trì code một cách dễ dàng. Khi sử dụng ta có thể thay đổi các tham số mặc định phù hợp với các yêu cầu đặt ra. Ví dụ:

1
2
3
4
5
6
$(function(){
banner.init({
'bannerClass': 'bottom-banner',
'animationSpeed': 'slow'
})
})

Chỉ một chút thay đổi nhỏ là code js của bạn đã ở 1 level hoàn toàn khác, đây cũng là các bước cơ bản để viết nên 1 jQuery plugin, ai có cách xử lý code ở level cao hơn nữa thì comment dưới để mọi người cùng học tập nhé.