javascript - 自己開發(fā)jQuery插件能不能實現(xiàn)一個插件里有多個功能
問題描述
RT!比如,寫一個插件,里面有選項卡功能,有輪播圖功能,有彈窗功能等等當然不需要這些功能都很強大,只是為了把這些功能集合起來,方便使用的時候調(diào)用就可以了我的思路是:用 var methods = {...} 包裹起來,里面的 ... 代表N各小功能。如:
var methods = { nTab: function(options) {return this.each(function() { var defaults = { ... }; // 每增加一個功能就要多寫一遍這個 settings = $.extend({}, defaults, options); // 執(zhí)行代碼} }, slide: function(options) {return this.each(function() { var defaults = { ... }; // 每增加一個功能就要多寫一遍這個 settings = $.extend({}, defaults, options); // 執(zhí)行代碼} } // 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);}
目前自己照這種方法寫了一個插件,里面包含了一些自己經(jīng)常會用到的js特效,但總覺得這樣寫不好,但不知道需要做哪些改進,還請走過路過的前輩指點一下啊,謝謝啦!
不知道有沒有人也有和我一樣的需求,大家都是怎么來實現(xiàn)的?
問題解答
回答1:你這就是要自己寫個庫的節(jié)奏啊!你現(xiàn)在的想法類似 jQuery EasyUI,它的每個組件都對應一個 $.fn.<component>() 方法,這個方法第的一個參數(shù)是組件方法名,之后是這個方法的參數(shù),比如
$('#id1').panel('show')
這就是調(diào)用的 panel 組件的 show 方法。
這種寫法用慣也挺好,但是有個問題,就是很難在編輯器中實現(xiàn)語法提示。
另外一種方式是 MiniUI 的方式,它是通過一個特定的方法(mini.get())來根據(jù) DOM 獲取一個組件控制對象,然后跟使用普通對象一樣來使用這個對象進行相關的組件操作。比如
var panel = mini.get('id1');panel.show();
兩種方式應該都能實現(xiàn)你的想法,區(qū)別就在于封裝一個函數(shù)(方法)接口和封裝一個對象接口的區(qū)別
回答2:感覺你想做的是一個庫,包含了一些自己常用的功能。可以參考下這個項目的結(jié)構(gòu)
回答3:怎么感覺你那個不是插件,更像ui組合
相關文章:
1. atom開始輸入!然后按tab只有空格出現(xiàn)沒有html格式出現(xiàn)2. javascript - js setTimeout在雙重for循環(huán)中如何使用?3. javascript - vue-cli npm run build編譯報錯4. mysql - 這種分級一對多,且分級不平衡的模型該怎么設計表?5. mac里的docker如何命令行開啟呢?6. javascript - 有適合開發(fā)手機端Html5網(wǎng)頁小游戲的前端框架嗎?7. node.js - 阿里云ECS,阿里云Docker,還有Leancloud的LeanEgine,哪個更適合NodeJs WebApp?8. python - pip install出現(xiàn)下面圖中的報錯 什么原因?9. java - 線上應用,如果數(shù)據(jù)庫操作失敗的話應該如何處理?10. java - 創(chuàng)建maven項目失敗了 求解決方法
