感覺(jué)自己以前寫得那些jquery小插件，組織形式不是很好。看到j(luò)query官網(wǎng)有一篇關(guān)于 jquery plugin最佳實(shí)踐的文章。 覺(jué)得有所收獲，就寫了個(gè)progressbar插件來(lái)做個(gè)練習(xí)。

代碼如下，邏輯很簡(jiǎn)單：

/*** jquery progressbar plugin* author: Andrew* date: 2011-09-25* version: 1.0.0*/ ;(function($) {// all plugin method// methods 管理plugin所需要的所有方法var methods = {// 初始化進(jìn)度條init: function(options) {var opts = $.extend({}, $.fn.progressbar.settings, options);return this.each(function() {var data = $(this).data('progressbar');// check whether plugin has been initif(!data) { var percent = '0%';if(opts.value > opts.min) {percent = Math.round( (opts.value - opts.min) / (opts.max - opts.min) * 100 ) + '%'; }var $barCon = $(this).css({width: opts.width,height: opts.height}).addClass('progressbar').data('progressbar', {min: opts.min,max: opts.max,value: opts.value});var $bar = $('<div />').css({width: percent,height: opts.height}).addClass('progressbar-value').appendTo($barCon);// bind custom event with namespace '.progressbar'$barCon.bind('change.progressbar', opts.change).bind('complete.progressbar', opts.complete);}});},// 獲取最小值getMin: function() {return this.data('progressbar').min;},// 獲取最大值getMax: function() {return this.data('progressbar').max;},// 獲取當(dāng)前值getValue: function() {return this.data('progressbar').value;},// 設(shè)置當(dāng)前值setValue: function(val) {var min = methods.getMin.apply(this),max =methods.getMax.apply(this);if(val < min) val = min;if(val > max) val = max;this.data('progressbar').value = val;var percent = Math.round( (val - min) / (max - min) * 100 ) + '%'; this.find('div.progressbar-value').css('width', percent);var baseData= this.data('progressbar');var changeEvent = $.extend({}, baseData, {type: 'change.progressbar'});// 觸發(fā)change回調(diào)this.trigger(changeEvent);// 如果完成了 觸發(fā)complete回調(diào)if(val == max) {var completeEvent = $.extend({}, baseData, {type: 'complete.progressbar'});this.trigger(completeEvent);}}};// 配置項(xiàng) 或者 方法名$.fn.progressbar = function(method) {if(methods[method]) {return methods[method].apply(this, Array.prototype.slice.call( arguments, 1 ));} else if($.isPlainObject(method)) {return methods.init.apply(this, arguments);} else {$.error('progressbar plugin don not support method: ' + method + ', please check');}};// default settings $.fn.progressbar.settings = {min: 0, // 最小值max: 100, // 最大值value: 0, // 當(dāng)前值height: 30, // 進(jìn)度條的高度width: 200, // 進(jìn)度條的寬度change: function(event) {}, // 值改變時(shí)的回調(diào)complete: function(event) {} // 達(dá)到最大值時(shí)的回調(diào)}; })(jQuery);

主要是有以下幾點(diǎn)值得提一下：

• methods對(duì)象把所有plugin要用的方法都合理的組織了起來(lái)，通過(guò)一個(gè)入口函數(shù)$.fn.progressbar來(lái)處理，這樣plugin的結(jié)構(gòu)看起來(lái)就很清晰了。

• 在處理plugin event時(shí)，帶上namespace，例如像這樣：'eventName.myPluginName'，這樣就能避免一不小心與DOM的event有沖突。

• 利用jquery的data方法來(lái)保存plugin的狀態(tài)，例如判斷plugin是否已經(jīng)初始化等。

• 最后一點(diǎn)，就是防止全局作用域污染，用（function（$） { //your code })(jQuery);

以下是我的jsFiddle示例，略有改進(jìn)和更新

• 增加了start事件

• 通過(guò)animation讓進(jìn)度更平滑

轉(zhuǎn)載于:https://www.cnblogs.com/AndyWithPassion/archive/2011/09/26/jquery_progressbar_plugin.html

總結(jié)

以上是生活随笔為你收集整理的jquery插件最佳实践之progressbar的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。