博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery插件开发
阅读量:5164 次
发布时间:2019-06-13

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

jQuery插件的开发包括两种:

一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发-为jQuery添加静态方法

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1 添加一个新的全局函数

添加一个全局函数,我们只需如下定义:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>              jQuery插件开发                          

1.2 增加多个全局函数

添加多个全局函数,可采用如下定义:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>              jQuery插件开发                          

1.3 使用jQuery.extend(object); 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>              jQuery插件开发                          

1.4 使用命名空间

虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>              jQuery插件开发                          

通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。

2、对象级别的插件开发-给jQuery对象添加方法

对象级别的插件开发需要如下的两种形式:、
形式1:

(function($){      $.fn.extend({         pluginName:function(opt, callback){            // Our plugin implementation code goes here.           }      })   })(jQuery);

形式2:

(function($) {        $.fn.pluginName = function() {         // Our plugin implementation code goes here.      };   })(jQuery);

上面定义了一个jQuery函数,形参是$,函数定义完成之后,把jQuery这个实参传递进去。立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突。例如:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>              jQuery插件开发                          

注意:

这里使用了闭包的方式

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

上面的代码等价于下面的代码

var jQueryFucntion=function($) {   // Code} jQueryFucntion(jQuery);

这样定义之后,很大程序上毕免了第三方的误操作,从而破坏封装性。如比较常见的场景就是防止'$'与其它js库的冲突。

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/linjiqin/p/3264400.html

你可能感兴趣的文章
Objective-c继承与组合
查看>>
转:一个Restful Api的访问控制方法(简单版)
查看>>
IIS6修改ASP上传文件200K限制
查看>>
【转】Java连接Mysql,SQL Server, Access,Oracle
查看>>
[CSS]理解line-height
查看>>
详解 Python 中的下划线命名规则
查看>>
poj1852 Ants(思维)
查看>>
jQuery Video Extend
查看>>
Apache POI XWPF 爬坑指南之二特定位置插入表格、段落、图片
查看>>
JDK7 Garbage Frist
查看>>
chapter3习题
查看>>
sed
查看>>
PowerDesigner新建CDM设置相同属性
查看>>
Magicodes.WeiChat——使用OAuth 2.0获取微信用户信息
查看>>
InfluxDB源码阅读之snapshotter服务
查看>>
day95 多线程实现并发请求
查看>>
第三题 有如下Student 对象, private String name; private int age; private int score; private S...
查看>>
【bzoj4278】[ONTAK2015]Tasowanie 贪心+后缀数组
查看>>
【bzoj4894】天赋 矩阵树定理
查看>>
一步一步学习SignalR进行实时通信_2_Persistent Connections
查看>>