JQuery: превращение нескольких функций в один плагин

Question

Я учусь превращать функцию в плагин.и превращение функции в плагин кажется довольно простым.Но что, если у меня две функции соответствуют друг другу - как я могу затем превратить эти две функции в один плагин?

, например, у меня есть эти функции для создания слайд-шоу jquery,

function run_slide(target_slide) {

    //add a class the the first element
    $('li:first-child',target_slide).addClass('active');

    //Set the opacity of all images to 0
    $('.slide li').css({opacity: 0.0});

    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('loop_slide("'+target_slide+'")',5000);
}

function loop_slide(target_slide) {

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('.slide li:first-child') :current.next()) : $('.slide li:first-child')); 

    //Set the fade in effect for the next image, show class has higher z-index
    current.addClass('last-active');
    next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function(){
        current.animate({opacity: 0.0}, 1000).removeClass('active last-active');

        $('.caption p',target_slide).html(caption_description);
    });

}

это то, как я называю эти функции,

run_slide('#slide');

в идеале я хотел бы вызвать эти функции из метода плагина,

$('#slide').run_slide();

, но как обернуть эти две функции в плагинописанный ниже метод, как в документации jquery ,

(function( $ ){
  $.fn.myPlugin = function() {

    // Do your awesome plugin stuff here

  };
})( jQuery );

спасибо.

Answer 1

Согласно руководству по документации / стилю jquery, один плагин не должен загромождать пространство имен $ .fn несколькими записями. Но ваш плагин требует нескольких функций, как вы их и написали. Ответ в виде одиночного кода: http://docs.jquery.com/Plugins/Authoring#Namespacing Первый блок кода - это то, что вы не должны делать. Второе - это то, что вы должны сделать. Вы создаете синглтон со всеми вашими прикрепленными методами. Через закрытие области видимости, что синглтон доступен для вашего плагина $ .fn ... call. Таким образом, ваш плагин может работать с несколькими объектами DOM одновременно, не загромождая пространство имен jquery или пространство памяти с несколькими экземплярами ваших функций. Все вокруг выигрывают:)

Answer 2

Примерно так:

$(function() {
    $.fn.run_slide = function {
        var target_slide = $(this);
        //add a class the the first element
        $('li:first-child', target_slide).addClass('active');

        //Set the opacity of all images to 0
        $('.slide li').css({
            opacity: 0.0
        });

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval(function() {
            target_slide.loop_slide();
        }, 5000);
    }

    $.fn.loop_slide = function() {
        var target_slide = $(this);
        //Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('.slide li:first-child') : current.next()) : $('.slide li:first-child'));

        //Set the fade in effect for the next image, show class has higher z-index
        current.addClass('last-active');
        next.css({
            opacity: 0.0
        }).addClass('active').animate({
            opacity: 1.0
        }, 1000, function() {
            current.animate({
                opacity: 0.0
            }, 1000).removeClass('active last-active');

            $('.caption p', target_slide).html(caption_description);
        });
    }
});

или вы можете также определить другую функцию внутри плагина, например:

$.fn.run_slide = function(){
    function loop_slide(){
        //...
    }

    loop_slide.call(this);
} 

Answer 3

Попробуйте создать плагин jquery с несколькими функциями