require.js，我做得对吗?

require.js, am I doing it right?

本文关键字：js require      更新时间：2023-09-26

我刚接触require.js，发现它的文档很难理解。过了一会儿，我启动了我的项目，并使用以下设置运行。

project
    |
    |--js
        |--vendor
            |--require.js
            |--modernizr.js
            |--jquery.js
        |--modules
            |--module1.js
            |--module2.js
        |--main.js
    |--index.html

index . html: 

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script data-main="/js/main.js" src="/js/vendor/require.js"></script>
    </body>
</html>

main.js 

define([
    "vendor/modernizr",
    "modules/module1",
    "modules/module2"
]);

模块/module1.js 

define(['vendor/jquery'], function () {
    // Some module code like
    $('#button').on('click', function(){});
});

这是一个很好的设置，如果我喜欢有一个导入文件(main.js)喜欢在一个较少的设置CSS?

这个设置基本上是正确的，只是需要做一些轻微的修改。

对于模块，您需要为模块的每个依赖项传入匹配数量的参数。在这种情况下，您将希望将$分配给jQuery模块返回的内容，以便您可以在模块中实际使用$:

define(['vendor/jquery'], function ($) {
    // Some module code like
    $('#button').on('click', function(){});
});

对于main.js, define()调用应该是require()调用，以便您将执行模块中的任何内容，而不是简单地将其注册为其他模块执行的模块:

require([
    "vendor/modernizr",
    "modules/module1",
    "modules/module2"
], function(Modernizr, module1, module2) {
   // do something with Modernizr, module1, module2
});
相关文章：