0
我一直在研究我的jQuery Modal插件一段時間，我終於得到它的工作 - 但是，我想知道我的插件結構和jQuery代碼是否編碼良好。如果我不確定我的代碼是否是完全最佳的，我就是那種在晚上睡覺有問題的人:)jQuery插件結構
任何類型的改進/反饋都非常感謝！
(function($) {
var methods = {
init: function(options) {
return this.each(function() {
if (options) $.extend({}, settings, options);
var $this = $(this),
$title = $this.attr('title'),
$href = $($this.attr('href'));
$this.bind('click', function() {
openWindow();
return false;
});
$this.bind('open.iModal', function() { settings.onOpen() });
$this.bind('loaded.iModal', function() { settings.onLoaded() });
$this.bind('closed.iModal', function() { settings.onClose() });
var openWindow = function() {
$('body').append('<div id="iModalOverlay"></div><div id="iModalWrapper"><div id="iModalWindow"><div id="iModalLoading"></div><div id="iModalContent"><h4 class="inputBox">' + $title + '</h4></div></div><div id="iModalClose">X</div></div>');
$this.trigger('open.iModal');
$(this).iModal('resize');
if (settings.closeOnClick) {
$('#iModalOverlay').click(function() {
$(this).iModal('close');
return false;
});
}
$('#iModalClose').click(function() {
$(this).iModal('close');
return false;
});
$(window).resize(function() {
$(this).iModal('resize');
});
addContent();
}
var addContent = function() {
$('#iModalContent').hide();
$('#iModalLoading').show();
var type = /\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test($this.attr('href')) ? 'image' : ($this.attr('href').indexOf('#') === 0) ? 'html' : 'ajax';
switch(type) {
case 'html':
$('#iModalContent').append($href);
break;
case 'ajax':
$.get("/Testing/ajax/getfile.php", { file: $href }, function(data){
$('#iModalContent').html(data);
});
break;
case 'image':
$('#iModalContent').css('padding', 0);
$('#iModalWrapper').css('padding-bottom', '2px');
var img = new Image();
$(img).load(function() {
$('#iModalContent').append(this);
}).attr('src', $this.attr('href'));
break;
}
$('#iModalContent').show();
$('#iModalLoading').hide();
$(this).iModal('resize');
if ($('#iModalContent input').length != 0) $('#iModalContent input').focus();
$this.trigger('open.iModal');
}
});
},
close: function() {
return this.each(function() {
var $this = $(this),
$href = $($this.attr('href'));
$('#modalBoxes').append($href);
$('#iModalOverlay, #iModalWrapper').remove();
$this.trigger('closed.iModal');
$this.unbind('.iModal');
});
},
resize: function() {
$('#iModalOverlay').css({
height: $(window).height() + $(window).scrollTop(),
width: $(window).width() + $(window).scrollLeft()
});
$('#iModalWrapper').css({
top: ($(window).height() - $('#iModalWrapper').outerHeight())/2 + $(window).scrollTop(),
left: ($(window).width() - $('#iModalWrapper').outerWidth())/2 + $(window).scrollLeft()
});
}
}
$.fn.iModal = function(method, options) {
settings = {
onOpen: function() {},
onLoaded: function() {},
onClose: function() {},
closeOnClick: true,
title: false
}
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
}
}
})(jQuery);
我知道這是很長（當然，它的約1/10等模式插件的大小） - 所以我加了一個TL; DR代碼以及下面：
而且，你可以看到我必須在我的init（）和close（）函數中定義$ this和$ href，是否有任何地方可以定義我的私有變量一次並從任何地方訪問它們？我聽說過有關使用data（）標籤的一些信息，但不確定它是如何工作的。
感謝提前:)