jQuery 플러그인을 덮어 쓰는 매개 변수

Question

이것은 매우 평범한 질문 일지 모르지만 이것은 제가 작성한 첫 번째 jQuery 플러그인이며 JavaScript의 범위 규칙을 이해하는 데 약간 모호합니다.

스택 오버 플로우 API를 감싸는 간단한 jQuery 플러그인을 작성하려고합니다. 나는 Flair API와 함께 일하려고 노력하여 시작합니다.

도메인과 사용자 ID를 쉽게 전달하고 여러 플레어를 생성 할 수 있도록 플러그인을 가능한 한 구성 가능한 것으로 만들고 싶었습니다.

    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을 생성하는 첫 번째 매개 변수를 사용하는 것입니다.

당신은 볼 수 있습니다 여기에 플러그인 그리고 여기 HTML

Answer 1

업데이트되었습니다

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

Answer 2

문제는 플러그인의 단일 인스턴스 만 있다는 것입니다. 이것은 두 번의 전화를 의미합니다 $.jStackOverflow.flair() 단일 객체의 간 인터 라드 데이터를 조작 할 때 서로를 방해합니다.

두 통화 사이에 약간의 지연이 있으면 어떻게되는지 데모 확인하십시오 (하단의 두 버튼을 클릭하십시오).

http://jsbin.com/esovu (편집 http://jsbin.com/esovu/edit

갑자기 작동하기 시작합니다. 따라서 단일 페이지에서 여러 인스턴스를 지원하는 플러그인을 작성하는 방법을 조사해야합니다.

여러 인스턴스가 지원하는 방법을 확인하는 "좋은"jQuery 플러그인을 선택할 수 있습니다.

예를 들어 jQuery 회전 목마.

한 페이지에서 여러 회전 목마 인스턴스를 생성 할 수 있도록 라인이 상호 작용하는 방법을 확인하십시오 (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({
...
});