gpt4 book ai didi

javascript - 有没有更好的方法/模式来编写这个 jQuery 插件?

转载 作者:行者123 更新时间:2023-11-29 15:01:30 25 4
gpt4 key购买 nike

我有一个相当复杂的搜索插件:它有不同版本的 UI 和功能,以及一堆相互依赖的 domElements。该插件的多个实例将同时存在于一个页面上。

我正在使用基本的 jQuery 创作模式:http://docs.jquery.com/Plugins/Authoring

为了保存选项、相互依赖的事件以及跨多个对象的各种 dom 查找,我开始将有问题的元素传递给每个函数,并将状态/选项/相互依赖存储在我的数据属性中每次检索。它有效,并防止事件发生冲突,但它似乎是一种编写代码的困惑方式。

跨多个实例存储状态的最佳方式是什么?我做这件事的方式是不是太矫枉过正了,我错过了什么?这可能源于我对在 jQuery 插件模式中创建类似对象的类的误解。

(function($) {
var _options = {};

var methods = {
init: function(options) {
return this.each(function() {
if (options) {
_options = $.extend($.fn.examplePlugin.defaults, options);
} else {
_options = $.fn.examplePlugin.defaults;
}
$this = $(this);
var data = $this.data('examplePlugin');
if (!data) {

$this.data('examplePlugin', {
target: $this
});
$.each(_options, function(key, value){
$this.data('examplePlugin')[key] = value;
});
data = $this.data('examplePlugin');
}
//Cache dom fragment plugin is in (if passed)
if (data.domContextSelector == null || data.domContextSelector == "") {
data.domContext = $(body);
} else {
data.domContext = $(data.domContextSelector);
}
init($this);
});
}
};
var init = function(element) {
data = getData(element);
//Storing dom elements to avoid lookups
data.relatedElement = $(data.relatedElementSelector, data.domContext);
element.click(function(event){
doSomethingCool($(event.currentTarget));
});
};
var doSomethingCool = function(element) {
data = getData(element);
element.slideUp();
data.relatedElement.slideDown();
};
var adjustHeight = function(element) {
data = getData(element);
element.height(data.relatedElement.height());
};
var getData = function(element) {
return $(element).data('examplePlugin');
};

$.fn.examplePlugin = function(method) {
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 on jQuery.examplePlugin');
}
return false;
};
$.fn.examplePlugin.defaults = {
defaultA: 'something',
relatedElementSelector: '#related',
domContextSelector: 'header.header'
};})(jQuery);

最佳答案

是的,如果您遵循 jQuery 指南,您就是在根据它应该如何构建并利用它的设计目的(尤其是链接)来构建它。

但是,我不一定要走那条路。有很多方法可以实现这些插件,take for example this guy谁为 jQuery 插件制作了一个样板,它不是基于 jQuery 的设计,而是基于 OOP 的 Angular (我更喜欢)。我认为它更简洁,但牺牲了不遵循通常的语法(element.myPlugin({options}) 并且无法链接(直到您稍作修改)

同一个人有一篇较旧的帖子,它是通常 jQuery 插件设计的样板。

关于javascript - 有没有更好的方法/模式来编写这个 jQuery 插件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9525981/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com