Question

我刚刚进入jQuery插件，我想用一个简单的面向对象的插件模板进行一种'hello world'练习。但我无法在下面的setup（）函数中获取console.log语句以显示在firebug控制台窗口中。

我像这样调用插件：

<script type="text/javascript" src="myPlugin.js" >
<script type="text/javascript"> 
  $(document).ready() {
    $('ul').myPlugin();
  });
</script>

myPlugin.js：

;(function($) {

  $.fn.extend({
      myPlugin: function(options) {
          return this.each(function() {
              new $.MyPlugin(this, options);
          });
      }
  });

  $.MyPlugin = function(element, options) { 
      var defaults = {          
          helloText: "hello World"          
      }

      this.options = $.extend({}, defaults, options || {}); 

      this.setup();     
  };

  $.extend($.MyPlugin.prototype, {

    setup: function() {
        console.log(this.helloText);        
    }   
  });   
})(jQuery);

就像我说的那样，setup（）函数中的console.log语句不会显示。我不知道为什么。但是，如果我紧跟在第一行之后放置一个console.log语句，例如，它确实有效：

;(function($) {
  console.log('hello world');

.....有人可以告诉我我做错了什么吗？

Answer 1

您的来电不正确：

<script type="text/javascript" src="myPlugin.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        $('ul').myPlugin();
    });
</script>

Answer 2

Ambrosia指出您提出的问题，因为您的电话不正确。您的.ready()不包含该功能。

但是，您可能需要考虑以稍微不同的方式设置插件。现在没有人可以在全局范围内覆盖你的默认值，并且你使用.extend会模糊你想要做的事情。这就是我建议您设置插件的方式，但当然，每个人都采用不同的方式：

;(function($) {

  $.fn.myPlugin = function(options) {
     return this.each(function() {
       (new $.MyPlugin(this, options));
     });
  };

  $.MyPlugin = function(element, options) {     
     this.options = $.extend({}, $.MyPlugin.defaults, options); 

     this.setup = function(){
       console.log(this.helloText);
     };

     this.setup();         
  };

  $.MyPlugin.defaults = {                      
     helloText: "hello World"                      
  }; 

})(jQuery);

除了更容易理解之外，有人现在可以使用以下方法覆盖所有对插件调用的选项：

$.MyPlugin.defaults.helloText = "Something Else";
$('ul').myplugin(); // Outputs 'Something Else' to the console

我为jQuery插件编写了一个名为Starter for jQuery的助手，但是还有很多其他很好的资源。

新手jQuery插件问题

2 个答案: