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. git merge,rebase和*(no branch)

    上一篇:http://blog.csdn.net/xiaoputao0903/article/details/23933589,说了git的分支,相关的使用方法没说到可是仅仅要google就能搜出一大 ...

  2. ACdream 1148(莫比乌斯反演+分块)

    传送门:GCD SUM 题意:给出N,M执行如下程序:long long  ans = 0,ansx = 0,ansy = 0;for(int i = 1; i <= N; i ++)   fo ...

  3. Linux下搭建tomcat集群全记录(转)

    本文将讲述如何在Linux下搭建tomcat集群,以及搭建过程中可能的遇到的问题和解决方法.为简单起见,本文演示搭建的集群只有两个tomact节点外加一个apache组成,三者将安装在同一机器上:ap ...

  4. Java的byte数组

    今天我们讨论一下Java的byte数组.byte数组就是字节数组,每一位存一个字节.看下面程序,猜猜输出多少? package com.wjy.bytes; import java.io.File; ...

  5. cocos2d-x ios游戏开发初认识(五) CCsprite精灵类

    这次写一下精灵创建的几种类型: 一.通过文件创建: 在原有的基础上加入例如以下代码: //一.通过文件创建精灵 CCSprite *bg =CCSprite::create("map.png ...

  6. Java集合关于ArrayList

    ArrayList实现源码分析 2016-04-11 17:52 by 淮左, 207 阅读, 0 评论, 收藏, 编辑 本文将以以下几个问题来探讨ArrayList的源码实现1.ArrayList的 ...

  7. 每个线程分配一个stack,每个进程分配一个heap;heap没有结构,因此寻址慢(转)

    学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词其实有三种含义,适用于不同的场合,必须加以区分. ...

  8. tab功能菜单——使用tab之间不同的交换机div

    需求:在web实现类型的接口tab标签效应 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91eXVqaWUxMTI3/font/5a6L5L2T/fo ...

  9. POJ 3630 Phone List Trie题解

    Trie的应用题目. 本题有两个难点了: 1 动态建立Trie会超时,须要静态建立数组,然后构造树 2 推断的时候注意两种情况: 1) Tire树有133,然后插入13333556的时候.2)插入顺序 ...

  10. android4.0 USB Camera示例(五个辅助)jpg压缩

    前的最后一个 我们说,一个直接yuv变成jpg该功能 但是转换不成功 主要功能是yuv420转jpg的 根据研究发现 yuv420的序列是这种 YYYY YYYY UVUV 而yuv422的隔行扫描的 ...