Question

我正在实施面向AMD模块的js框架，该框架将在第三方网站上使用。

使用此行，框架用户将配置必要的模块

<script data-main="/main.js" src="/require.js"></script>

问题是data-main引用是异步加载的，因此任何依赖main.js加载的模块的js逻辑都会失败，除非我能确定它已完成加载。

我对requirejs很新，所以不确定创建一个供其他人使用的框架的好习惯。

如何解决这个非常简单的问题？

修改一个例子来解释我的观点

main.js

requirejs.config({
    paths: {
        jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
    }
});

主js参考+额外代码

 <script data-main="/main.js" src="/require.js"></script>
 <script>
    require(['jquery'], function($) {
        // since main.js is not loaded yet, it will assume that there is a jquery.js 
        // file on the same folder that this file
        console.log('myModule was also loaded and can use jQuery');
    });
 </script>

Answer 1

如果您想依赖其他库并且专门针对需求管道，那么您需要做的就是使用

声明一些依赖项

define(
    'myModule',    // module name
    ['foo'],       // module dependencies
    function(foo){ // module construction
        var myModule = {};

        .... code to set up the module ....

        return myModule;
    });

并且需要处理事情。这将使用Require注册您的模块，并且在您的所有依赖项都可用之前不会尝试构建模块。讨论了此功能here。

使用示例更新

要求JS设计为使用和不使用预构建配置。 Require config对象的paths属性仅向Require提供有关如何尝试查找尚未注册的库的信息。但是，无论模块的注册方式/位置如何，注册和依赖性解析都由Require处理。有关如何注册和使用依赖项的工作示例，请参阅this JSFiddle。

关于配置的更新2

由于RequireJS以异步方式加载所有内容，因此您的代码示例不起作用。但是，你正在做出一个关于如何“假设”工作的错误假设。您有一个不正确的示例，说明您的库的客户端需求配置将是什么样子。如果其他人正在使用RequireJS构建应用程序并且他们想要使用您的库，他们应该在require.config中声明库的路径：

require.config({
    paths: {
        // this tells require how to load jQuery (a library maintained neither by you nor your clients).
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
        // this tells require how to load myModule (the library you are building for your clients).
        'myModule': '//example.com/js/my-module.min',
        // this tells require how to load foo (a library built and hosted by your clients).
        'foo': 'scripts/foo'
    }
});

另一方面，如果您的客户无法更新其要求配置以将您的库包含在声明中，那么您运气不好。您所能做的就是获取所有依赖项并将它们捆绑在您的分发文件中，然后声明没有依赖项：

define(
    'myModule',
    [], // can't declare any dependencies
    function() {
        // these dependencies are inside of the definition function to keep the global namespace clean
        // since we need jQuery, we have to inline it:
        var jQuery = ....
        // same goes for d3.js
        var d3 = ....

        // now we can set up the module itself
        var myModule = {};
        .... code to set up the module ....
        return myModule;
    }
);

显然，此选项意味着您无法使用客户端使用的库。这意味着您的库会更重，并且包含有效的重复代码和数据。

希望能帮助您了解Require的工作原理以及其他人如何使用您的库。

Answer 2

我终于使用了这种方法

<script src="http://mydomain/js/require.js"></script>
<script>
requirejs.config({  
    baseUrl: 'http://mydomain/js' 
});
require(['main'],function(){
    // here users can do anything they want as all required libraries are loaded
});
</script>

main.js加载了require指令，而不是使用脚本标记中的data-main属性，这提供了一个用户可以放置代码的回调。

如何让用户访问main之外的requirejs模块？

2 个答案: