<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);
jq 插件基本写法,传入函数
最新推荐文章于 2022-03-16 11:40:02 发布