How can i have multiple module instance with requirejs

Question

I try to work with RequireJS and AMD module definition and have write a module that do my things in object format i think. (i went from jquery and have not study a OOP javascript well)

myModule.js

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

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

        // ... other methods
    }

    return myModule;
});

And it work well, but if i try to use it for more than one elements/time it override him self, and i can't use it more than one time in same page.

main.js

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

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

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

When i have more than one <div class="element"> on page only the last one work, i think because my module is override him self.

I tried to add new MyModule() but have a error TypeError: MyModule is not a constructor

I think i need to add a constructor or something else, in any case have a instance of my module to use instead of the object (that i think are precompiled by requirejs and returned ready for work). Any helps are good, many thanks in advance!

score 1 · Answer 1 · answered Mar 02 '17 at 09:23

Ok! For do that! I completely refactor my code, and instead of return a object in my module definition i prototyped a function for get after his instance and i create a constructor for reset the properties/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;
});

Great, now i can call myModule trough new myModuel() syntax and have same functionality for different elements on 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++;
        });
});

This work for me, i not completely understand yet what i do, but my purpose are satisfated, i can reuse same module functionality for different elemnts on page.

Suggest me readings:? I securely need to read something about OOP Javascript, prototype and how javascript manage instance/class/object/var in memory and namespaces.

How can i have multiple module instance with requirejs

1 Answers1