jQuery插件主要有两种扩展方式:

  1. 扩展全局函数方式。
  2. 扩展对象方法方式。

扩展全局函数方式

扩展全局函数方式定义的插件,即类级别插件,可以通过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插件主要有两种扩展方式的更多相关文章

  1. jquery阻止事件的两种实现方式

    再阻止事件冒泡的方面,jquery有两种方式: 一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1&qu ...

  2. jquery pagination分页的两种实现方式

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79457012 此插件是jQuery的ajax分页插件.如果你用到此插件作分页的时候,涉及 ...

  3. jQuery 实现图片放大两种方式

    jQuery 实现图片放大两种方式 一.利用css样式表实现,多用于后台显示 1.这种比较简单,利用dom元素的hover实现样式切换 <style> img{ cursor: point ...

  4. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  5. struts2+spring的两种整合方式

    也许有些人会因为学习了struts1,会以为struts2.struts1与spring的整合也是一样的,其实这两者相差甚远.下面就来讲解一下struts2与spring的整合两种方案.(部分转载,里 ...

  6. WDS 的两种实现方式

    转自:http://blog.chinaunix.net/uid-26527046-id-3627627.html WDS 的两种实现方式 WDS(Wireless Distribution Syst ...

  7. Spring的两种代理方式:JDK动态代理和CGLIB动态代理

    代理模式 代理模式的英文叫做Proxy或Surrogate,中文都可译为”代理“,所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对 ...

  8. 三,memcached服务的两种访问方式

    memcached有两种访问方式,分别是使用telnet访问和使用php访问. 1,使用telnet访问memcacehd 在命令提示行输入, (1)连接memcached指令:telnet 127. ...

  9. 斑马打印机客户端GET和POST,以及后端两种打印方式。

    斑马打印机客户端GET和POST,以及后端两种打印方式. 背景环境:打印机安装在客户端外网.当用户登录时,通过ajax取服务器数据,返回打印机命令,然后客户端通过JS发送给斑马打印机. 1.使用Get ...

随机推荐

  1. UVAlive 2519 Radar Installation (区间选点问题)

    Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...

  2. 每天一点儿java-button

    <pre name="code" class="java">import java.awt.*; import java.awt.event.*; ...

  3. 【POJ 1741】Tree

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 11570   Accepted: 3626 Description ...

  4. SPOJ PGCD(莫比乌斯反演)

    传送门:Primes in GCD Table 题意:给定两个数和,其中,,求为质数的有多少对?其中和的范围是. 分析:这题不能枚举质数来进行莫比乌斯反演,得预处理出∑υ(n/p)(n%p==0). ...

  5. wx_sample.php

    <?php /**   * wechat php test   */ //define your token define("TOKEN", "weixin&quo ...

  6. VC++6.0版本号程序转成VS2010版

    直接转换的时候遇到两个问题: 1.预编译头文件*.PCH找不到 2.static_cast": 无法从"void (__thiscall CView2::* )(void)&quo ...

  7. Winform通用模块之流水号生成

    打算接下来的时间里把自己觉得用起来还比较好用的通用模块,在这里向大家介绍一下,如果你有更好的想法时,也希望你不吝指点. 1.数据库表及存储过程 在介绍这个通用流水号生成的模块前,我们先来看一下其相关的 ...

  8. gcc的bug? c++模板类中友元函数的訪问权限问题

    原文地址:http://stackoverflow.com/q/23171337/3309790 在c++中,模板类中能够直接定义一个友元函数.该函数拥有訪问该模板类非public成员的权限. 比方: ...

  9. HDu 2830 Matrix Swapping II(dp)

    Problem Description Given an N * M matrix with each entry equal to 0 or 1. We can find some rectangl ...

  10. 【第四篇章-android平台MediaCodec】推断是否支持硬件解码码

    public boolean isSupportMediaCodecHardDecoder(){ boolean isHardcode = false; //读取系统配置文件/system/etc/m ...