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);
});
});

/* 依赖于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();
});