从简单的模块模式迁移到RequireJS AMD

Question

我在我的Javascript应用程序中使用Module Pattern,我想迁移到RequireJS和AMD.

我目前的实现是这样的:

// Module main : Module.js
var myModule = (function(my, $, undefined) {
    'use strict';

    var m_privateMembers;
    var m_stuff = new my.Pear({color:"green"});

    //---------------------------------------

    function privateFunctions(args) {
    }

    //-----------------------------------

    my.publicFunctions = function(args) {
    };

    return my;
})(myModule || {}, jQuery);



// Module class Fruit : Module.Fruit.js
var myModule = (function(my, $, undefined) {
    'use strict';

    my.Fruit = Object.makeSubclass();

    my.Fruit.prototype._init = function() {

    };

    my.Fruit.prototype.someClassFunction = function() {
    };

    return my;
})(myModule || {}, jQuery);


// Module class Pear : Module.Pear.js
var myModule = (function(my, $, undefined) {
    'use strict';

    my.Pear = Fruit.makeSubclass();

    my.Pear.prototype._init = function(args) {
        this.m_someClassMember = args;
    };

    my.Pear.prototype.someClassFunction = function() {
    };

    return my;
})(myModule || {}, jQuery);

在我的index.html中,我使用脚本html标签来包含我的不同模块文件,一切正常.

我的问题是:

1/为什么RequireJS系统比这个多个脚本标签系统更好？

使用我目前的RequireJS方法:

define(['jquery'], function($) {

    var myModule = (function(my, $, undefined) {
        'use strict';

        var m_privateMembers;
        var m_stuff = new my.Pear({color:"green"});

        //---------------------------------------

        function privateFunctions(args) {
        }

        //-----------------------------------

        my.publicFunctions = function(args) {
        };

        return my;
    })(myModule || {}, $);

    return myModule;
});

2/我如何迁移到RequireJS模块并保持我的实际模块提供的类似单一模式的嵌入式子类？

显然有几个问题:

2.1/*m_stuff无法实例化my.Pear,我不知道如何在需要的几个文件中拆分模块？*

2.2/如果我有两个其他模块都依赖于myModule,那么myModule var将是那些模块中的相同实例(因为myModule不再在全局范围内)？

编辑:这个快速模式说明了我需要做的事情,在一个更复杂的框架中:

模式

Answer 1

为什么 RequireJS 系统比这个多脚本标签系统更好？

我不会详细介绍这一点，但仅通过查看现有的模块设置，您就可以看到 AMD 将消除显式脚本排序和将事物分配给名称空间的需要。RequireJS 构建工具也会负责为生产准备脚本。

您可以阅读更多内容

• 为什么使用 Web 模块- http://requirejs.org/docs/why.html
• 你能帮我了解 require.js 的好处吗？- https://gist.github.com/desandro/4686136

我如何迁移到 RequireJS 模块并保留我的实际模块为嵌入式子类提供的类似单例的模式？

我们以水果和梨为例来看一下

当使用requireordefine时，您已经创建了一个将封装所有逻辑的闭包，因此无需在内部创建另一个闭包。把事情简单化。

// Fruit.js
define(['jquery'], function($) {
    'use strict';

    var Fruit = Object.makeSubclass();

    Fruit.prototype._init = function() {

    };

    Fruit.prototype.someClassFunction = function() {

    };

    return Fruit;
});

// Pear.js
define(['jquery', 'path/to/Fruit'], function($, Fruit) {
    'use strict';

    var Pear = Fruit.makeSubclass();

    Pear.prototype._init = function(args) {
        this.m_someClassMember = args;
    };

    Pear.prototype.someClassFunction = function() {

    };

    return Pear;
});

我不知道如何使用 require 将模块拆分为多个文件？

本质上只需将您的“类”或模块分解为单独的 AMD 模块，并在需要时显式定义依赖关系。您可以从上面的示例中看到 Pear 如何使用 Fruit 模块。

如果我有两个其他模块都依赖于 myModule，那么 myModule var 是否是这些模块中的同一实例（因为 myModule 不再位于全局范围内）？

一旦您需要一个模块并加载它，那么其他模块对它的任何其他引用都将获得相同的实例。因此，最佳实践通常是让您的模块返回构造函数并允许其他模块在必要时实例化它。