jQuery插件使用方法和全局回調

Question

我想創建一個具有兩種方法，並回調一個jQuery插件，方法工作，但我不能讓工作的回調，回調的範圍混淆了我，

(function($) 
{ 
    var methods = { 

     create: function(options) { 

      var defaults = { 
       width: 320, 
       height: 240, 
       background: '#000', 
       onstop: function(){} 
      }; 

      var options = $.extend(defaults, options); 

      return $(this).each(function(i) { 

       console.log('create'); 

      }); 

     }, 
     stop: function(options) { 

      var defaults = { 
       onstop: function(){} 
      }; 

      var options = $.extend(defaults, options); 

      return $(this).each(function(i) { 

       console.log('stop'); 
       options.onstop.call(); 

      }); 
     } 
    }; 

    $.fn.myplugin = function(option) { 

     if (methods[option]) { 
      return methods[option].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof option === 'object' || ! option) { 
      return methods.create.apply(this, arguments); 
     } else { 
      $.error('Method ' + option + ' does not exist in jQuery.plugin'); 
     }  
    }; 

})(jQuery); 

所以在

的<script>：

$(document).ready(function(){ 

    $('#start').click(function(){ 
     $('#myvideo').myplugin('create', { onstop: function(){ console.log('on stop'); } }); 
    }); 

    $('#stop').click(function(){ 
     $('#myvideo').myplugin('stop'); 
    }); 

}); 

基本上看來我要打的onStop：函數（）{}全局插件

/* ========更新的代碼（見註釋） ======== */

(function($) 
{ 

    var callbacks = { 
     onready: $.Callbacks("once memory unique").add(function() { 
      //console.log('onready'); 
     }), 
     ondeny: $.Callbacks("unique").add(function() { 
      //console.log('ondeny'); 
     }), 
     onerror: $.Callbacks("unique").add(function() { 
      //console.log('onerror'); 
     }), 
     onstop: $.Callbacks("unique").add(function() { 
      //console.log('onstop'); 
     }) 
    }; 

    var methods = { 

     construct: function(){ 
     }, 
     create: function(options) { 

      var defaults = { 
       width: 320, 
       height: 240, 
       background: '#000', 
       onready: function(){}, 
       onstop: function(){} 
      }; 

      var options = $.extend(defaults, options); 

      return this.each(function(i, elements) { 

       for (var prop in options) { 
        if (prop in callbacks) { 
         callbacks[prop].add(options.prop); 
        } 
       } 

       callbacks.onready.fire(); 

      }); 

     }, 
     stop: function() { 

      return this.each(function(i, elements) { 
       callbacks.onstop.fire(); 
      }); 
     } 
    }; 

    $.fn.myplugin = function(option) { 

     if (methods[option]) { 
      return methods[option].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof option === 'object' || ! option) { 
      return methods.construct.apply(this, arguments); 
     } else { 
      $.error('Method ' + option + ' does not exist in jQuery.plugin'); 
     }  
    }; 

})(jQuery); 

Answer 1

我用globalOptions變量來存儲插件初始化選項全球，

這裏的兩個文件來測試的東西出來，作爲stencyl使用。

jquery.plugin.js （函數（$）{

var pluginName = 'myPlugin'; 

    var globalOptions = ''; 

    var methods = { 

     create: function(options) { 

      var defaults = { 
       backgroundColor: '#000', 
       color: '#fff', 
       oncreate: function(){}, 
       onchangecolor: function(){}, 
       onloadpage: function(page){} 
      }; 

      globalOptions = $.extend(defaults, options); 

      return $(this).each(function(i, elements) { 

       $(elements).data('globalOptions', globalOptions); 

       globalOptions.oncreate(); 

      }); 

     }, 
     changeColor: function(){ 

      return $(this).each(function(i, elements) { 

       globalOptions = $(elements).data('globalOptions'); 
       if (!globalOptions) { $.error('Error: ' + pluginName + ' has not been initialized yet'); return false; } 

       $(this).css('background-color', globalOptions.backgroundColor); 
       $(this).css('color', globalOptions.color); 

       globalOptions.onchangecolor(); 

      }); 
     }, 
     loadPage: function(options){ 

      return $(this).each(function(i, elements) { 

       globalOptions = $(elements).data('globalOptions'); 
       if (!globalOptions) { $.error('Error: ' + pluginName + ' has not been initialized yet'); return false; } 

       globalOptions.onloadpage(options.page); 
       location.href = options.page; 

      }); 
     } 

    }; 

    $.fn.myPlugin = function(option) { 

     if (methods[option]) { 
      return methods[option].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof option === 'object' || ! option) { 
      return methods.create.apply(this, arguments); 
     } else { 
      $.error('Error: Method "' + option + '" does not exist in ' + pluginName); 
      return false; 
     }  
    }; 

})(jQuery); 

的index.html

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <script src="jquery.min.js"></script> 
     <script src="jquery.plugin.js"></script> 
     <script> 
$(document).ready(function() { 

    var myElement = $('.container').myPlugin({ 
     color: '#555', 
     backgroundColor: '#ddd', 
     oncreate: function(){ 
      console.log('Callback: create'); 
     }, 
     onchangecolor: function(){ 
      console.log('Callback: onchangecolor'); 
     }, 
     onloadpage: function(page){ 
      console.log('Callback: onloadpage = '+page); 
     } 
    }); 

    $('.color').click(function(event){ 
     myElement.myPlugin('changeColor'); 
    }); 

    $('.page').click(function(event){ 
     myElement.myPlugin('loadPage', { page: '#test' }); 
    }); 

}); 
     </script> 
    </head> 
    <body> 
     <div class="container"> 
      <button class="color">changeColor</button> <button class="page">loadPage</button> 
     </div> 
    </body> 
</html> 

如果任何人有這樣做的更好的方法和方式來增加 「私人」方法，請分享:)

Answer 2

我建議使用一些羽翼豐滿jQuery.Callbacks對象：

var callbacks = { 
    onready: $.Callbacks("once memory unique").add(function() { 
     console.log('ready'); 
    }), 
    ondeny: $.Callbacks("unique").add(function() { 
     console.log('deny'); 
    }), 
    onerror: $.Callbacks("unique").add(function() { 
     console.log('error'); 
    }), 
    onstop: $.Callbacks("unique").add(function() { 
     console.log('stop'); 
    }) 
}; 

現在，得到一些新的選擇時，你可以做

for (var prop in options) 
    if (prop in callbacks) 
     callbacks[prop].add(options[prop]); 

並調用它們只是做

callbacks.onstop.fire(/*args*/); 

或者，如果您關心回調的上下文，請使用fireWith。