Question

I m just getting into jQuery plugins and I wanted to do a sort of hello world exercise with a barebones object-oriented plugin template. But I can t get the console.log statement in the setup() function below to display in a firebug console window.

I call the plugin like so:

<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);

Like I said, the console.log statement in the setup() function doesn t display. I have no idea why. However, if I put a console.log statement immediately following the top line, for example, it does work:

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

.....Can someone please tell me what I m doing wrong?

Answer 1

Your call is incorrect:

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

Answer 2

Ambrosia points out the issue you asked about, as your call was incorrect. Your .ready() didn t contain the function.

However, you might want to consider setting up your plugin a little differently. Right now no one can override your defaults on a global basis, and your use of .extend obscures what you are trying to do. This is how I would recommend setting up your plugin, but of course, everyone does it differently:

;(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);

In addition to being easier to follow, someone can now override your options for all the calls to the plugin by using this:

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

I have written a helper for jQuery Plugins called Starter for jQuery but there are tons of other great resources out there.

友情链接