jQuery插件结构
我已经为我的jQuery模式插件工作了一段时间,我终于让它工作得很好了——然而,我想知道我的插件结构和jQuery代码是否编码良好。如果我不确定我的代码是否完全最优,我就是那种晚上睡觉有问题的人:) 非常感谢您的任何改进/反馈jQuery插件结构,jquery,jquery-plugins,Jquery,Jquery Plugins,我已经为我的jQuery模式插件工作了一段时间,我终于让它工作得很好了——然而,我想知道我的插件结构和jQuery代码是否编码良好。如果我不确定我的代码是否完全最优,我就是那种晚上睡觉有问题的人:) 非常感谢您的任何改进/反馈 (function($) { var methods = { init: function(options) { return this.each(function() { if (options) $.extend(
(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);
另外,正如您所看到的,我必须在init()和close()函数中定义$this和$href,是否有任何地方可以定义一次私有变量并从任何地方访问它们?我听说过一些关于使用data()标记的内容,但不确定它是如何工作的
提前感谢:)看起来不错,但我会避免在插件中硬编码任何ID。您可以选择在设置对象中设置默认值,并允许用户覆盖该值,例如,为所有ID使用前缀 文献:
(function($) {
var methods = {
// PUBLIC FUNCTIONS
init: function(options) {
return this.each(function() {
if (options) $.extend({}, settings, options);
var $this = $(this),
$title = $this.attr('title'),
$href = $($this.attr('href'));
// PRIVATE FUNCTIONS
var openWindow = function() {
$this.trigger('open.iModal');
addContent();
}
var addContent = function() {
$this.trigger('loaded.iModal');
}
});
},
close: function() {
return this.each(function() {
var $this = $(this),
$href = $($this.attr('href'));
$this.trigger('closed.iModal');
$this.unbind('.iModal');
});
},
resize: function() {
}
}
$.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);