newbie jQuery plugin issue

Question

Je viens juste d'entrer dans les plugins jQuery et je voulais faire une sorte d'exercice 'hello world' avec un template de plugin orienté objet barebones. Mais je ne peux pas obtenir l'instruction console.log dans la fonction setup() ci-dessous pour afficher dans une fenêtre de console firebug.

J'appelle le plugin comme ceci:

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

Comme je l'ai dit, la déclaration console.log dans la fonction setup() n'affiche pas. Je ne sais pas pourquoi. Cependant, si je mets une déclaration console.log immédiatement après la première ligne, par exemple, il fonctionne:

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

..... Quelqu'un peut-il s'il vous plaît me dire ce que je fais mal?

Answer 1

Votre appel est incorrect:

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

Answer 2

Ambrosia souligne la question que vous avez parlé, comme l'appel était incorrect. Votre .ready() ne contenait pas la fonction. Toutefois, vous pourriez envisager de configurer votre plugin un peu différemment. À l'heure actuelle, personne ne peut remplacer vos valeurs par défaut à l'échelle mondiale, et votre utilisation de .extend obscurcit ce que vous essayez de faire. Voilà comment je recommande la configuration de votre plugin, mais bien sûr, tout le monde le fait différemment:

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

En plus d'être plus facile à suivre, quelqu'un peut désormais remplacer vos options pour tous les appels vers le plug-in en utilisant ceci:

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

J'ai écrit une aide pour jQuery Plugins appelé Starter for jQuery mais il y a des tonnes d'autres grandes ressources là-bas.