jQuery插件開發

/*jQuery插件開發*/
;(function($,window,document,underfined){
	/*對象*/
	DivEle = {
		"name" : "divEle",
		"config" : "",
		/*改變顏色的方法*/
		"hangeColor" : function(ele,config){
			this.config = config;
			ele.css({
				"left": this.config.left,
				"top" : this.config.top,
				"zIndex" : this.config.zIndex,
				"color" : this.config.color,
				"font-size" : this.config.fontSize,
				"position" : this.config.position
			});
		}
	};
	
	/*插件名稱*/
	$.fn.chanColor = function(config){
		config = $.extend({}, $.fn.chanColor.defaults, config);
		DivEle.hangeColor(this,config);
		//返回this,支持鏈式操做
		return this;
	};
	/*默認配置*/
	$.fn.chanColor.defaults = {
		"left": "0",
		"top" : "0",
		"zIndex" : 600,
		"color" : "#333",
		"fontSize" : "12px",
		"position" : "fixed"
	};
	
})(jQuery,window,document);

/*插件使用*/
$(function(){
	if($.fn.chanColor){
		$("#aa").chanColor({"left":"100px","top":"100px","fontSize":"20px","color":"red"}).css("font-size","25px");
	}
});

書寫方式二:

/* 依賴於jquery */
;(function($,window,document,undefined){
	/**
	 * 提供項目中重複的元素
	 * 1. addBtn 動態生成表頭按鈕
	 * 2. createSelectOption 動態建立select元素下面的option
	 */
	//工具類構造函數
	var FXUtils =  function(ele, opt){
		this.$element = ele,
		this.defaults = {
		  'color': 'red',
		  'fontSize': '12px',
		  'textDecoration': 'none'
		},
		this.options = $.extend({}, this.defaults, opt)
	}
	//工具類方法擴展
	FXUtils.prototype =  {
		/**
		* @author 柴建鋒
		* @param data : 須要傳入的數組: 示例:[{text: '增長',class:'', onClick:'addLayer(\"insert\")',iClass:''}]
		*		 text: 按鈕的文本
		*		 class: 按鈕的樣式
		*		 onClick : 按鈕點擊的動做
		*		 iClass: 按鈕上小圖標的樣式 參考: http://www.bootcss.com/p/font-awesome/
		* @result 多個按鈕元素
		* @description 動態生成表頭按鈕
		*/
		addBtn : function(data){
			//本類對象
			var eThis = this;

			if(data && $.isArray(data) && data.length>0){
				//建立元素節點
				var btnHtml = document.createElement('div');
				$.each(data,function(i,e){
					//調用建立按鈕的函數,添加到元素節點
					btnHtml.appendChild(eThis.createBtn(e));
				});
				return $(btnHtml).html();
			}else{
				return '請修改參數格式 : [{text:"增長",class:"btn btn-sm"}]';
			}
			
			return eThis;
		},
		/**
		 * @author 柴建鋒
		 * @update
		 * @param JSON json
		 * @return 單個button元素
		 * @version v1.0
		 * @description 生成button元素
		 */
		createBtn : function(json){
			if(json){
				//建立按鈕元素
				var btn = document.createElement("button");
				//給元素設置屬性
				$(btn).css({'marginRight':'6px'}); //設置默認的style
				$(btn).attr({'class':'btn btn-sm btn-primary'});//設置默認的class
				//設置小圖標
				var iEle = document.createElement("i");
				$.each(json,function(k,v){
					if(k == 'text'){
						$(btn).text(' '+v);
					}else if(k == 'iClass'){
						$(btn).prepend($(iEle).attr("class",v));
					}else{
						$(btn).attr(k,v)
					}
				});
				return $(btn).get(0);
			}else{
				return '';
			}
		},
		/**
		 * @author 柴建鋒
		 * @create 2017-08-11
		 * @update
		 * @param  string selecteId : 要掛載的selecte元素的id
		 * 		   string data      : 格式: [{name=人事部,value=1,selected=false},{name=客服部,value=2,selected=true},{name=開發部,value=3,selected=false}]
		 * @return
		 * @version v1.0
		 * @description 動態建立select元素下面的option
		 */
		createSelectOption : function(selectId,data){
			//本類對象
			var eThis = this;

			if(selectId && data){
				data = this.changeDataToJson(data);
				if($.isArray(data) && data.length>0){
					var selectEle = $('#'+selectId).get(0);
					var optionEle;
					$.each(data,function(i,e){
						optionEle = document.createElement('option');
						$.each(e,function(k,v){
							if(k.toLowerCase()=='name'){
								$(optionEle).text(v);
							}if(k.toLowerCase()=='id'){
								$(optionEle).attr('value',v);
							}else{
								$(optionEle).attr(k,v);
							}
						});
						selectEle.appendChild(optionEle);
					});
				}
			}
			
			return eThis;
		},
		/**
		 * @author 柴建鋒
		 * @create 2017-08-11
		 * @update
		 * @param  string data 格式: [{name=人事部,value=1,selected=false},{name=客服部,value=2,selected=true},{name=開發部,value=3,selected=false}]
		 * @return JSON對象
		 * @version v1.0
		 * @description 轉換後臺數據爲JSON對象
		 */
		changeDataToJson : function (data){
			data = data.replace(/\{/ig,'\{\"');
			data = data.replace(/\}/ig,'\"\}');
			data = data.replace(/=/ig,'\":\"');
			data = data.replace(/\s{0,}\,\s{0,}/ig,'\"\,\"');
			data = data.replace(/\}\"\,\"\{/ig , '\}\,\{');
			return JSON.parse(data);
		},

		addOptionValue : function(id,data){
			var eThis = this;
			if(id && data && $.isArray(data) && data.length>0){
				var optionEle = null;
				$.each(data,function(i,e){
					var description = e.description;
					if(i==0){
						var optionEleDefault = document.createElement('option');
						$(optionEleDefault).text(description.substring(0,description.indexOf('\>')));
						$('#'+id).append(optionEleDefault);
					}
					optionEle = document.createElement('option');
					$(optionEle).attr('value',e.value);
					$(optionEle).text(e.name);
					$(optionEle).attr('selected',e.selected);
					$('#'+id).append(optionEle);
				});
			}
			return eThis;
		}


	};
	
	//在插件中使用FXUtils對象
	$.fn.fXUtils = function(options) {
		//建立Beautifier的實體
		var fXUtils = new FXUtils(this, options);
		//返回實體
		return fXUtils;
	}
	
	//掛到window對象上
	window.FXUtils = FXUtils;

})(jQuery,window,document);

//使用封裝的插件
$(function(){
	//插件方法使用
	var fxUtils = $(document).fXUtils();
	
	//window對象使用
	//var fxUtils = new FXUtils();
		
	$.getJSON('data.json',function(d){
		fxUtils.addOptionValue('jiesuan',d);
	});

	$.getJSON('data1.json',function(d){
		fxUtils.addOptionValue('bizhi',d);
	});
});

書寫方式三: JSON對象

/* 依賴於jquery */
;(function($,window,document,undefined){
	
	var DivElement = {};
	DivElement.defaults = {
		name : 'admin',
		age : 25
	};
	DivElement.methods = {
		sayHello : function(){
			console.log(111);
		}
	}
	
	window.divElement = DivElement;
	
})(jQuery,window,document);

//使用封裝的插件
$(function(){
	divElement.methods.sayHello();
});