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() 来调用方法或属性。

这样做的一个缺点是我必须<script src="app.moduleName.js">在我的 HTML 中包含很多 .. 等。

为了解决这个问题，我遇到了 RequireJS，我阅读了文档。但我不太确定如何将它合并到我现有的结构中，而不向现有的 javascript 文件添加一堆代码。

有人对如何做到这一点有任何建议吗？

4

1 回答 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 的值在所有包括模块中都是相同的......

于 2012-10-25T11:20:34.990 回答