jQuery插件覆盖参数

时间:2010-03-13 08:35:10

标签: javascript jquery jquery-plugins stackexchange-api

这可能是一个非常平凡的问题,但这是我写的第一个jQuery插件,我对理解JavaScript中的范围规则有点模糊。

我正在尝试编写一个包含Stack Overflow API的简单jQuery插件。我开始尝试使用Flair API。

我想让插件尽可能配置,以便您可以轻松地将其传递给域名和用户ID,并生成多个Flairs。

    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字段使用的是第一个参数。

您可以看到plugin hereHTML here

2 个答案:

答案 0 :(得分:3)

已更新

DEMO: 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 });
    });

答案 1 :(得分:0)

问题是你只有一个插件实例。这意味着对$.jStackOverflow.flair()的两次调用会相互干扰,因为它们都会操纵单个对象的内部数据。

检查演示如果两次通话之间有一些延迟会发生什么(单击底部的两个按钮)

http://jsbin.com/esovu(编辑http://jsbin.com/esovu/edit

突然间它开始工作了。因此,您需要研究如何在单个页面上编写支持多个实例的插件。

您可以选择任何“好”的jQuery插件,多个实例支持这些插件来检查如何操作。

e.g。 jQuery Carousel

检查行如何交互以允许在一个页面上创建多个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({
...
});