javascript - 自己開發(fā)jQuery插件能不能實現(xiàn)一個插件里有多個功能
問題描述
RT!比如,寫一個插件,里面有選項卡功能,有輪播圖功能,有彈窗功能等等當(dāng)然不需要這些功能都很強大,只是為了把這些功能集合起來,方便使用的時候調(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,它的每個組件都對應(yīng)一個 $.fn.<component>() 方法,這個方法第的一個參數(shù)是組件方法名,之后是這個方法的參數(shù),比如
$('#id1').panel('show')
這就是調(diào)用的 panel 組件的 show 方法。
這種寫法用慣也挺好,但是有個問題,就是很難在編輯器中實現(xiàn)語法提示。
另外一種方式是 MiniUI 的方式,它是通過一個特定的方法(mini.get())來根據(jù) DOM 獲取一個組件控制對象,然后跟使用普通對象一樣來使用這個對象進行相關(guān)的組件操作。比如
var panel = mini.get('id1');panel.show();
兩種方式應(yīng)該都能實現(xiàn)你的想法,區(qū)別就在于封裝一個函數(shù)(方法)接口和封裝一個對象接口的區(qū)別
回答2:感覺你想做的是一個庫,包含了一些自己常用的功能。可以參考下這個項目的結(jié)構(gòu)
回答3:怎么感覺你那個不是插件,更像ui組合
相關(guān)文章:
1. python bottle跑起來以后,定時執(zhí)行的任務(wù)為什么每次都重復(fù)(多)執(zhí)行一次?2. javascript - ios返回不執(zhí)行js怎么解決?3. javascript - vue2如何獲取v-model變量名4. node.js - vue中 post數(shù)據(jù)遇到問題5. 前端 - 誰來解釋下這兩個 CSS selector 區(qū)別6. javascript - 求幫助 , ATOM不顯示界面!!!!7. html5 - HTML代碼中的文字亂碼是怎么回事?8. javascript - angular使從elastichearch中取出的文本高亮顯示,如圖所示9. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處10. python - 爬蟲模擬登錄后,爬取csdn后臺文章列表遇到的問題
