【你也能从零基础学会网站开发】Web建站之jQuery进阶篇 jQuery自定义插件应用开发

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

jQuery插件开发

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

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

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

jQuery.foo = function() {    
alert('This is a test. This is only a test.');   
};  

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

jQuery.foo = function() {    alert('This is a test. This is only a test.');   
};   
jQuery.bar = function(param) {    alert('This function takes a parameter, which is "' + param + '".'); 
};    

调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者 $.foo(); $.bar('bar');

使用jQuery.extend(object)

先看以下代码:

jQuery.extend({       foo: function() {       alert('This is a test. This is only a test.');       },       bar: function(param) {  alert('This function takes a parameter, which is "' + param +'".'); }      
}); 

使用命名空间

虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。

但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间!

例如:

jQuery.myPlugin = {           foo:function() {           alert('This is a test. This is only a test.');           },           bar:function(param) {           alert('This function takes a parameter, which is "' + param + '".');     }          
};   
//采用命名空间的函数仍然是全局函数,调用时采用的方法:   
$.myPlugin.foo();          
$.myPlugin.bar('baz');  

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

对象级别的插件开发

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

形式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引起冲突!

这是一个单一插件的脚本。
如果你的脚本中包含多个插件,或者互逆的插件

例如: $.fn.doSomething() $.fn.undoSomething()),那么你需要声明多个函数名字。

但是,通常当我们编写一个插件时,力求仅使用一个名字来包含它的所有内容。

我们的示例插件命名为highlight

$.fn.hilight = function() {     // Our plugin implementation code goes here.     
};     
我们的插件通过这样被调用:   
$('#myDiv').hilight();   

分析

但是如果我们需要分解我们的实现代码为多个函数该怎么办?

有很多原因:设计上的需要;这样做更容易或更易读的实现;而且这样更符合面向对象。

这真是一个麻烦事,把功能实现分解成多个函数而不增加多余的命名空间。

出于认识到和利用函数是javascript中最基本的类对象,我们可以这样做。

就像其他对象一样,函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象,任何其他的属性或者函数我们需要暴露出来的,都可以在"hilight" 函数中被声明属性.

控制插件的行为

让我们为我们的插件添加功能指定前景色和背景色的功能。

我们也许会让选项像一个options对象传递给插件函数。

例如:

// plugin definition     
$.fn.hilight = function(options) {     var defaults = {     foreground: 'red',     background: 'yellow'     };     // Extend our default options with those provided.     var opts = $.extend(defaults, options);     // Our plugin implementation code goes here.     
};     
我们的插件可以这样被调用:   
$('#myDiv').hilight({     foreground: 'blue'     
});  

暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。

例如

// plugin definition     
$.fn.hilight = function(options) {     // Extend our default options with those provided.     // Note that the first arg to extend is an empty object -     // this is to keep from overriding our "defaults" object.     var opts = $.extend({}, $.fn.hilight.defaults, options);     // Our plugin implementation code goes here.     
};     
// plugin defaults - added as a property on our plugin function     
$.fn.hilight.defaults = {     foreground: 'red',     background: 'yellow'     
};      
现在使用者可以包含像这样的一行在他们的脚本里:   
//这个只需要调用一次,且不一定要在ready块中调用   
$.fn.hilight.defaults.foreground = 'blue';     
接下来我们可以像这样使用插件的方法,结果它设置蓝色的前景色:   
$('#myDiv').hilight();   

如你所见,我们允许使用者写一行代码在插件的默认前景色。
而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值:

覆盖插件缺省的背景颜色

$.fn.hilight.defaults.foreground = 'blue';  

使用一个新的缺省设置调用插件

$('.hilightDiv').hilight();  

// 通过传递配置参数给插件方法来覆盖缺省设置

$('#green').hilight({  foreground: 'green'  
});   

适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件(同时让其他人扩展你的插件)

我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。
我们的插件现在看起来像这样,默认的format方法的实现部分在hiligth函数下面。

例如

// plugin definition     
$.fn.hilight = function(options) {     // iterate and reformat each matched element     return this.each(function() {     var $this = $(this);     // ...     var markup = $this.html();     // call our format function     markup = $.fn.hilight.format(markup);     $this.html(markup);     });     
};     
// define our format function     
$.fn.hilight.format = function(txt) {     
return '<strong>' + txt + '</strong>';     
};  

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。

这是另外一个出色的方法来修改你的插件。

这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧,是其他人能够传递他们自己设置来覆盖你的插件,换句话说,这样其他人也能够为你的插件写插件。

考虑到这个篇文章中我们建立的无用的插件,你也许想知道究竟什么时候这些会有用。

