博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 插件开发的作用域及基础
阅读量:6501 次
发布时间:2019-06-24

本文共 3434 字,大约阅读时间需要 11 分钟。

hot3.png

之前一直有开发jquery插件的冲动,所以一直想学习如何进行插件开发,最近一个项目需要使用图片上传组件及自动无限下拉组件,百度地图组件,所以趁着这次我就把他们全部插件化了,但是在使用过程中,有一些基本的问题没有弄清楚,走了一些弯路,所以这次也总结一下:

  1. jquery插件开发的基本格式

  2. jquery插件开发的作用域

  3. jquery插件开发的参数传递

  4. jquery插件开发的方法的调用

           

插件开发基本格式

jquery的插件开发有两种,一种是静态方法,一种是动态的;

静态的调用方式大致是这样的:

$.dialog("你好,这是一个弹出框");

动态的调用方法大致是:

$('#helloworld').dialog('你好,这是一个弹出框!');

可以看出,他们的所在的命名空间不同,一个不依赖dom对象,一个依赖dom对象;

第一种方式,利用jquery的extend方法:

$.extend({     hello: function() {alert("hello");} });

第二种方式,利用jquery的原型:$.fn.extend(target)

//例如:jQuery.fn.extend({  check: function() {    return this.each(function() { this.checked = true; });  },  uncheck: function() {    return this.each(function() { this.checked = false; });  }});

如果要深入理解的话,可以参见:

如果不需要绑定到dom我更倾向于第一种方式,如弹出框,弹出提示等等。

如果需要绑定的话,我一般使用下面格式:

;//加分号是为了防止压缩的时候冲突。(function($) {   //插件所有方法集合    var l_methods = {        select_dom:function(_value,settings){        },        create_select_dom : function(data, settings,_value_obj) {        },        ajaxData : function(pid,_value_obj) {        },        init : function(options) {            var default_data = [];            return this.each(function() {                // Create a reference to the jQuery DOM object                var $this = $(this);                // Setup the default settings                var settings = $.extend({                    id : $this.attr('id'), // The ID of the DOM object                    value_id : $this.attr('value-id'),                    url : 'admin/region/list_json',                    data : default_data,                    keyName : 'id',                    valueName : 'name'                }, options);                //调用插件方法。。。                // ajax 请求数据                $("#"+$this.attr("id")).link_select('ajaxData', 0);            });        }    }; //插件名称定义及方法调用    $.fn.pluginName = function(method) {        if (l_methods[method]) {            return l_methods[method].apply(this, Array.prototype.slice.call(                    arguments, 1));        } else if (typeof method === 'object' || !method) {            return l_methods.init.apply(this, arguments);        } else {            $.error('The method ' + method + ' does not exist in $.linkselect');        }    };})($);

当然,上面的格式适用于我自己;可能并不是适用于你,采用这种格式,就把一些方法暴露出去了。

jquery插件开发的作用域

下面来说说作用域,在来看看,我们前面的格式:

(function ($) {})(jQuery);

基本上是这个样的格式,这个大括号里面定义的变量,方法的作用域都只是在里面。

但是有个问题:

方法集合里面我们一般这么写:

createPrev:function(all_pic_container,$obj,_value_ids_array){            $this=$(this);}

注意里面的this,this一般指当前对象,这个方法里面指的是什么?个人理解就是调用此方法的dom对象啦,所以,你要调用这个方法的时候,请用$('#xxxx').pluginName('方法名称');这样调用。

jquery插件开发的参数传递

插件开发过程中,肯定要穿参数,

在方法暴露出去的时候,大家可以看到,参数已经传递到方法里面去了:

$.fn.link_select = function(method) {        if (l_methods[method]) {//传递参数            return l_methods[method].apply(this, Array.prototype.slice.call(                    arguments, 1));        } else if (typeof method === 'object' || !method) {            return l_methods.init.apply(this, arguments);        } else {            $.error('The method ' + method + ' does not exist in $.linkselect');        }    };

还有一种使用比较广泛的是:jquery的data函数:

$('#XXX').data("settings",settings);

具体参考:

jquery插件开发的方法的调用

如果是插件专属的方法,可以写在插件内部任何方法,在使用插件的时候都会生效,如:

;(function($) {    /**     * 依赖json.js     */    function getJsonValue($container) {    }        xxxxxx插件其他函数});

还有一种就是上面所说的调用方法啦:

把方法暴露出去:

return l_methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

转载于:https://my.oschina.net/Tonyjingzhou/blog/311779

你可能感兴趣的文章
时也,运也,命也
查看>>
javascript的offsetLeft、scrollLeft、offsetTop、scro...
查看>>
day06-基础语法了解
查看>>
PHP单态设计模式应用实例
查看>>
ORACEL学习--分析函数汇总
查看>>
windows Server 2016 网络服务 (一)
查看>>
vs打包winform应用程序
查看>>
《摔跤吧,爸爸》观后感
查看>>
干货:用技术分析致敬老牌开源社群系统—ThinkSNS
查看>>
jq表单
查看>>
在不发生滚动情况下参考目标不同而获取光标位置
查看>>
做完和做好不一样
查看>>
CheckStyle安装与使用
查看>>
facebook 相关
查看>>
C语言指针强制类型转换
查看>>
我的友情链接
查看>>
利用doc文件实现xxe
查看>>
将整个网站变灰
查看>>
WebQQ协议 3.0
查看>>
IIS服务管理器无法启动网站的解决方法
查看>>