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特效,但總覺得這樣寫不好,但不知道需要做哪些改進,還請走過路過的前輩指點一下啊,謝謝!
不知道有沒有人也有跟我一樣的需求,大家都是怎麼來實現的?
大家讲道理2017-07-05 11:02:48
你這就是要自己寫個庫的節奏啊!你現在的想法類似 jQuery EasyUI,它的每個元件都對應一個 $.fn.
方法,這個方法第的一個參數是元件方法名,之後是這個方法的參數,例如
$("#id1").panel("show")
這就是呼叫的 panel 元件的 show 方法。
這種寫法用慣也挺好,但是有個問題,就是很難在編輯器中實作語法提示。
另外一種方式是MiniUI 的方式,它是透過一個特定的方法(mini.get()
)來根據DOM 取得一個元件控制對象,然後跟使用普通對像一樣來使用這個對象進行相關的元件操作。如
var panel = mini.get("id1");
panel.show();
兩種方式應該都能實現你的想法,差別就在於封裝一個函數(方法)介面和封裝一個物件介面的差別