感覺自己以前寫得那些jquery小插件，組織形式不是很好。看到jquery官網有一篇關于 jquery plugin最佳實踐的文章。 覺得有所收獲，就寫了個progressbar插件來做個練習。

代碼如下，邏輯很簡單：

/*** jquery progressbar plugin* author: Andrew* date: 2011-09-25* version: 1.0.0*/ ;(function($) {// all plugin method// methods 管理plugin所需要的所有方法var methods = {// 初始化進度條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;},// 獲取當前值getValue: function() {return this.data('progressbar').value;},// 設置當前值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'});// 觸發change回調this.trigger(changeEvent);// 如果完成了 觸發complete回調if(val == max) {var completeEvent = $.extend({}, baseData, {type: 'complete.progressbar'});this.trigger(completeEvent);}}};// 配置項 或者 方法名$.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, // 當前值height: 30, // 進度條的高度width: 200, // 進度條的寬度change: function(event) {}, // 值改變時的回調complete: function(event) {} // 達到最大值時的回調}; })(jQuery);

主要是有以下幾點值得提一下：

• methods對象把所有plugin要用的方法都合理的組織了起來，通過一個入口函數$.fn.progressbar來處理，這樣plugin的結構看起來就很清晰了。

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

• 利用jquery的data方法來保存plugin的狀態，例如判斷plugin是否已經初始化等。

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

以下是我的jsFiddle示例，略有改進和更新

• 增加了start事件

• 通過animation讓進度更平滑

轉載于:https://www.cnblogs.com/AndyWithPassion/archive/2011/09/26/jquery_progressbar_plugin.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。