Require.js 和简单地在 DOM 中创建<script> 元素有什么区别？[已关闭]

javascript requirejs dynamic-script-loading js-amd

2022-08-30 04:15:26

使用 Require.JS在 DOM 中创建元素有什么区别？<script>

我对 Require.JS的理解是它提供了加载依赖项的功能，但这难道不能简单地通过创建一个加载必要的外部 JS 文件的元素来完成吗？<script>

例如，让我们假设我有函数，它需要函数。位于外部文件中，而位于外部文件中。doStuff()needMe()doStuff()do_stuff.jsneedMe()need_me.js

以“必需.JS方式执行此操作：

define(['need_me'],function(){
    function doStuff(){
        //do some stuff
        needMe();
        //do some more stuff
    }
});

只需创建一个脚本元素即可执行此操作：

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);

    //do some stuff
    needMe();
    //do some more stuff
}

这两者都有效。但是，第二个版本不需要我加载所有 Require.js库。我真的没有看到任何功能差异...

答案 1

与在 DOM 中简单地创建元素相比，Require.JS 提供了哪些优势？

在您的示例中，您正在异步创建脚本标记，这意味着您的函数将在need_me.js文件完成加载之前被调用。这会导致未定义函数的未捕获异常。needMe()

相反，要使你所建议的内容真正起作用，你需要做这样的事情：

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';

    scriptElement.addEventListener("load", 
        function() { 
            console.log("script loaded - now it's safe to use it!");

            // do some stuff
            needMe();
            //do some more stuff

        }, false);

    document.getElementsByTagName('head')[0].appendChild(scriptElement);

}

可以说，最好使用像 RequireJS 这样的包管理器，或者使用上面演示的纯 JavaScript 策略。虽然 Web 应用程序的加载速度可能更快，但在网站上调用功能和特性会更慢，因为它需要等待资源加载，然后才能执行该操作。

如果 Web 应用程序是作为单页应用构建的，则请考虑人们实际上不会经常重新加载页面。在这些情况下，预加载所有内容将有助于在实际使用应用程序时使体验看起来更快。在这些情况下，你是对的，只需在页面的头部或正文中包含脚本标签，就可以加载所有资源。

但是，如果构建的网站或 Web 应用程序遵循更传统的模型，其中一个模型从一个页面转换到另一个页面，从而导致资源重新加载，则延迟加载方法可能有助于加快这些转换。

答案 2

这是关于 ajaxian.com 为什么使用它的好文章：

RequireJS： Asynchronous JavaScript loading

某种#include/导入/要求
能够加载嵌套依赖项
开发人员易于使用，但随后由有助于部署的优化工具提供支持