RequireJS和JS模块模式

9

我目前正在开发一个JavaScript应用程序,该应用程序使用“模块模式”的多个JavaScript文件。

就像这样:

var app = app || {};
app.moduleName = app.moduleName || {};

app.moduleName = function () {

    // private property
    var someProp = null;

    return {
        // public method
        init: function () {
            return "foo";
        }
    };
}();

我使用这个的原因是为了使我的代码结构化。例如,我可以通过调用app.moduleName.init()来调用方法或属性。
其中一个缺点是我必须在HTML中包含大量。
为解决这个问题,我找到了RequireJS,并阅读了文档。但我不太确定如何将其合并到现有的结构中,而不添加大量代码到现有的javascript文件中。
有没有人有任何建议如何实现这个?
1个回答

10
你可以使用require.js来构建你的模块树,就像这样。
// in main.js
require.config({/*...*/});
require(
    ['app'],
    function (app) {
        // build up a globally accessible module tree
        window.app = app;
        var foo = window.app.moduleName.init(); // returns "foo"
    }
);

// in app.js
define(
    ['moduleName'],
    function(moduleName){
        return {
            moduleName: moduleName;
        }
    }
);

// in moduleName.js
define(function(){
    // private property
    var someProp = "foo";
    return {
         // public method
        init: function () {
            return someProp;
        }
    }
});

然而,使用require.js,您可以构建应用程序而无需像这样全局模块树...即使您很容易就能做到。只需通过要求它们即可单独访问模块的所有部分。您在define/require回调中返回的任何内容都将作为引用存储在require.js中。这是需要了解的重要信息。因此,在应用程序中两次包含脚本并具有相同的对象或实例是可能的。例如,如果您像这样包含一个模块

// in SomeClass.js
define(function () {
    function SomeClass() {
        this.myValue = true;
    }
    return new SomeClass();
});

// app.js
define(
    ['SomeClass', 'someComponent'],
    function (SomeClass, someComponent) {
        return {
            init: function () {
                SomeClass.myValue = false;
                someComponent.returnClassValue(); // logs false
            }
        };
    }
);

// someComponent.js 
define(
    ['SomeClass'],
    function (SomeClass) {
        return {
            returnClassValue: function () {
                console.log(SomeClass.myValue); // false
            }
        };
    }
);

在所有包含的模块中,SomeClass.myValue的值都将是相同的...


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接