jquery插件分类与编写详细讲解
jquery插件分类与编写详细讲解
1. 插件种类
插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率。
jQeury主要有2种类型
1)实例对象方法插件
开发能让所有的jquery实例对象都可以调用的方法。也就是说,只要通过$()工厂获得 的jquery实例对象,都可以调用我们开发的方法。95%的插件都是这种类型
2)全局函数插件
可以将独立的函数添加到jQuery命名空间中了。那么调用的时候就可以使用 $.函数名 称() 或者jQuery.函数名称()来调用了。可以理解为静态方法。
2. 添加全局函数
我们可以将jquery理解为类,$是这个类的别名。开发全局函数就是开发这个类的 静态方法。如:$.get() ,$.post()。添加新的全局函数,实际上就是扩展jQuery“类”本身, 给jQuery命名空间上添砖加瓦. 加入新添加的全局函数的名称是sayHello,功能是弹出一个hello的对话框.
2.1增加一个全局函数
1 jQuery.sayHello=function(name){
2 alert("你好,"+name);
3 }
4 调用:
5 $.sayHello('张三');
6 或者
7 jQuery.sayHello("李四");
2.2增加多个全局函数
使用jQuery提供的全局函数extend来一次加入多个函数
1 jQuery.extend({
2 sayHello:function(name){
3 alert("你好"+name);
4 },
5 sayBye:function(name){
6 alert("再见"+name);
7 }
8 }
9 )
上面的代码是往jquery命名空间中添加了两个函数sayHello和syBye,调用同上
2.3命名空间
前面的方式有可能与jQuery命名空间中的其它函数产生命名冲突的危险,也有可能 与其它jQuery插件中定义的方法重名,所以我们可以考虑将我们定义的所有的函数封装 到一个对象中去,相当于为我们的函数给了一个命名空间 代码如下:
1 jQuery.wq={
2 sayHello:function(name){
3 alert("你好"+name);
4 },
5 sayBye:function(name){
6 alert("再见"+name);
7 }
8 }
这种写法可以这样来理解: 首先我们为jQuery添加了一个wq属性,而这个属性本 身是一个对象,后面我们使用JSON来定义了一个对象,这个对象有两个方法。 所以调用就是如下形式: 调用:
1 $.wq.sayHello("王五");
2 jQuery.wq.sayBye("赵六");
注意:即使页面中包含了jQuery文件,也不应该认为简写形式”$”是始终有效的。 因为”$” 只是一个别名而已,其它的库可以重新定义这个”$” .所以在定义插件的时候, 最好使用jQuery来调用方法,或者重新定义”$”
3. 为jQuery实例对象创建新方法
对所有的jQuery实例对象中的方法进行扩展。
3.1一次定义一个方法
1 jQuery.fn.sayHello=function(){
2 alert("你好!");
3 }
4 调用:
5 $("div").sayHello();
3.2一次定义多个方法
前面一次定义一个方法太少,我们能不能一次多定义一些方法?jQuery库提供了 jQuery.fn.extend方法来一次定义多个方法
1 jQuery.fn.extend({
2 sayHello:function(){
3 alert("Hello");
4 },
5 sayBye:function(){
6 alert("Bye Bye");
7 }
8 });
可以看到extend方法的参数实际上就是一个JSON格式的对象。 调用的时候可以如下调用: $(“div”).sayHello() 和 $(“div”).sayBye();
4. 插件方法内部的this关键字说明
上面的写法相当于每一个jQuery实例都可以使用,这跟全局函数没有什么区别。而我们定义的实例方法往往是需要在特定的环境中使用的。所以我们在编写插 件方法的时候,应该考虑对象方法的环境。“this”关键字在任何插件方法内部引用的都是当前的jQuery实例对象。所以可以在this上调用任何 jQuery方法。需要注意的是:我们使用的jQuery选择符可能会选取多个元素,哪么“当前的jQuery实例”有可能是一个元素,多个元素或者零个 元素。我们必须考虑到这种情况。 如果我们使用选择器选中了多个元素,那就可以使用each()方法来迭代每个元素,在each方法内部,再使用this,这个this指的就是每个 HTML DOM 元素的引用。
5. 方法连缀
使用jQuery对象方法的时候,基本都能使用连缀的方式。那么我们使用插件的时候就必须为插件方法返回一个jQuery实例对象。
01 jQuery.fn.extend({
02 sayHello:function(){
03 alert("Hello");
04 return this;
05 },
06 sayBye:function(){
07 alert("Bye Bye");
08 return this;
09 }
10 });
6. 为插件方法定义默认值
通过使用jQuery.extend()方法,可以方便提供随时可能被传入的参数覆盖的默认值,此时对方法的调用会大致保持相同. 注意:jQuery.extend方法在API中的两个地方都有,一个在【核心】.【插件机制】中有,并且只有一个参数。一个在【工具】.【数组和对象操作】中。 注意这里我们使用的是后者,形式为: jQuery.extend(target, object1) 它的作用是将后面对象中所有的属性和方法复制到前面对象中,即将object1中的属性和方法复制到target对象中。 所以我们在定义一个插件的时候,可以使用如下方式为插件方法指定默认值:
1 jQuery.fn.sayHello=function(properties){
2 var defaults={
3 name:"张三",
4 age:20
5 };
6 jQuery.extend(defaults,properties);
7 alert("第一个参数:"+defaults.name+" 第二个参数"+defaults.age);
8 return this;
9 }
这样一来,我们就可以这样来调用了
01 $("div").sayHello({
02 name:"李四",
03 age:30
04 });
05 或者:
06 $("div").sayHello({
07 name:"王五"
08 });
09 或者:
10 $("div").sayHello({
11 age:25
12 });
7. 插件开发技巧-闭包
我们在开发插件的过程中,是将代码写在了一个js文件中,那么这个js文件中有可能会定义很多的方法或者一些变量。那么这些方法或者变量就有可能与别的 js文件中的变量或者方法冲突,那么如何将我们定义的js代码“暴露”一部分,隐藏一部分呢?也就是你虽然定义了,但是在其它地方访问不到,该暴露的暴 露,不该暴露的就藏起来,要达到这个目的,就得用到“闭包“ 那何为“闭包“?说简单点就是允许使用内部函数,即在函数中定义另外一个函数,而且内部函数可以访问在外部函数中声明的变量和其它内部函数。比如有如下定 义:
//定义A函数
1 function A(){
2 //定义B函数
3 var B=function(){
4 alert("这是B");
5 }
6 return B; //将B函数返回
7 }
8 var c=A();//此时C就是B函数
9 c();//其实就是调用B函数
可以看到,内部函数B在包含它的A函数之外执行了,这就形成了闭包。也就是B在外部函数A返回之后被执行了,而当B执行的时候它仍然可以访问A中定义的局部变量和其它内部函数。 利用闭包的特性,我们可以将我们需要暴露的方法暴露出来,比如B,又可以隐藏一些局部变量和函数,比如在A中定义变量和函数,A以外的其它函数是不能访问的,但是B是可以访问的。 其实上面的代码就是先执行A函数,得到结果,这个结果又是一个函数,然后再执行B函数即 var c=A(); c(); 既然我们的目的是想让B在A之外执行,那我们可以将代码做如下变通:
1 var C;
2 function A(){
3 var B=function(){
4 alert("这是B函数");
5 }
6 C=B;//将内部函数赋值给C
7 }
//让A函数执行,A执行之后就将B赋值给C了A();
//现在执行C,实际上就是B的执行C();
//弹出对话框 "这是B函数" 去掉中间变量c将其改写为 A()(); 这与上面的效果是一样的。
能不能让A在定义之后马上就执行呢?我们可以定义一个匿名函数 放到一对括号中,然后 再用一对小括号执行它即可:
1 var C;
2 (function(){
3 var B=function(){
4 alert("这是B函数");
5 }
6 C=B;//将内部函数赋值给C
7 })()
//现在执行C,实际上就是B的执行C(); //弹出对话框 "这是B函数" 能不能从外面传个参数进去交给函数B呢?改写代码如下:
1 (function($){
2 //这里就可以使用$符号了.....
3 //将B函数添加到JQuery的实例对象函数中
4 $.fn.B=function(){
5 alert("这是B函数");
6 }
7 })(jQuery);
这段代码被浏览器加载就会被执行,jquery作为参数传递进去交给了 $符号,所以内部就能使用$符号了,在代码中,我们使用$.fn为jQuery的实例对象添加了一个方法B,页面 上使用:
1 $(document).ready(function(){
2 $("h1").B();
3 });
执行结果 所以常见的jQuery插件都是以下这种形式: 好处就在于代码内部定义的方法外部只有插件能够访问,这样就将一些代码隐藏起来了,该 暴露的插件方法暴露在外部了。
1 (function($){
2 //插件代码
3 })(jQuery)
jquery插件分类与编写详细讲解的更多相关文章
- jQuery插件使用和写法
jQuery插件分类3中: 1.封装对象方法的插件. 2.封装全局函数的插件. 3.选择器插件. jQuery插件机制 jQuery提供了两个用于扩展jQuery功能的方法: 1.jQuery.fn. ...
- 详细图解jQuery对象,以及如何扩展jQuery插件
详细图解jQuery对象,以及如何扩展jQuery插件 早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来 ...
- 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件
早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...
- js最详细的基础,jquery 插件最全的教材
一.Js的this,{},[] this是Javascript语言的一个关键字,随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是调用的函数自己. { } 大括号 ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- jQuery插件jqplot的详细配置说明和渲染器
jQuery插件jqplot的详细配置说明和渲染器 (2012-08-23 08:57:42) 转载▼ 标签: jqplot 详细配置 渲染器 it 分类: 技术类 jQuery.jqplot插件的官 ...
- 自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- (翻译)编写属于你的jQuery插件
Writing Your Own jQuery Plugins 原文地址:http://blog.teamtreehouse.com/writing-your-own-jquery-plugins j ...
随机推荐
- codeigniter 该脚本在运行300s超时退
直接看代码, file:system/core/CodeIgniter.php /* 102 * -------------------------------------------------- ...
- 创建在SQLServer 和 Oracle的 DBLINK
dblink 当我们要跨本地数据库.訪问另外一个数据库表中的数据时,本地数据库中就必需要创建远程数据库的dblink,通过dblink本地数据库能够像訪问本地数据库一样訪问远程数据库表中的数据. 一 ...
- 七天来学习ASP.NET MVC (两)——ASP.NET MVC 数据传输
通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上.因此须要确保您是否掌握了上一节的内容. 本章的目标是在今天学习结束时利用最佳实践解决方式创建一个小型的M ...
- Notes系统安全日志
最近出现了一些不正常的操作系统,但到目前为止,只有一个粗略的验证,然而,彻底清除.对于安全日志系统中的一些总结. 1.系统登录必须先登录 该日志必须包含:登录时间.注销时间.登录ip.主机名.MAC住 ...
- 正则、grep、sed、awk
每次用到正则都要蛋疼一下,索性总结一下在这里. 正则 正則表達式主要分为基础正则和扩展正则.注意,正则和一般命令行输入的命令的通配符不同.正则仅仅使用于支持这样的表示法的工具,如:vi,grep,se ...
- Kafka项目实践
用户日志上报实时统计之编码实践 1.概述 本课程的视频教程地址:<Kafka实战项目之编码实践> 该课程我以用户实时上报日志案例为基础,带着大家去完成各个KPI的编码工作,实现生产模块. ...
- Cytoscape画图初探
Cytoscape是一个做网络图的js插件.用起来非常方便,并且非常强大.这是它的站点:点击打开链接 使用它须要导入两个文件,一个是js文件,一个是css文件.官网上下载. 这里实现了一个功能.即从后 ...
- 《R实战》读书笔记三
第二章 创建数据集 本章概要 1探索R数据结构 2使用数据编辑器 3数据导入 4数据集标注 本章所介绍内容概括例如以下. 两个方面的内容. 方面一:R数据结构 方面二:进入数据或者导入数据到数据结构 ...
- 在sd卡,创建目录和文件
在本文中,sd卡的情况下创建的文件和目录,介绍如何创建目录和文件的重点. 1. 路径问题(以下的样例是在Java中測试的,在Android中相同适用) 1.1 假设须要在目录中创建文件的目录存在,直接 ...
- STM32电源管理
(1)3时钟模式 ①睡眠模式②停止模式③待机模式 1.睡眠模式:Cortex-M3内核(理解为CPU)停止工作,CPU供电1.8V有着,周边任何执行.执行 2.停机模式:全部时钟都停止,CPU电 ...