1

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

我的模块.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 预编译并返回准备工作）。任何帮助都是好的，非常感谢提前！

4

1 回答 1

1

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

我的模块.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;
});

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

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 如何在内存和命名空间中管理实例/类/对象/变量的内容。

于 2017-03-02T09:23:51.340 回答