我如何使用 requirejs 拥有多个模块实例答案

【问题标题】：How can i have multiple module instance with requirejs我如何使用 requirejs 拥有多个模块实例
【发布时间】：2017-03-01 11:52:58
【问题描述】：

我尝试使用 RequireJS 和 AMD 模块定义，并编写了一个模块，以我认为的对象格式完成我的工作。（我是从 jquery 出来的，还没有学好 OOP javascript）

myModule.js

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

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

        // ... other methods
    }

    return myModule;
});

而且效果很好，但是如果我尝试将它用于多个元素/时间，它会覆盖他自己，并且我不能在同一页面中多次使用它。

main.js

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

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

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

当我在页面上有多个<div class="element"> 时，只有最后一个有效，我认为是因为我的模块是自己覆盖他的。

我尝试添加new MyModule()，但出现错误TypeError: MyModule is not a constructor

我认为我需要添加一个构造函数或其他东西，无论如何都要使用我的模块的一个实例而不是对象（我认为它由 requirejs 预编译并返回准备好工作）。任何帮助都很好，非常感谢！

【问题讨论】：

标签： javascript requirejs amd requirejs-define

【解决方案1】：

好的！为了这样做！我完全重构了我的代码，而不是在我的模块定义中返回一个对象，而是在他的实例之后创建了一个函数的原型，并创建了一个构造函数来重置属性/变量：

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

太好了，现在我可以通过 new myModuel() 语法调用 myModule 槽，并且对页面上的不同元素具有相同的功能。

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

这项工作对我来说，我还没有完全理解我在做什么，但我的目的是满足的，我可以为页面上的不同元素重用相同的模块功能。

建议我阅读：？我确实需要阅读有关 OOP Javascript、原型以及 javascript 如何管理内存和命名空间中的实例/类/对象/var 的内容。

【讨论】：