一个真实的例子是Cycle插件.这个Cycle插件是一个滑动显示插件,他能支持许多内部变换作用到滚动,滑动,渐变消失等。但是实际上,没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。

Cycle插件对使用者暴露"transitions"对象,使他们添加自己变换定义。
插件中定义就像这样:

$.fn.cycle.transitions = {  
// ...  
};  

这个技巧使其他人能定义和传递变换设置到Cycle插件。

保持私有函数的私有性

这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。

一但被暴露,你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。

一个通理是,如果你不能肯定是否暴露特定的函数,那么你也许不需要那样做。
那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢?这就是闭包的功能。

为了演示,我们将会添加另外一个“debug”函数到我们的插件中。

这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包,我们将包装整个插件定义在一个函数中。

例如

(function($) {     // plugin definition     $.fn.hilight = function(options) {     debug(this);     };     // private function for debugging     function debug($obj) {     if (window.console && window.console.log)     window.console.log('hilight selection count: ' + $obj.size());     };     
})(jQuery); 

我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。

总结

jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object); 给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);
fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {   
init: function( selector, context ) {//....    
//......   
};    

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1”) 会生成一个 jQuery类的实例。
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。

jQuery类的实例可以使用这个“成员函数”。

//比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({         alertWhileClick:function(){        $(this).click(function(){       alert($(this).val());        });        }        
}); 

$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend(object);  为jQuery类添加添加类方法,可以理解为添加静态方法。

$.extend({   add:function(a,b){return a+b;}   
});   

便为 jQuery 添加一个为 add 的静态方法 之后便可以在引入 jQuery 的地方,
使用这个方法了,比如: $.add(3,4); //return 7

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/279196.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙API9+axios封装一个通用工具类

使用方式&#xff1a; 打开Harmony第三方工具仓&#xff0c;找到axios&#xff0c;如图&#xff1a; 第三方工具仓网址&#xff1a;https://ohpm.openharmony.cn/#/cn/home 在你的项目执行命令&#xff1a;ohpm install ohos/axios 前提是你已经装好了ohpm &#xff0c;如果没…

chatgpt大模型基础学习

chatgpt大模型基础学习 1. 吴恩达提示工程2. 大模型说的token是什么 1. 吴恩达提示工程 知乎 https://zhuanlan.zhihu.com/p/626290417?utm_id0 中文版 https://mp.weixin.qq.com/s?__bizMzkwMjQ5MzExMg&mid2247483714&idx1&sn5e905f5ec6196f6dc2187db2a8618f02&…

快速从0-1完成聊天室开发——环信ChatroomUIKit功能详解

聊天室是当下泛娱乐社交应用中最经典的玩法&#xff0c;通过调用环信的 IM SDK 接口&#xff0c;可以快速创建聊天室。如果想根据自己业务需求对聊天室应用的 UI界面、弹幕消息、礼物打赏系统等进行自定义设计&#xff0c;最高效的方式则是使用环信的 ChatroomUIKit 。 文档地址…

母亲的奶牛(bfs)

农夫约翰有三个容量分别为 A , B , C A,B,C A,B,C 升的挤奶桶。 最开始桶 A A A 和桶 B B B 都是空的&#xff0c;而桶 C C C 里装满了牛奶。 有时&#xff0c;约翰会将牛奶从一个桶倒到另一个桶中&#xff0c;直到被倒入牛奶的桶满了或者倒出牛奶的桶空了为止。 这一过…

基于YOLOv8的火焰烟雾实时检测系统【训练和系统源码+Pyside6+数据集+包运行】

✨目录 一、系统概述和展示&#x1f384;1.1 摘要 &#x1f388; 二、一站式使用教程&#x1f384;三、YOLOv8原理剖析&#x1f384;3.1 YOLOv8背景和技术原理&#x1f388; 四、模型训练、评估和推理&#x1f384;4.1 数据集介绍&#x1f388;4.2 模型训练&#x1f388;4.3 结…

【Swing】Java Swing实现省市区选择编辑器

【Swing】Java Swing实现省市区选择编辑器 1.需求描述2.需求实现3.效果展示 系统&#xff1a;Win10 JDK&#xff1a;1.8.0_351 IDEA&#xff1a;2022.3.3 1.需求描述 在公司的一个 Swing 的项目上需要实现一个选择省市区的编辑器&#xff0c;这还是第一次做这种编辑器&#xf…

慢sql优化

1.避免使用select *&#xff0c;而是明确列出需要的列&#xff0c; 2.小表驱动大表&#xff0c;in适用于左边大表&#xff0c;右边小表。 exists适用于左边小表&#xff0c;右边大表。 3.批量操作&#xff1a;如果每次插入数据库数据&#xff0c;都要连接一次数据库&#xf…

