jquery 插件开发的作用域及基础
2019独角兽企业重金招聘Python工程师标准>>>
之前一直有开发jquery插件的冲动,所以一直想学习如何进行插件开发,最近一个项目需要使用图片上传组件及自动无限下拉组件,百度地图组件,所以趁着这次我就把他们全部插件化了,但是在使用过程中,有一些基本的问题没有弄清楚,走了一些弯路,所以这次也总结一下:
jquery插件开发的基本格式
jquery插件开发的作用域
jquery插件开发的参数传递
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; });}
});
如果要深入理解的话,可以参见:
http://blogs.aboutit.cn/jq_1_8_3/jQuery.fn.extend.html
http://blogs.aboutit.cn/jq_1_8_3/jQuery.extend_object.html
http://www.cnblogs.com/cyStyle/archive/2013/05/18/jQuery%E6%8F%92%E4%BB%B6%E8%AF%A6%E7%BB%86%E5%BC%80%E5%8F%91.html
如果不需要绑定到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 objectvar $this = $(this);// Setup the default settingsvar settings = $.extend({id : $this.attr('id'), // The ID of the DOM objectvalue_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);
具体参考:
http://blogs.aboutit.cn/jq_1_8_3/data.html
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
jquery 插件开发的作用域及基础相关推荐
- 掌握jQuery插件开发,这篇文章就够了
2019独角兽企业重金招聘Python工程师标准>>> 在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先 ...
- 掌握jQuery插件开发
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
- 【转载】jQuery插件开发精品教程,让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
- JQuery学习使用笔记 -- JQuery插件开发
内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最 ...
- jQuery插件开发教程
jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
- jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
- jQuery插件开发(转)
jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命 ...
最新文章
- 苹果服务器消息转发,iphone-与APNS服务器进行交互以将推送通知发...
- 【转】ubuntu UltraEdit 反复试用的办法
- 上验证cudnn是否安装成功_windows和linux上的tensorflow安装(极简安装方法)
- Debug shell: Syntax error: “(“ unexpected
- VB 6.0中的数据连接模块
- c语言 数组比较不等往下累加,用C语言确定两个数组内的元素排列顺序不同,但是元素相同,代码有bug找不出?...
- JMS : Java Message Service (Java消息服务)之一 [转]
- 六种常用的物联网通信协议
- python安装sqap_python文件I/O
- include 与 Widget
- 云计算与 Cloud Native | 数人云CEO王璞@KVM分享实录
- Python 进阶 —— defaultdict
- 强名称(3)强名称的脆弱性
- 没有提取码 php云盘文件,最新百度网盘分享文件链接无需提取码的方法
- BOM 定时器+回调函数
- 【运维心得】如何一步切换企业邮箱主域名
- 【LeetCode】233. 数字 1 的个数
- MFC实现基本图形绘制、变换、自由曲线绘制、图形裁剪和填充
- ufs2.2 协议扫盲(十一)
- 查找(顺序查找、二分查找、插值查找)
热门文章
- 深入探讨PHP中的内存管理问题
- 如何用C#动态编译、执行代码
- C# Idioms: Enum还是Enum Class(枚举类)
- Visual C#创建资源文件
- Iframe 用法浅析
- 修改Linux内核参数提高服务器并发能力
- C++/C++11中头文件numeric的使用
- 【Qt】Linux上设置自启动后qApp->applicationDirPath()的返回值问题
- 【linux】Valgrind工具集详解(八):Memcheck命令行参数详解
- java微信菜单获取openid_微信二次开发点击菜单openId的获取