Компоновка и дизайн кода скрипта плагина jQuery

Question

Я никогда раньше не писал плагин jQuery, но сейчас работаю над ним. Я борюсь с тем, как включить в него внутренние функции. Вот то, что я придумал (в сокращенном формате). Имеет ли это смысл? Это кажется немного ... странным. Есть ли лучший, более чистый способ, которым я мог бы расположить этот код?

(function($) {

$.myplugin = { version : '0.1a' }

$.fn.myplugin = function(options)
{
    // global vars
    var arrone = Array(),
        arrtwo = Array();

    $.myplugin.defaults = {
        doctor : 'seuss',
        jim : 'hensen'
    }

    $.myplugin.variable = null;

    $.myplugin.go = function()
    {
    // do stuff
    $('.myclass').click(function() { $.myplugin.otherfunction(this); });
}

$.myplugin.otherfunction = function(object)
{
    // do more stuff
}

var opts = $.extend($.myplugin.default, options);

return $(this).each($.myplugin.go);

Мне не хватает нескольких скобок и скобок тут и там, которые были напечатаны быстро, но это общий формат. Более или менее, создание объекта Javascript в вызове функции плагина.

Спасибо за любую помощь и понимание, как всегда!

Answer 1

Вот небольшой плагин, который я написал для своего сайта. Это галерея для jQuery

    (function($){
    var currentSlide = 0;
    var slides = new Array();
    var nav = new Array();
    var timer;
    var wait = 2200;        // Delay before changing slides
    var speed = 250;        // Speed at which slides fade
    var canChange = true;   // To prevent bugs between changing slides
    var methods = {
        init:function(options){
            $('.slide',this).each(function(){
                $(this).hide();
                slides[slides.length] = $(this);
            });
            $(this).append('<div class="slideshow-nav-container"></div>');
            for(var i=0;i<slides.length;i++){
                    $('.slideshow-nav-container',this).append('<a href="#" class="slideshow-nav">' + (i + 1) + '</a>');    
            }
            $('.slideshow-nav').each(function(key,value){
                nav[nav.length] = $(this);
                if(key == 0){
                    $(this).addClass('slideshow-nav-active');
                }
                $(this).click(function(){
                    $('.slideshow-nav').removeClass('slideshow-nav-active');
                    methods['set'].call(this,key);
                    $(this).addClass('slideshow-nav-active');
                    return false;
                });
            });
            methods['next'].call(this,true);
            return true;
        },
        next:function(init){
            if(init){
                methods['change'].call(this,currentSlide);
            }
            else{
                methods['change'].call(this,currentSlide + 1);
            }
            timer = setTimeout(
                function(){
                    methods['next'].call(this,false);
                },
                wait);
            return true;
        },
        set:function(slide){
            methods['change'].call(this,slide);
            clearTimeout(timer);
        },
        change:function(slide){
            if(canChange){
                canChange = false;
                $(slides[currentSlide]).fadeOut(speed,function(){
                    $(nav[currentSlide]).removeClass('slideshow-nav-active');
                    if(slide > slides.length - 1 || slide < 0){
                        slide = 0;
                    }
                    currentSlide = slide;
                    $(nav[currentSlide]).addClass('slideshow-nav-active');
                    $(slides[currentSlide]).fadeIn(speed);
                    canChange = true;
                    return true;
                });
            }
            return true;
        }
    };
    $.fn.slideshow = 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!');
        }    
    };
})(jQuery);

Надеюсь, вы сможете посмотреть на это и рассказать, как вызывается каждая функция. Если нет, пожалуйста, прокомментируйте это, и я объясню это далее.

Answer 2

Прежде всего, вы отлично стартуете. Вам нужно обернуть jQuery в замыкание, чтобы предотвратить конфликты пространства имен, поэтому основой всегда должно быть следующее:

(function($) {
    // In here you can always safely use $ to refer to jQuery
})(jQuery);

Теперь мы добавляем фактический плагин и параметры по умолчанию на основе установленного шаблона. Похоже на это.

(function($) {

    // A helper function
    function changeElem(elem, upperCase) {
        if (upperCase) {
            elem.html(elem.html().toUpperCase());
        }
    }

    // The plugin
    $.fn.demo = function(options) {
        var settings = $.extend({}, $.fn.demo.defaults, options);
        changeElem(this, settings.upperCase);
        return this.css(settings.css);
    };

    // The defaults, with 2 examples
    $.fn.demo.defaults = {
        css: { 'font-weight': 'bold' },
        upperCase: false
    };

})(jQuery);

$(".foo").demo({ upperCase: true });

Я разместил полный рабочий код на http://www.jsfiddle.net/w8DTB/

P.S. Этот материал и многое другое можно найти, прибегая к помощи по jquery plugin template или jquery plugin tutorial.