2017-03-01 2 views
0

J'essaie de travailler avec la définition de module RequireJS et AMD et d'écrire un module qui fait mes choses au format objet je pense. (je suis allé de jquery et ont pas étudier un POO javascript bien)Comment puis-je avoir plusieurs instance de module avec requirejs

myModule.js

define([ 
    jquery, 
    datepicker, 
], function ($, datepicker) { 
    var myModule = { 
     debug: true, 
     lang: 'auto', 

     initModule: function (element) { 
      myModule.element = element; 
     }, 

     // ... other methods 
    } 

    return myModule; 
}); 

Et ça marche bien, mais si je tente de l'utiliser pour plus d'un des éléments/temps override lui-même, et je ne peux pas l'utiliser plus d'une fois dans la même page.

main.js

requirejs(['MyModule'], 
    function (MyModule) { 

     // all the elements on page 
     $elements = $('.element'); 

     $elements.each(function() { 
      MyModule.initModule($(this)); 
     }); 
}); 

Quand j'ai plus d'un <div class="element"> à la page que le dernier travail, je pense que mon module est lui substituer l'auto.

J'ai essayé d'ajouter new MyModule() mais une erreur TypeError: MyModule is not a constructor

Je pense que je dois ajouter un constructeur ou quelque chose d'autre, en tout cas avoir une instance de mon module à utiliser au lieu de l'objet (que je pense sont précompilé par requirejs et retourné prêt pour le travail). Toute aide est bonne, merci d'avance!

Répondre

0

Ok! Pour faire ça! Je Refactor complètement mon code, et au lieu de retourner un objet dans ma définition du module i prototypé une fonction pour obtenir après son exemple et je crée un constructeur pour réinitialiser les propriétés/vars:

myModule.js

define([ 
    jquery, 
    datepicker, 
], function ($, datepicker) { 
    // constructor 
    var myModule = function() { 
     // reset lang because it maybe was changed in previous instance, 
     // i think because javascript share this thing trough objects? 
     myModule.prototype.lang = 'auto'; 
    } 

    myModule.prototype.debug = true 
    myModule.prototype.lang = 'auto'; 

    myModule.prototype.initModule = function (element) { 
     myModule.element = element; 
    }; 

    // ... other methods with `myModule.prototype.` prefix 


    return myModule; 
}); 

Très bien, maintenant je peux appeler ma syntaxe myModule new myModuel() et avoir la même fonctionnalité pour les différents éléments de la page.

main.js

requirejs(['MyModule'], 
    function (MyModule) { 

     // all the elements on page 
     $elements = $('.element'); 

     var p = 1, _mod = []; 
     $elements.each(function() { 
      _mod[p] = new MyModule(); 

      _mod[p].initModule($(this)); 
      p++; 
     }); 
}); 

Ce travail pour moi, je ne comprends tout à fait encore ce que je fais, mais mon but sont satisfated, je peux réutiliser même fonctionnalité de module pour différentes elemnts à la page.

Suggère moi des lectures:? J'ai sûrement besoin de lire quelque chose à propos de OOP Javascript, prototype et comment javascript gère instance/class/object/var dans la mémoire et les espaces de noms.