JQ

开发 JQuery插件

 
jquery的插件机制
 
为了方便用户创建插件,jquery提供了$.extend()和$.fn.extend()方法。
$.extend(object) ,用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法.
例如 jquery内置的 ajax方法都是用$.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式。
 
$.extend({
minValue: function (a, b) {
// 比较两个值,返回最小值
return a < b ? a : b;
}
});
//调用
var i = 100; j = 101;
var min_value = $.minValue(i, j); // min_value 等于 100

$.extend([deep], target, object1, [objectN]);
用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
参数

deep:可选。如果设为true,则递归合并。
target:待修改对象,如果不指定target,则给jQuery命名空间本身进行扩展。
obj1:待合并到第一个对象的对象
objectN:可选。待合并到第一个对象的对象。

例:
var obj1 = { a: false, b: 1, c: "abc" };
var obj2 = { a: true, c: "def" };
$.extend(obj1, obj2);
// 输出 obj1 = { a: true, b: 1, c: "def" }

var opts = $.extend({}, defaluts, options);
// 用自定义插件参数去覆盖插件的默认参数

$.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
 
$.fn = $.prototype = {
   init: function( selector, context ) {.....};
};

原来 $.fn = $.prototype,也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。
 
 
自执行的匿名函数/闭包
 
 
匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。
 
 
封装JQuery插件
 
 
 
接下来我们一起来写个 监听文本框,动态显示下拉选项 (类似搜索提示)插件
 
 
1.定一个闭包区域,防止插件”污染”
 
//闭包限定命名空间
(function ($) {
// do something
})(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery 方法,制作插件
 
//闭包限定命名空间
(function ($) {
$.fn.extend({
getAjaxOption:function(options){
// do something
}
});
})(window.jQuery);

3.给插件默认参数,实现 插件的功能
//闭包限定命名空间
 
(function ($) {
$.fn.extend({
getAjaxOption: function (options) {
var opts = $.extend({}, defaluts, options); // 使用jQuery.extend 覆盖插件默认参数
// 为body绑定事件,判断当点击别的区块,隐藏下拉选项区块
$(document).on('click',function(event){
event = window.event || event;
var target = $(event.srcElement || event.target);
var is_select = opts.container_class+' *,'+opts.container_class+','+opts.target_class+' *,'+opts.target_class;
if(!target.is(is_select)){
$(opts.container_class).hide();
}
})
return this.each(function () { // 这里的this 就是 jQuery对象,这里 return 为了支持链式调用
// 遍历所有选中的dom
var $this = $(this); // 获取当前dom 的 jQuery对象,这里的this是当前循环的dom
console.log(opts); // opts为当前所有的配置项
// 接下来,在当前dom下生成下拉选项的dom元素
$this.parent().css('position','relative');
$this.addClass(opts.target_class.slice(1))
.after('<div class="'+opts.container_class.slice(1)+'">'+
'<div class="'+opts.container_class.slice(1)+'-box">'+
'<div class="'+opts.no_data_class.slice(1)+'">'+opts.no_data_msg+'</div>'+
'</div>'+
'</div>');
});
}
});
//默认参数
var defaluts = {
container_class:'.container-options', // 下拉选项容器class
target_class:'.ajaxOptionThis', // 当前dom的标识class
option_class:'.item', // 生成的下拉选项的class
no_data_class:'.no-data', // 无数据时对应项的class
no_data_msg:'未找到相关数据', // 无数据时对应项显示的文字信息
ajax_url:'******', // 请求的地址
ajax_type:'get', // 请求的类型
ajax_data:{ // 请求的额外参数
city : 'zg',
page : 1
},
ajax_keyword_name:'kw', // 请求的关键词的name值,value值固定为当前文本框的值
};
})(window.jQuery);

5.插件私有方法
有些时候,我们的插件需要一些私有方法,不能被外界访问。
 
//私有方法,检测用户传进来的参数是否合法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}

6.公共方法 给别人来扩展你的插件 或者 返回一些回调api
 
// 公共方法
// 当点击了选项后的回调函数,$this为当前输入框,that为当前点击的选项,opts为插件的配置项集合
$.fn.getAjaxOption.clickCallback = function ($this,that,opts) {}
// 当ajax返回成功后执行的回调函数,$this为当前输入框,response为后端返回的数据,opts为插件的配置项集合
$.fn.getAjaxOption.successCallback = function ($this,response,opts) {}

完整的插件代码如下:
 
<style>
.container-options{position:absolute;min-width:100%;left:0;background:#fff;z-index:1;display:none}
.container-options .container-options-box{margin-top:-1px;border:1px solid #ccc;max-height:150px;overflow:auto}
.container-options .item,.container-options .no-data{text-align:center;transition:all .3s;cursor:pointer;line-height:1;padding:8px 0;text-align:center}
.container-options .item:hover{color:#fff;background:#eb6120}
.container-options .no-data{display:none}
</style>

(function ($) {
$.fn.extend({
getAjaxOption: function (options) {
//检测用户传进来的参数是否合法
if (!isValid(options)) return this;
var opts = $.extend({}, defaluts, options);
$(document).on('click',function(event){
event = window.event || event;
var target = $(event.srcElement || event.target);
var is_select = opts.container_class+' *,'+opts.container_class+','+opts.target_class+' *,'+opts.target_class;
if(!target.is(is_select)){
$(opts.container_class).hide();
}
})
return this.each(function () {
var $this = $(this);
$this.parent().css('position','relative');
$this.addClass(opts.target_class.slice(1))
.after('<div class="'+opts.container_class.slice(1)+'">'+
'<div class="'+opts.container_class.slice(1)+'-box">'+
'<div class="'+opts.no_data_class.slice(1)+'">'+opts.no_data_msg+'</div>'+
'</div>'+
'</div>');
// 为当前输入框绑定 事件监听,动态获取值
$this.on('input',function(){
var data = {};
data[opts.ajax_keyword_name] = $.trim($this.val());
data = $.extend({}, opts.ajax_data, data);
if( data[opts.ajax_keyword_name].length <=0 ){ return false; }
$.ajax({
type:opts.ajax_type,
url :opts.ajax_url,
data: data,
success: function(response){
$.fn.getAjaxOption.successCallback($this,response,opts);
}
});
})
// 为下拉选项的每一项绑定click事件
$(opts.container_class).on('click',opts.option_class,function(){
$.fn.getAjaxOption.clickCallback($this,this,opts);
})
});
}
});
//默认参数
var defaluts = {
// 容器dom
container_class:'.container-options',
target_class:'.ajaxOptionThis',
option_class:'.item',
no_data_class:'.no-data',
no_data_msg:'未找到相关数据',
ajax_url:'*****',
ajax_type:'get',
ajax_data:{
city : 'zg',
page : 1
},
ajax_keyword_name:'kw',
};
//公共方法
$.fn.getAjaxOption.clickCallback = function ($this,that,opts) {
$this.val($(that).text());
$(opts.container_class).hide();
}
$.fn.getAjaxOption.successCallback = function ($this,response,opts) {
$(opts.container_class).show().find(opts.option_class).remove();
if(response.data == "no result"){
$('.no-data',opts.container_class).show();
}else{
$('.no-data',opts.container_class).hide();
var list = '';
for (var i=0; i<response.data.list.length; i++){
list += '<div class="'+opts.option_class.slice(1)+'" data-id="'+response.data.list[i].id+'">'+response.data.list[i].name+'</div>';
}
$(opts.container_class+'-box').append(list);
}
}
//私有方法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
})(window.jQuery);

 
 

1 个评论

赞!

要回复文章请先登录注册