首页 > 其他分享 >jQuery插件开发详解

jQuery插件开发详解

时间:2023-10-21 10:41:09浏览次数:41  
标签:jQuery function 插件 methods init 详解 method



jQuery插件开发详解

  • 1、首先使用闭包(把jQuery传入函数,形参是$)
  • 2、进入开发(上代码)
  • 3、处理传递进来的参数(在init: function () {} 这个属性方法里面)
  • 4、完整示例
  • 5、最后一步,如何调用?


1、首先使用闭包(把jQuery传入函数,形参是$)

这里使用闭包的好处官方给出了三点解释:
1.避免全局依赖 2.避免第三方破坏 3.兼容jQuery操作符’$'和jQuery

(function($){
			        /your code
			    })(jQuery);

2、进入开发(上代码)

jQuery插件开发详解_前端


这一段进入插件最开始的部分,外部调用的我的插件名为:myPlugin;

第一个if,如果method有值,就进入走向methods的method这个属性的方法里面;

第二个elseif, 这个方法的类型是对象(即会传入一组参数以{}包裹的对象)或者method没有传值,是空的。这里默认进入methods的init的方法,我们自己说是初始化方法,并把外部传入的参数对象(或者没有参数的为空的对象)放进去;

第三个else,method这个方法在我们这个插件的对象里是不存在的,我们会报错。

这么做有个报警机制一样。

3、处理传递进来的参数(在init: function () {} 这个属性方法里面)

init : function( options ) {
      var opt = {};
      opt.$el = $( this );
      opt.settings = $.extend( {
          'type': 1,//是否可读可写,默认可读
          'must': 0//是否必填,默认非必填
      }, options);

      methods.show();
}

1、这里的options,就是传入的各种参数和系统默认的参数进行合并作为插件的设置,你用

$.extends({
	//这里是插件里面默认的参数
}, options)

2、mehtods.show() 接下来调用其他的办法,依次展开代码的功能

4、完整示例

(fucntion ( $ ) {
		  var methods = {
			    init : function( options ) {
				      var opt = {};
				      opt.$el = $( this );
				      opt.settings = $.extend( {
				          'type': 1,//是否可读可写,默认可读
				          'must': 0//是否必填,默认非必填
				      }, options);
				      
				      methods.show();
			    },
			    show : fucntion() {
			          
			    }
		  };
		
		  $.fn.myPluginName= function( method ) {
			    if (methods[ method ]) {
			       return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
			    } else if ( typeof method === 'object' || !method) {
			        return methods.init.apply( this, arguments );
			    } else {
			        $.error( 'Method' + method + 'null function');
			    }
		  }
})( jQuery );

5、最后一步,如何调用?

首先,你必须在你需要的页面引入这个插件的js;
调用方式一:传入一组参数对象进去

$("#container").myPluginName({   //里面是插件配置的属性
     index : 1,
     duration : 800,
     dirction : "herizontal",
 });

调用方式二:传入插件的某个方法进去

$("#container").myPluginName("init");

调用方式三:不传任何参数,按照插件默认流程去走

$("#container").myPluginName();


标签:jQuery,function,插件,methods,init,详解,method
From: https://blog.51cto.com/u_12591679/7964492

相关文章

  • jquery 简单的计时器
    简单的计时器jQuery只显示当前的时分秒,以下代码直接运行即可只显示当前的时分秒,以下代码直接运行即可关键起作用的就是这个函数setInterval(),第二个参数1000代码1000毫秒,也就是1秒,调用一下函数f(),id为timer里面的内容就被替换为最新的时间<!DOCTYPEhtml><html><head> <t......
  • 详解vue大文件视频切片上传的处理方法
    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下 前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟......
  • Makefile详解—clean
    每个Makefile中都应该写一个清空目标文件(.o和执行文件)的规则,这不仅便于重编译,也很利于保持文件的清洁。这是一个“修养”。一般的风格都是: clean:rmedit$(objects) 更为稳健的做法是: .PHONY:cleanclean:-rmedit$(objects) 前面说过,.PHONY意思表示clean是一......
  • tcp/ip协议和opc协议对比详解
    TCP/IP协议和OPC协议是两种重要的网络协议,它们在不同的网络层级上运行,并为数据传输和通信提供了不同的功能。TCP/IP协议(TransmissionControlProtocol/InternetProtocol,传输控制协议/互联网协议)是互联网通信的基础协议,它定义了互联网中数据传输的基本规则和标准。TCP/IP协议包括......
  • log4net系列(三)--详解RollingFileAppender
    这篇讲讲实际产品中最常用到的appender--RollingFileAppender。前面讲过FileAppender,应该不难想到,如果一个系统的所有日志都记在一个日志文件里,那岂不是要撑爆了?所以我们真正使用的是RollingFileAppender,它基于时间生成一系列的日志文件,避免单个文件过大的问题。下面是一个经典......
  • Unity 最新DOTS系列之《Baking与Baker的详解》
    UnityDOTSBaking与Baker详解UnityDOTSBaking与Baker详解 最近DOTS终于发布了正式的版本,我们来分享一下DOTS里面Baking与Baker的关键概念,方便大家上手学习掌握UnityDOTS开发。 UnityDOTS开发模式,为了让大家在”创作”游戏的时候使用原来组件方式来编辑游戏场景与......
  • [转] VSCode中 Vetur插件排版Vue文件 Col 标签子标签不被缩进的问题 iview viewDesign
    [转]VSCode中Vetur插件排版Vue文件Col标签子标签不被缩进的问题iviewviewDesign自动格式化问题Col标签不对齐首先直接放解决办法在vsCodesettings.json中添加{//缩进大小,自行按需配置"vetur.format.options.tabSize":4,"vetur.format.defaultFo......
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属
    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表(CascadingStyleSheets)。下面是一些常用的CSS3属性及其详细解释:border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。box-shadow:创建一个元素的阴影效果......
  • Java反射详解
    目录一、概述1、框架2、反射好处:二、获取字节码class对象的方法1、第一阶段——Source源代码阶段2、第二阶段——Class类对象阶段3、第三阶段——Runtime运行时阶段4、代码演示结论:三、Class对象功能概述1、获取成员变量Field[]getFields()(获取所有公共成员变量)FieldgetField(Str......
  • 【从零学习python 】02. 开发工具介绍及交互式编程及注释详解
    编写Python代码根据我们之前介绍的知识,我们知道,所谓代码其实就是将一段普通文本按照一定的规范编写,然后交给电脑解析并且执行。那既然是一段文本,那我们是否可以直接使用文本编辑器来编码呢?答案是肯定的,但是这样开发起来,效率会很低。一、常见的代码编辑工具实际上,在我们实际工作......