精选文章 jq插件写法

jq插件写法

作者:xiaozhen0610 时间: 2020-08-04 05:43:58
xiaozhen0610 2020-08-04 05:43:58

如今做web开发,jQuery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用。最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 

[javascript]  view plain  copy 
  1. (function($){  
  2.     $.fn.extend({  
  3.         color:function(options){  
  4.             var defaults = {color:'blue', size: "30px"};  
  5.             options = $.extend({},defaults, options);  
  6.             return $(this).each(function(){  
  7.                 $(this).css({'color':options.color});  
  8.                 $(this).css({'font-size':options.size});  
  9.             });  
  10.         }  
  11.     });  
  12.   
  13. })(window.jQuery);//此处也可写成(jQuery);  


这里大家也许会抱怨,这根本看不懂,别急,看下去会让你明白

 

首先可以告诉大家,这个插件实现的功能是对一个标签的字体大小以及颜色设置。

下图是显示在网页上的代码:

jq插件写法1

如上的代码得到的效果如下图:

jq插件写法2

如此,大家不要疑惑,就将color()这个函数当做系统给你提供的函数即可。

在这里首先要和大家讲解自执行的匿名函数/闭包的运用

1.解释什么事闭包,下面这种形式的就是自执行的匿名函数/闭包

 

[javascript]  view plain  copy
 
  1. (function($){  
  2.     //Code  
  3. })();  

 

 

2.坑爹的报错代码

 

[javascript]  view plain  copy
 
  1. //这个代码放在javascript代码中不会报错  
  2. (function($){  
  3.     //Code  
  4. })();  
  5. //而下面的代码会报错  
  6. function($){  
  7.     //Code  
  8. }();  


3.解释表达式和函数声明

 

表达式:

 

[javascript]  view plain  copy
 
  1. (function($){  
  2.     //Code  
  3. })  

 

 

函数声明:

 

[javascript]  view plain  copy
 
  1. function($){  
  2.     //Code  
  3. }  


如此大家可以大概猜想到对象的使用方法,首先是要创建一个对象:new C()

 

