jQuery插件主要有两种扩展方式
jQuery插件主要有两种扩展方式:
- 扩展全局函数方式。
- 扩展对象方法方式。
扩展全局函数方式
扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义。定义格式为:
jQuery.extend(function(){
pluginName:function(){
// 这里写实际代码
};
});
这样定义的代码将直接扩展jQuery本身,通过$.pluginName()来进行调用。
定义插件时,需要注意传入的参数。由于这时插件运行在jQuery类范围中,所以传入的参数将是页面级全局的。
扩展对象方法方式
扩展对象方法方式定义的插件,即对象级别插件,是插件中使用最广泛的定义方式。对象级别插件通过$.fn.extend或者$.fn.pluginName来进行定义。推荐使用的定义格式为:
(function($){
var defaultOptions={};
$.fn.pluginName=function(option){
var pluginMethods={
init:function(option){
var option=$.extend(defaultOptions,option);
},
methods1:function(){},
methods2:function(){}
}; if(pluginMethods[option]){
pluginMethods[option].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof option=='object'){
pluginMethods.init.apply(this,arguments);
}else{
$.error("Some error.");
}
}
})(jQuery);
这种推荐的插件定义格式可以支持$('selector').pluginName('methods1',args)格式的方法调用,同时也可以支 持$('selector').pluginName({})格式的初始化方法。pluginMethods还可以定义到$.fn.pluginName 外面,但是这样传入的参数就会变成插件级全局的,会影响页面中第二个及以后的插件的使用。所以一般可定义在$.fn.pluginName内部,可方便支 持多个位置使用插件。
通过定义$.fn.pluginName.method形式的方法,可以直接将插件中的方法暴露出来,供外部访问。此外,$.fn.pluginName的定义中的this指的是选择器所选择的对象,可以直接使用,而不用$(this)的方式。
一些常用方法的解释
Array.prototype.slice是用来将类似于数组的参数按照数组的方式切割开,其数字表示返回值从何位置开始取。
prototype中的call和apply在意义上是相同的,第一个参数的意义也是相同的,只是call的第二个参数是作为参数传入,而apply则是 将多个参数组合为一个数组传入。不论A.prototype.method.call(B)还是 A.prototype.method.apply(B),都表示将B对象看作A对象来执行method。
jQuery插件主要有两种扩展方式的更多相关文章
- jquery阻止事件的两种实现方式
再阻止事件冒泡的方面,jquery有两种方式: 一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1&qu ...
- jquery pagination分页的两种实现方式
原文链接:http://blog.csdn.net/qq_37936542/article/details/79457012 此插件是jQuery的ajax分页插件.如果你用到此插件作分页的时候,涉及 ...
- jQuery 实现图片放大两种方式
jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...
- 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
- struts2+spring的两种整合方式
也许有些人会因为学习了struts1,会以为struts2.struts1与spring的整合也是一样的,其实这两者相差甚远.下面就来讲解一下struts2与spring的整合两种方案.(部分转载,里 ...
- WDS 的两种实现方式
转自:http://blog.chinaunix.net/uid-26527046-id-3627627.html WDS 的两种实现方式 WDS(Wireless Distribution Syst ...
- Spring的两种代理方式:JDK动态代理和CGLIB动态代理
代理模式 代理模式的英文叫做Proxy或Surrogate,中文都可译为”代理“,所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对 ...
- 三,memcached服务的两种访问方式
memcached有两种访问方式,分别是使用telnet访问和使用php访问. 1,使用telnet访问memcacehd 在命令提示行输入, (1)连接memcached指令:telnet 127. ...
- 斑马打印机客户端GET和POST,以及后端两种打印方式。
斑马打印机客户端GET和POST,以及后端两种打印方式. 背景环境:打印机安装在客户端外网.当用户登录时,通过ajax取服务器数据,返回打印机命令,然后客户端通过JS发送给斑马打印机. 1.使用Get ...
随机推荐
- 菜鸟学Java(十九)——WEB项目測试好帮手,Maven+Jetty
做WEB开发,測试是一件非常费时间的事情.所以我们就应该用更简单.更快捷的方式进行測试.今天就向大家介绍一个轻量级的容器--jetty.j今天说的etty是Maven的一个插件jetty-maven- ...
- 【网络协议】TCP交互数据流和数据流成块
前言 建立在TCP协议上的应用层协议有非常多,如FTP.HTTP.Telnet等,这些协议依据数据传输的多少能够分为两类:交互数据类型和成块数据类型. 交互数据类型,如:Telnet,这类协议一般仅仅 ...
- SE 2014年4月13日
要求自治系统之间建立BGP邻居关系,AS 100 中由于配置疏忽R5上忘记启用BGP,从而导致了黑洞问题出现.从而需要网络工程师们就现状问题进行分析,并且使用相应技术进行完善,使得AS 400 和AS ...
- Django写的投票系统1(转)
当然主要是从django的帮助文档里面来的,权当是翻译吧 这个投票系统的主要功能有 1.一个前台页面,可以让用户来投票 2.一个管理员页面,可以用来添加.修改.删除投票 首页第一步要确定你已经安装了D ...
- hdu2036 (计算多边形的面积)
Input 输入数据包含多个测试实例,每个测试实例占一行,每行的开始是一个整数n(3<=n<=100),它表示多边形的边数(当然也是顶点数),然后是按照逆时针顺序给出的n个顶点的坐标(x1 ...
- [Oracle] - 性能优化工具(4) - AWRDD
AWRDD是用于比較两个AWR快照,从而获得不同一时候期的性能. 运行例如以下语句获得AWRDD: @?/rdbms/admin/awrddrpt.sql 2025 23 2月 2014 07:12 ...
- Eclipse插件基础篇一
名词翻译 有一些名词在翻译的过程中可能会出现歧义,在这里统一一下. アーキテクチャ=architecture=架构 プラットフォーム=platform=平台 コンポーネント=component=组件 ...
- jstl的小问题
jstl试了半天,终于知道错在哪里了! 这是jsp中的代码 从select中取得user_id:看清楚了 是user_id:小写第一位; <table width="50%" ...
- jQuery Fancybox插件说明
这里有jquery影像回放路径插件称为Fancybox,项目主页地址:http://fancybox.net/ Fancybox的特点例如以下: 1.能够支持图片.html文本.flash动画.ifr ...
- Java集合类汇总记录-- apache.commons4(TreeList)
通常.Tree是Tree,List是List,两者不太可能混在一起.但apache-commons库却用tree实现了实现了List的接口,也就是TreeList类.与标准的LinkedList相比. ...