Java-SpringAop 编程式事物实现

SpringAop 编程式事物实现 1. 数据库事物特性 原子性 多个数据库操作是不可分割的&#xff0c;只有所有的操作都执行成功&#xff0c;事物才能被提交&#xff1b;只要有一个操作执行失败&#xff0c;那么所有的操作都要回滚&#xff0c;数据库状态必须回复到操作之前的状态 …

linux 安装常用软件

文件传输工具 sudo yum install –y lrzsz vim编辑器 sudo yum install -y vimDNS 查询 sudo yum install bind-utils用法可以参考文章 《掌握 DNS 查询技巧&#xff0c;dig 命令基本用法》 net-tools包 yum install net-tools -y简单用法&#xff1a; # 查看端口占用情况…

实现HBase表和RDB表的转化(附Java源码资源)

实现HBase表和RDB表的转化 一、引入 转化为HBase表的三大来源&#xff1a;RDB Table、Client API、Files 如何构造通用性的代码模板实现向HBase表的转换&#xff0c;是一个值得考虑的问题。这篇文章着重讲解RDB表向HBase表的转换。 首先&#xff0c;我们需要分别构造rdb和hba…

ModbusTCP转Profinet网关高低字节交换切换

背景&#xff1a;在现场设备与设备通迅之间通常涉及到从一种字节序&#xff08;大端或小端&#xff09;转换到另一种字节序。大端字节序是指高位字节存储在高地址处&#xff0c;而小端字节序是指低位字节存储在低地址处。在不动原有程序而又不想或不能添加程序下可选用ModbusTC…

一种动态联动的实现方法

安防领域中的联动规则 有安防领域相关的开发经历的人知道&#xff0c;IPCamera可以配置使能“侦测”功能&#xff0c;并且指定仅针对图像传感器的某个区载进行侦测。除了基本的“移动侦测"外&#xff0c;侦测的功能点还有细化的类别&#xff0c;如人员侦测、车辆侦测、烟…

Springboot+Redis:实现缓存 减少对数据库的压力

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏Redis实战与进阶 本专栏讲解Redis从原理到实践 …

nmcli --help(nmcli -h)nmcli文档、nmcli手册

文章目录 nmcli --helpOPTION解释OBJECT解释1. g[eneral]&#xff1a;查看NetworkManager的状态2. n[etworking]&#xff1a;启用或禁用网络3. r[adio]&#xff1a;查看无线电状态&#xff08;例如&#xff0c;Wi-Fi&#xff09;4. c[onnection]&#xff1a;列出所有的网络连接…

【Linux】进程优先级

&#x1f30e;进程的优先级 文章目录&#xff1a; 进程状态 优先级相关       什么是优先级       为什么要有优先级       进程的优先级 调整进程优先级       调整优先级       优先级极限测试 Linux的调度与切换 总结 前言&#xff1a; 进程…

Apache Doris 2.1 核心特性 Variant 数据类型技术深度解析

在最新发布的 Apache Doris 2.1 新版本中&#xff0c;我们引入了全新的数据类型 Variant&#xff0c;对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列&#xff0c;彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。为了让大家快速…

MATLAB图形绘制

一&#xff0c;二维图像绘制 最基础的二维图形绘制方法&#xff1a;plot -plot命令自动打开一个图形窗口Figure;用直线连接相邻两数据点来绘制图形 -根据图形坐标大小自动缩扩坐标轴&#xff0c;将数据标尺及单位标注自动加到两个坐标轴上&#xff0c;可自定坐标 轴&#x…

group by和min、max函数一起使用

原始数据 查询每科的最高分数 -- 查询每科最高分数 select stuId,classId,stuName,max(score) from student_score group by classId 错误的结果 这个显然不是对的&#xff0c;或者说不是我们想要的结果&#xff0c; 我们想要的结果是 原因是什么呢&#xff1f;我们知道使用…

AtomoVideo:AIGC赋能下的电商视频动效生成

✍&#x1f3fb; 本文作者&#xff1a;凌潼、依竹、桅桔、逾溪 1. 概述 当今电商领域&#xff0c;内容营销的形式正日趋多样化&#xff0c;视频内容以其生动鲜明的视觉体验和迅捷高效的信息传播能力&#xff0c;为商家创造了新的机遇。消费者对视频内容的偏好驱动了视频创意供给…

我的自建博客之旅04之Halo

我的自建博客之旅04之Halo Halo是我无意间发现的一款博客框架,如果你讨厌Hexo,Vuepress等静态框架本地编辑,构建部署等方式,如果你想要一款一次搭建,前台是博客,后台是文章维护,并且支持各种定制化折腾的博客框架,可能Halo会比较适合你。 因为我个人还是比较偏技术,…