<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);
