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

本文最后更新于 2019-06-27 13:49:25 并被添加「js jq jquery插件」标签，已有 3351 位童鞋阅读过。

本文作者：未来往事

本文链接：https://felixway.cn/post/636.html

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

未来往事

相关文章

此处评论已关闭