問題描述

RT!比如，寫一個(gè)插件，里面有選項(xiàng)卡功能，有輪播圖功能，有彈窗功能等等當(dāng)然不需要這些功能都很強(qiáng)大，只是為了把這些功能集合起來，方便使用的時(shí)候調(diào)用就可以了我的思路是：用 var methods = {...} 包裹起來，里面的 ... 代表N各小功能。如：

var methods = { nTab: function(options) {return this.each(function() { var defaults = { ... }; // 每增加一個(gè)功能就要多寫一遍這個(gè) settings = $.extend({}, defaults, options); // 執(zhí)行代碼} }, slide: function(options) {return this.each(function() { var defaults = { ... }; // 每增加一個(gè)功能就要多寫一遍這個(gè) settings = $.extend({}, defaults, options); // 執(zhí)行代碼} } // N個(gè)小功能代碼 ...}$.fn.pluginName = function() { var method = arguments[0]; if(methods[method]) {method = methods[method];arguments = Array.prototype.slice.call(arguments, 1); } else if( typeof(method) == ’object’ || !method ) {method = methods.init; } else {$.error( ’Method ’ + method + ’ does not exist on jQuery.pluginName’ );return this; } return method.apply(this, arguments);}

目前自己照這種方法寫了一個(gè)插件，里面包含了一些自己經(jīng)常會(huì)用到的js特效，但總覺得這樣寫不好，但不知道需要做哪些改進(jìn)，還請(qǐng)走過路過的前輩指點(diǎn)一下啊，謝謝啦！

不知道有沒有人也有和我一樣的需求，大家都是怎么來實(shí)現(xiàn)的？

問題解答

你這就是要自己寫個(gè)庫的節(jié)奏啊！你現(xiàn)在的想法類似 jQuery EasyUI，它的每個(gè)組件都對(duì)應(yīng)一個(gè) $.fn.<component>() 方法，這個(gè)方法第的一個(gè)參數(shù)是組件方法名，之后是這個(gè)方法的參數(shù)，比如

$('#id1').panel('show')

這就是調(diào)用的 panel 組件的 show 方法。

這種寫法用慣也挺好，但是有個(gè)問題，就是很難在編輯器中實(shí)現(xiàn)語法提示。

另外一種方式是 MiniUI 的方式，它是通過一個(gè)特定的方法(mini.get())來根據(jù) DOM 獲取一個(gè)組件控制對(duì)象，然后跟使用普通對(duì)象一樣來使用這個(gè)對(duì)象進(jìn)行相關(guān)的組件操作。比如

var panel = mini.get('id1');panel.show();

兩種方式應(yīng)該都能實(shí)現(xiàn)你的想法，區(qū)別就在于封裝一個(gè)函數(shù)(方法)接口和封裝一個(gè)對(duì)象接口的區(qū)別

感覺你想做的是一個(gè)庫，包含了一些自己常用的功能。可以參考下這個(gè)項(xiàng)目的結(jié)構(gòu)

怎么感覺你那個(gè)不是插件，更像ui組合