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

Migration from simple Module pattern to RequireJS AMD

本文关键字：RequireJS AMD 迁移 模式 简单 模块      更新时间：2023-09-26

我在Javascript应用程序中使用模块模式，我想迁移到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模块，并保留我的实际模块提供的带有嵌入式子类的类似于singleton的模式

显然存在几个问题：

2.1/*m_stuff无法实例化我的.Pear，我不知道如何用require？*将模块拆分到几个文件中

2.2/如果我有另外两个模块都依赖于myModule，那么myModule var会是这些模块中的同一个实例吗（因为myModule不再在全局范围内）

edit：这个快速模式说明了我需要在一个更复杂的框架中做什么：

模式

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

我不会讨论这个问题的来龙去脉，但只要看看你现有的模块设置，你就会发现AMD将否定对显式脚本排序和向命名空间分配东西的需求。RequireJS构建工具还将负责为生产准备脚本。

你可以阅读更多

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

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

让我们以水果和梨为例来看看

当使用require或define时，您已经在创建一个封装所有逻辑的闭包，因此不需要在其中创建另一个闭包。保持简单。

// 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模块，并在需要的地方明确定义依赖关系。你可以从上面的例子中看到梨是如何使用水果模块的。

如果我有另外两个模块都依赖于myModulemyModule变量是那些模块中的同一实例（因为myModule不再在全球范围内）？

一旦你需要一个模块一次，并且它被加载了，那么其他模块对它的任何其他引用都会得到相同的实例。出于这个原因，通常最好的做法是让您的模块返回构造函数，并允许其他模块在必要时实例化它。

相关文章：