這是一個自己寫的一個簡單插件,問題在下面程式碼中有註解
(function($, window, document, undefined) {
// 创造一个公共变量来构建一个私有方法
var privateFunction = function() {
// 不是很明白这个私有方法要如何使用,具体有什么用,找了一下资料也不是很明白
}
var methods = {
nTab: function(options) {
return this.each(function() {
// 关于 data() 有没有必要用在这里,我理解 data() 函数是用来保存插件默认没有的参数或方法用的。不知道这样理解对不对。和我预留一个onSomeEvent 函数来增加一些功能有什么区别?
var $this = $(this);
var defaults = {
tabTitle: '.product-tab-title li',
tabContent: '.product-tab-content',
tabTitleState: 'active',
tabContentBlock: 'block',
tabContentNone: 'none',
eventType: 'click',
onSomeEvent: function() {} // 这个为空的方法我预留处理打算以后遇到需要添加功能的时候使用,但怎么弄都不知道具体的使用方法
};
var settings = $.extend({}, defaults, options);
$this.find(settings.tabTitle).on(settings.eventType, function() {
index = $(this).index();
$(this).addClass(settings.tabTitleState).siblings().removeClass(settings.tabTitleState);
$(settings.tabContent).eq(index).addClass(settings.tabContentBlock).removeClass(settings.tabContentNone)
.siblings(settings.tabContent).addClass(settings.tabContentNone).removeClass(settings.tabContentBlock);
});
});
}
};
$.fn.userInCommonUseJsPlugin = 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);
}
})(jQuery, window, document);
這是我外部呼叫時的程式碼
$(function(){
$('.nTab').userInCommonUseJsPlugin('nTab', {
// 我想找这里写一个onSomeEvent: function() {}来增加插件没有的功能,该如何实现
});
})
問題在上述程式碼裡有註釋,還望大神指教! ! !
黄舟2017-07-05 11:04:42
已經找到其中一個答案了,關於回呼函數的使用
http://learn.jquery.com/plugi...
外掛內回呼函數寫法
var defaults = {
// We define an empty anonymous function so that
// we don't need to check its existence before calling it.
onImageShow : function() {},
// ... rest of settings ...
};
// Later on in the plugin:
nextButton.on( "click", showNextImage );
function showNextImage() {
// Returns reference to the next image node
var image = getNextImage();
// Stuff to show the image here...
// Here's the callback:
settings.onImageShow.call( image );
}
外部呼叫時使用回呼函數
$( "ul.imgs li" ).superGallery({
onImageShow: function() {
$( this ).after( "<span>" + $( this ).attr( "longdesc" ) + "</span>" );
},
// ... other options ...
});