其中C就是相当于(function($){//Code}),()便是后面的()了。

以上是一种理解方式, 实际情况如下:

js在"预编译"阶段, 会解释函数声明, 但却会忽略表达式。

 

JavaScript执行到function() {//Code}()d时由于function() {//code}在"预编译"阶段已经被解释过,javascript会跳过function(){//code}试图去执行()故会报错;
当javascript执行到(function {// Code})()时由于(function {// code})是表达式, javascript会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到()时, 便会被执行。

另外,函数转换为表达式的方法并不一定要靠分组操作符()我们还可以用!操作符等操作符,只要是表达一个表达式的即可。

 

如此大家大概知道插件得书写为什么要加个().

然后就是写插件得步骤了:基本格式如下

 

[javascript]  view plain  copy
 
  1. (function($){  
  2.     //插件书写部分  
  3. })(jQuery);  


接下来有两种插件书写的形式

 

一种是一个函数:$.fn.函数名 = function([options]){}

另外一种自然是可以多个函数:$.fn.extend({函数名:function(){}});

第一种真能一次搞一个函数,而第二个可以一次声明多个函数

接下来讲解$.extend()的用法

有两种

一种$.extend(defaults, options);

其中defaults为默认设置,options为传入的参数

这个函数的作用是用后面的参数与第一个参数进行合并然后返回它的值

代码实现如下:

jq插件写法3

jq插件写法4

用chrome显示的效果如下:

 

jq插件写法5

看到如上的结果,大家可能已经知道了,defaults被改变了,竟然变成了options的值,同时大家可以注意到$.extend(defaults, options)返回值是被覆盖的值

这就造成了一般的插件不会用$.extend(defaults, options)原因就是他改变了默认的值

接下来就是另外一种方法

$.extend({},defaults, options);

效果如下图:

jq插件写法6

jq插件写法7

大家可以注意到用这个函数的话不会导致defaults被替代,所以一般的插件书写是用$.extend({}, defaults, options);

至于插件得调用,很简单

$("").函数名

即可。

接下是讲解一下书写插件时的一些细节部分

看如下代码jq插件写法8

这里的return有什么作用

对于一般的插件代码,如果没有加一个return 回到一个问题:那就是只能用一次

$(".afters").color().css({})这就会报错,因为没有返回本身这个对象,所以使用完color()是没有返回值得话,那么css调用时是undefined,所以会报错,因此当我们写完插件代码时,最后要返回jQuery对象本身,否则就只能调用一次就不能调用了。

 

如果讲解有误,请大家进行纠正。

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:Windows 64位系统System32目录和SysWOW64目录的区别

下一篇:Gson:直接将String转换为JsonObject(无POJO)

您可能感兴趣

  • 莱卡TG0020-M8读卡器单片机开发

    1.1 概述 本模块属 RFID 超小型 IC(Mifare1/TypeA/14443A)卡读卡模块,可单独使用,也可二次开发。可选接口有(miniUSB 接口,RS232 串口,TTL串口),用户无须了解任何 RC523 等射频芯片的复杂控制命令,也无需了解 14443A 协议,只需将卡片靠近读卡模块感应范围即可马上读取到唯一卡片物理序列号,也可通过指令读取卡片指定扇区内容,适合门禁、停车...

  • 为什么要使用Feign

    简介: Feign是一种负载均衡的HTTP客户端, 使用Feign调用API就像调用本地方法一样,从避免了调用目标微服务时,需要不断的解析/封装json 数据的繁琐。Feign集成了Ribbon。Ribbon+eureka是面向微服务编程,而Feign是面向接口编程。 Fegin是一个声明似的web服务客户端,它使得编写web服务客户端变得更加容易。使用Fegin创建一个接口并对它进行注解。...

  • Navicat Premium for Mac(数据库管理工具)15中文版

    Navicat Premium for mac是一个可多重连接的数据库管理工具,Navicat的功能足以符合专业开发人员的所有需求,但是对数据库服务器的新手来说又相当容易学习。Navicat Premium Mac可让你以单一程序同時连接到目前世面上所有版本的主流数据库并进行管理和操作,支持的数据库有: MySQL、SQL Server、SQLite、Oracle 及 PostgreSQL。...

  • Vue自定义控件封装---操作按钮栏的封装

    做过后端管理系统的“猿们”都知道,后端界面的框架无非就是左右结构【左边是菜单栏,右边是具体业务的功能界面】。但是右边的功能界面,我们又能拆分出来一些公用的控件:搜索栏、操作按钮栏、列表【table、tree、treetable】等,今天小编大致说下自定义操作按钮栏控件的封装以及实现。 首先,在做自定义控件之前,我们要想清楚我们封装自定义控件的目的,以目标为导向去实现。(以上内容纯属片汤话儿)...

  • 工作流学习2(书本)

    1、流程引擎的创建。 1.1、ProcessEngineConfiguration的buildProcessEngine方法 使用ProcessEngineConfiguration的create方法可以得到ProcessEngineConfiguration的实例。ProcessEngineConfiguration中提供了一个buildProcessEngine方法,该方法返回一个Pro...

  • 删库一定要跑路吗?手把手教你MySQL数据恢复

    日常工作中,总会有因手抖、写错条件、写错表名、错连生产库造成的误删库表和数据的事情发生。那么,如果连数据都恢复不了,还要什么 DBA。 1 前言 数据恢复的前提的做好备份,且开启 binlog,格式为 row。如果没有备份文件,那么删掉库表后就真的删掉了,lsof 中还有记录的话,有可能恢复一部分文件。但若刚好数据库没有打开这个表文件,那就只能跑路了。如果没有开启 binlog,那么恢复数据...

  • 物联网大数据平台有哪些功能特点

      大数据技术是指从各种各样海量类型的数据中,快速获得有价值信息的能力。适用于大数据的技术,包括大规模并行处理(MPP)数据库,数据挖掘电网,分布式文件系统,分布式数据库,云计算平台,互联网,和可扩展的存储系统。   一个物联网大数据平台需要具备哪些功能?与通用的大数据平台相比,它需要具备什么样的特征呢?我们来仔细分析一下。   1.高效分布式   必须是高效的分布式系统。物联网产生的数据量...

  • 我是如何失去团队掌控的?一个技术总监的反思

    我是一个不合格的技术总监,在过去的快三个月里。我带着从40多个人的研发团队(包含需求、开发、测试)里抽调出20多个人去为公司开疆拓土。在这快三个月中,我们一起奋战奋斗拼搏。在过程中,我通宵时间超过半个月,干到凌晨4/5点的日子数不胜数,干到凌晨1/2点日子更是习以为常。整个团队绝大多数人近乎两个月没有周末,辛苦异常,是实实在在的高峰体验。但是三个月后,我带着失败和一身的惨痛教训回到公司。 我...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。