Question

我正在开发一个jQuery插件，当我点击暂停链接时，我需要在插件中调用一个函数。我的代码就像这样

$("#pauseAnimation").click(function () { $.fn.cjImageVideoPreviewer().pauseAnimation(); })

和要调用的函数是这个

(function ($) {
$.fn.cjImageVideoPreviewer = function (options) {

    var settings = {
        // user editable settings
        images: [],
        delay: 1000,
        autoPlay: false,
        showProgress: false
    };

    var sys = {
        // function parameters
        version: '1.0.2',
        elem: null,
        idx: 1,
        timer: null,
        loaded: 0,
        mouseX: null,
        mouseY: null,
        state: false
    };

    /*
        handle transitions
    ***************************************/

    function clearTimer() {
        if (sys.timer !== null) {
            window.clearTimeout(sys.timer);
            sys.timer = null;
        }
    }

    // reset everything
    function stopAnimation() {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;

            // show the first image
            $(sys.elem).find("div.cjImageVideoPreviewer img:first").css({
                "display": "block"
            });

            // hide all the other images
            $(sys.elem).find("div.cjImageVideoPreviewer img:not(:first)").css({
                "display": "none"
            });
        }
    }

    // pause
    function pauseAnimation() {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;
        }
    }

当我点击链接时出现错误

Microsoft JScript运行时错误：对象不支持此属性或方法任何帮助都会很明显..

Answer 1

在JQuery documentation中，推荐的创建插件的方法是：

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { 
       // ... 
     },
     show : function( ) { 
       // ... 
     },
     hide : function( ) {
       // ... 
     },
     update : function( content ) { 
       // ...
     }
  };

  $.fn.tooltip = 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 on jQuery.tooltip' );
    }    

  };

})( jQuery );

如果想要使用这种创建自定义插件的方式，您的插件应该看起来与此类似：

(function( $ ){
  var sys, settings;
  var methods = {
    init : function( options ) {
        //do stuf with options settings
     },
    clearTimer: function () {
        if (sys.timer !== null) {
            window.clearTimeout(sys.timer);
            sys.timer = null;
        }
    },
    stopAnimation: function () {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;

            // show the first image
            $(sys.elem).find("div.cjImageVideoPreviewer img:first").css({
                "display": "block"
            });

            // hide all the other images
            $(sys.elem).find("div.cjImageVideoPreviewer img:not(:first)").css({
                "display": "none"
            });
        }
    },
    pauseAnimation: function () {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;
        }
    }
  };

  $.fn.cjImageVideoPreviewer = function (method) {

    settings = {
        // user editable settings
        images: [],
        delay: 1000,
        autoPlay: false,
        showProgress: false
    };

    sys = {
        // function parameters
        version: '1.0.2',
        elem: null,
        idx: 1,
        timer: null,
        loaded: 0,
        mouseX: null,
        mouseY: null,
        state: false
    };

    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 on jQuery.cjImageVideoPreviewer' );
    }    

 }
})( jQuery );

然后你可以像这样使用它：

//Init your plugin with some options
$('#pauseAnimation').cjImageVideoPreviewer({option1: 'value1', option2: 'value2'});
// then call a method like this:
$('#pauseAnimation').cjImageVideoPreviewer('pauseAnimation');

希望这能说明如何开发JQuery插件。

Answer 2

你可能更喜欢将嵌套函数分配给这样的变量：

(function($) { 
    $.fn.foo = function(options) {

        var do_stuff = function() {
            alert('do_stuff!')

            var do_other_stuff = function() {
                alert("do_other_stuff");
            };

            return {
                do_other_stuff: do_other_stuff
            };
        };

        return {
            do_stuff: do_stuff
        }
    };
})(jQuery);

$.fn.foo().do_stuff();
$.fn.foo().do_stuff().do_other_stuff();

享受！

编辑：

或者你可以这样做：

$.fn.foo = {
    do_stuff : function() {
        alert("do_stuff!");
    }
};

$.fn.foo.do_stuff();

在jQuery插件中调用函数时出错

2 个答案: