jq 插件基本写法,传入函数

本文介绍了一个名为yoyoTabs的jQuery插件实现细节。该插件支持多种调用方式,包括方法调用、属性设置及事件绑定。文章详细解释了插件内部如何通过参数类型判断来区分不同操作,并展示了如何添加选项卡以及触发事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<pre name="code" class="javascript">/*
** 调用时候以下几种写法,ligerUi 或 easyUi 书写风格
$('.class').yoyoTabs('add');//方法 add方法,第一个参数是字符串,为方法
$('.class').yoyoTabs('add',{});//方法 add方法 {}方法的参数,
$('.class').yoyoTabs({});//方法 {}属性参数 ,第一个参数是对象,而且对象里面是的值不是函数
$('.class').yoyoTabs({  onselect:function(){}   });// 事件 ,第一个参数是对象,而且对象里面是的值是一个函数
** 运行原理
1. 根据传入的参数判断执行类型,第一个参数是字符为方法,是对象则可能是属性或事件,如果对象里面值是函数则为事件,否则为属性
2. 事件是对象的一个参数,当插件初始化的时候,这个参数会被存在dom里面,当方法执行前或完成时候会从dom中读取此函数出来执行
*/


//公用函数
var yoyoUiBase=(function(){
	//判断 obj 内的一个值是否为函数, 仅遍历一级
	var isFunctionInObj=function(obj){
		var eventTypes='';//收集 事件类型
		for (var o in obj){//遍历所有对象
			if (o.indexOf('on')===0){//取前面是'on'的值说明是事件,
				// alert(  '对象遍历:' + o.indexOf('on') + o+ ':' + obj[o] + typeof obj[o]     );
				if (typeof obj[o] ==='function'){
					eventTypes+= o + ':' + typeof obj[o]+'|'; // 收集所有事件类型
				}
			}
		}
		// alert(    'eventTypes=' + eventTypes    );
		if (eventTypes.indexOf('function')>-1){ // 只要存在 一个  function ,说明传入来的参
			return true;
		}else{
			return false;
		}
	}
	// 根据参数 判断事件类型 是:属性、事件、方法
	var runTypes=function(arguments0,arguments1,argumentsLength) {
		//定义返回内容
		var runType='';
		//没有参数
		if (argumentsLength===0){
			runType='';
		}
		// 只有一个参数 : 事件 初始化 属性
		if (argumentsLength===1){
			//首个参数为 对象 
			if (typeof arguments0==='object'){// 初始化 ,事件
				if (yoyoUiBase.isFunctionInObj(arguments0)===true){//对象中含有函数 事件
					runType='event';
				}else{ //初始化
					runType='attr';
				}
			}
			//方法
			if (typeof arguments0==='string'){//首个参数为 字符串 方法
				runType='method';
			}
		}
		// 有两个参数:方法
		if (argumentsLength===2){ //方法
			runType='method';
		}
		return runType;
	}
	/* 方法或函数执行完成以后 触发 事件 
		plgName : 插件名字
		$this : 对象
		e : 事件名字
		back : 方法或属性传来的内容给事件调用 的
	*/
	var events=function(plgName,$this,e,back){
		if (typeof $this.data(plgName)[e]==='function'){
			$this.data(plgName)[e](back);
		}else{
			$.error(e);
		}
	}
	// yoyoUiBase 返回
	return{
		isFunctionInObj:isFunctionInObj,
		runTypes:runTypes,
		events:events
	}
})()
//|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| yoyoTabs 插件
;(function($){
	//私有的公共涵数
	var privateFunction=(function(){

		return{

		}
	})();
	//插件部分
	jQuery.fn.yoyoTabs=function(){
		// 预存参数
		var arguments0 = arguments[0];//事先存起参数1
		var arguments1 = arguments[1];//事先存起参数2
		var argumentsLength = arguments.length;//事先存起长度
		var plaugName = 'yoyoTabs';//插件的名字
		//########################## 判断类型 (even 、 attr  、 method  、''  )
		var runType = yoyoUiBase.runTypes(arguments0,arguments1,argumentsLength);
		if( runType.length===0) { alert(    '参数个数不能为0'    );  }
		//IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
		return this.each(function(){
			var $this=$(this);
			//########################################################## 初始化参数
			// 尝试去获取 settings,如果不存在 ,则返回“undefined”
			var settings = $this.data(plaugName);
			// 如果获取settings失败,则根据options和 default 创建它
			if( typeof(settings) == 'undefined') {
				//默认参数
				var defaults = {
					propertyName: 'value'
				}
				settings = $.extend( {}, defaults, arguments0, arguments1);
				// 保存我们新创建的 settings
				$this.data(plaugName, settings);
			} else {
				// 如果我们获取了settings,则将它和options进行合并(这不是必须的,你可以选择不这样做)
				settings = $.extend({}, settings, arguments0, arguments1);
				 // 如果你想每次都保存options,可以添加下面代码:
				$this.data(plaugName, settings);
			}
			//########################################################## 插件编写
			alert(    'runType=' + runType    );
			//属性
			if (runType==='attr'){
				$this.append('<span style="color:#00ff00">'+arguments0.title+'</span>');
			}
			//方法
			if (runType==='method'){
				// add  方法
				if (arguments0==='add'){
					//方法执行
					$('span',$this).text(arguments1.title);
					//这里触发事件 onSomeEvent
					yoyoUiBase.events( plaugName, $this, 'onSomeEvent', $this.text() )
				}
				// adds 方法
				if (arguments0==='adds'){
					alert(    '方法adds'    );
					//这里触发事件 onSomeEvent
					yoyoUiBase.events( plaugName, $this, 'onSomeEvent', $this.text() )
				}
			}
			// //事件
			// if (runType==='event'){
				// 1. 传入的数为对象中的函数,在参数初始化的时候被存到dom中去了
				// 2. 事件是存在dom中, 不会马上执行, 马上执行就没有意义了,而是待时机执行
				// 3. 当方法执行完成以后, 去 DOM中查找存起来的方法函数, 传入对象,调用它
			// }
		})
	}
})(jQuery);




                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值