javascript - 自己開發jQuery插件能不能實現一個插件里有多個功能
問題描述
RT!比如,寫一個插件,里面有選項卡功能,有輪播圖功能,有彈窗功能等等當然不需要這些功能都很強大,只是為了把這些功能集合起來,方便使用的時候調用就可以了我的思路是:用 var methods = {...} 包裹起來,里面的 ... 代表N各小功能。如:
var methods = { nTab: function(options) {return this.each(function() { var defaults = { ... }; // 每增加一個功能就要多寫一遍這個 settings = $.extend({}, defaults, options); // 執行代碼} }, slide: function(options) {return this.each(function() { var defaults = { ... }; // 每增加一個功能就要多寫一遍這個 settings = $.extend({}, defaults, options); // 執行代碼} } // N個小功能代碼 ...}$.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);}
目前自己照這種方法寫了一個插件,里面包含了一些自己經常會用到的js特效,但總覺得這樣寫不好,但不知道需要做哪些改進,還請走過路過的前輩指點一下啊,謝謝啦!
不知道有沒有人也有和我一樣的需求,大家都是怎么來實現的?
問題解答
回答1:你這就是要自己寫個庫的節奏啊!你現在的想法類似 jQuery EasyUI,它的每個組件都對應一個 $.fn.<component>() 方法,這個方法第的一個參數是組件方法名,之后是這個方法的參數,比如
$('#id1').panel('show')
這就是調用的 panel 組件的 show 方法。
這種寫法用慣也挺好,但是有個問題,就是很難在編輯器中實現語法提示。
另外一種方式是 MiniUI 的方式,它是通過一個特定的方法(mini.get())來根據 DOM 獲取一個組件控制對象,然后跟使用普通對象一樣來使用這個對象進行相關的組件操作。比如
var panel = mini.get('id1');panel.show();
兩種方式應該都能實現你的想法,區別就在于封裝一個函數(方法)接口和封裝一個對象接口的區別
回答2:感覺你想做的是一個庫,包含了一些自己常用的功能。可以參考下這個項目的結構
回答3:怎么感覺你那個不是插件,更像ui組合
相關文章:
1. 運行python程序時出現“應用程序發生異常”的內存錯誤?2. macos - 無法source activate python273. css3 讓圖片變成灰色(filter),但針對IE11瀏覽器無效4. java - butterknife怎么綁定多個view5. java - 同步/異步與阻塞/非阻塞之間的差異具體是什么?6. android - Genymotion 模擬器可以做屏幕適配檢測嗎?7. html5 - 前端面試碰到了一個緩存數據的問題,來論壇上請教一下8. javascript - 打算寫一個c++的node圖像處理模塊,有沒有推薦的c++圖片處理庫?9. html - vue里面:src在IE(9-11)下不顯示圖片10. 我在導入模板資源時遇到無法顯示的問題,請老師解答下

網公網安備