jQuery 插件覆盖参数
-
19-09-2019 - |
题
这可能是一个非常平凡的问题,但这是我编写的第一个 jQuery 插件,我对 JavaScript 中的范围规则的理解有点模糊。
我正在尝试编写一个简单的 jQuery 插件来包装 Stack Overflow API。我首先尝试使用 Flair API。
我想让插件尽可能可配置,以便您可以轻松地向其传递域和用户 ID,并生成多个 Flair。
var superUser = $.jStackOverflow.flair({domain:"superuser.com", id: 30162, parentId:'#su-flair'});
var stackOverflow = $.jStackOverflow.flair({domain:"stackoverflow.com", id: 55954, parentId:'#so-flair'});
问题是,当它进行第二次调用时,它以某种方式使用了正确的域和 id 参数,但它在回调函数中用于创建 HTML 的parentId 字段正在使用第一个参数。
解决方案
已更新
<强>样本:强> http://jsbin.com/epeti3/5
/* 16/02/2012 02.04.38 */
(function($) {
$.fn.jStackOverflow = function(options) {
var opts = $.extend({},
$.fn.jStackOverflow.defaults, options);
return this.each(function() {
$this = $(this);
var opt = $.meta ? $.extend({},
opts, $this.data()) : opts;
var result;
var id = this.id;
var flair = $.fn.jStackOverflow.flair(opt, id);
$this.html(flair);
});
};
$.fn.jStackOverflow.setApis = function(options) {
var apis = options.protocol + options.domain + options.gTLD + "/users/flair/" + options.id + "." + options.format;
if (options.makeCallbacks) {
apis += "?callback=?";
}
return apis;
};
$.fn.jStackOverflow.flair = function(options, id) {
var api = $.fn.jStackOverflow.setApis(options);
if (options.makeCallbacks) {
result = $.getJSON(api,
function(data) {
$.fn.jStackOverflow.flairCallback(data, options, id);
});
}
return result;
};
$.fn.jStackOverflow.flairCallback = function(data, options, id) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
$('<div class="' + key + '"></div>').html(key + ' : ' +data[key]).appendTo('#' + id);
}
}
};
$.fn.jStackOverflow.defaults = {
protocol: 'http://',
domain: 'stackoverflow',
gTLD: '.com',
format: 'json',
makeCallbacks: true
};
})(jQuery);
使用:
<div id="so-flair"></div>
$(function() {
$('#so-flair').jStackOverflow({domain:"stackoverflow", id: 91130 });
});
其他提示
问题是你只有一个插件实例。这意味着这两个调用 $.jStackOverflow.flair()
由于两者都操作单个对象的内部数据,因此会相互干扰。
检查演示如果两个调用之间有一些延迟会发生什么(单击底部的两个按钮)
http://jsbin.com/esovu (编辑 http://jsbin.com/esovu/edit
突然它开始工作了。因此,您需要研究如何编写一个支持单个页面上多个实例的插件。
您可以选择任何支持多个实例的“好”jQuery 插件来检查如何执行此操作。
例如 jQuery 轮播.
检查线条如何交互以允许在一页上创建多个 Carousel 实例(代码取自 jQuery Carousel 源)
$.fn.jcarousel = function(o) { //this would match your `jStackOverflow`
return this.each(function() { //for each matched element return a new carousel
new $jc(this, o);
});
};
...
var defaults = {
...
};
...
$.jcarousel = function(e, o) { //the acutal constructor
...
}
...
$jc.fn.extend({
...
});
不隶属于 StackOverflow