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. docker - 如何修改運行中容器的配置2. python3.x - python連oanda的模擬交易api獲取json問題第五問3. nignx - docker內nginx 80端口被占用4. javascript - js代碼獲取驗證碼倒計時問題5. java - SSH框架中寫分頁時service層中不能注入分頁類6. 為什么我ping不通我的docker容器呢???7. docker-machine添加一個已有的docker主機問題8. 域名解析在Ubuntu64 9.04計算機上的Java應用程序中不起作用所有其他軟件可以正確解析DNS9. 關于docker下的nginx壓力測試10. angular.js - angular內容過長展開收起效果
