jQuery 已經(jīng)是現(xiàn)在 Front-End 開發(fā)必備工具锋谐，本文將介紹如何為 jQuery 編寫一個 ColorButton 插件。
本文涉及:
- jQuery plugin 基本結(jié)構(gòu)
- 編寫一個簡單的 plugin
- 引入封裝，完成
ColorButton - 為 plugin 編寫 Unit Test
編寫 jQuery 基本結(jié)構(gòu)
- 創(chuàng)建
plugin代碼 - 為
plugin添加方法 - 將
plugin注冊到 jQuery
(function($) {
// 1. 創(chuàng)建 plugin 代碼
var ColorButton = function($select, options) {
// 初始化
this.$el = $select
this.settings = $.extend({
// 默認(rèn)參數(shù)
}, options || {});
// binding 事件
};
// 2. 為 plugin 添加方法
$.extend(ColorButton.prototype, {
// 這里定義方法
});
// 3. 將 plugin 綁定到 jQuery
$.fn.colorbutton = function(options) {
return this.each(function() {
var $select = $(this)
if (!$select.data('colorbutton')) {
$select.data('colorbutton', new ColorButton($select, options));
}
});
};
})(jQuery);
// 使用
$('.color-button').colorbutton();
JSFildder 代碼: https://jsfiddle.net/lvjian700/kn6qvmcz/1/
編寫一個簡單的 plugin
這里按照上述模板代碼做一個最小的插件：
- 將
ColorButton綁定到 button 上 - 當(dāng)點擊 button 時逾一，在控制臺輸出
clicked
// 1. 創(chuàng)建 plugin 代碼
var ColorButton = function($select, options) {
// 組建初始化代碼
this.$el = $select
this.settings = $.extend({
// 默認(rèn)參數(shù)
}, options || {});
// binding 事件
this.$el.click(function() {
console.log('clicked');
});
};
JSFildder 上的完整代碼：https://jsfiddle.net/lvjian700/kn6qvmcz/2/
引入封裝梯澜，完成 ColorButton
上篇我們在 plugin 初始化時進(jìn)行了事件綁定。現(xiàn)在我們實現(xiàn) ColorButton 的功能枕赵。當(dāng)用戶點擊 ColorButton 時改變 button 的背景色猜欺。
步驟:
- 接收參數(shù)，提供 colors 選項拷窜，并且為 colors 提供默認(rèn)參數(shù)
- 提供
getColor方法提供當(dāng)前的背景色 - 提供
changeColor方法改變顏色 - 將
changeColor班定到click事件
var ColorButton = function($select, options) {
this.$el = $select;
this.colorIndex = 0;
// 1. 接收參數(shù)开皿，提供 colors 選項，并且為 colors 提供默認(rèn)參數(shù)
this.settings = $.extend({
colors: ['#ff0', '#f0f', '#0ff']
}, options || {});
var that = this;
this.$el.click(function(e) {
e.preventDefault();
// 4. 將 changeColor 綁定到 click 事件
that.changeColor();
});
};
$.extend(ColorButton.prototype, {
// 3. 提供 changeColor 方法改變顏色
changeColor: function() {
this.$el.css({ backgroundColor: this.getColor() });
},
// 2. 提供 getColor 方法提供當(dāng)前的背景色
getColor: function() {
var currentIndex = this.colorIndex;
this.colorIndex = (this.colorIndex + 1) % this.settings.colors.length;
return this.settings.colors[currentIndex];
}
});
JSFildder 上的完整代碼：https://jsfiddle.net/lvjian700/kn6qvmcz/3/
為 plugin 編寫 Unit Test
Web 開發(fā)中我們一般使用 Cucumber 和 Capybara 對 UI 進(jìn)行測試篮昧。這個層級的測試屬于 UI Automattion Test赋荆，也可稱為 Acceptance Test。這類測試運行成本比較高懊昨。
所以這里采用 Unit Test 方式對 plugin 進(jìn)行測試窄潭。
工具:
- mocha：提供類 RSpec 風(fēng)格的 Test Case
- chai： 提供 assertion 和 matchers
- chai-jquery：提供更好用的 assertion
更好的工具，但是本文沒有使用：
如果你用的 Rails，可以使用 teaspoon 來運行測試幽污。
編寫測試的基本結(jié)構(gòu)：
describe('ColorButton', function () {
beforeEach(function() {
// 加載 fixture
// 初始化 plugin
});
afterEach(function() {
// remove fixture
});
describe('描述 Context', function() {
beforeEach(function() {
// 準(zhǔn)備 Context
});
it('assertion 描述', function() {
// 我們期待 ...
});
});
// 更多 Context ...
});
對 ColorButton 的測試：
describe('ColorButton', function () {
beforeEach(function() {
$('body').append('<a id="color-button" href="#">Button</a>');
$('#color-button').colorbutton({
colors: ['#ff0', '#f0f']
});
});
afterEach(function() {
$('#color-button').remove();
});
describe('when click button once', function() {
beforeEach(function() {
$('#color-button').click();
});
it('should change button color', function() {
expect($('#color-button')).to.have.css('backgroundColor', 'rgb(255, 255, 0)')
});
});
// 更多 Context ...
});
完整的代碼：https://github.com/lvjian700/color-button嚷辅，參考 readme 即可運行測試。
寫在最后
如果你的項目只想用簡單的 jQuery 并不想使用類似 Backbone.js油挥、Angular.js潦蝇、React.js 的框架，使用 jQuery plugin 模塊化 UI 組建也是一個不錯的選擇深寥。
