Require.js和在DOM中创建<script>元素有什么区别？

Question

使用Require.JS和<script>在DOM中创建元素之间的区别是什么？

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

例如,假设我有函数doStuff(),这需要函数needMe().doStuff()在外部文件中do_stuff.js,而needMe()在外部文件中need_me.js.

这样做Require.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库.我真的没有看到任何功能差异......

Answer 1

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

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

相反,为了使你所建议的实际工作,你需要做这样的事情:

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应用程序,其中一个页面从一个页面转换到另一个页面,从而导致重新加载资源,则延迟加载方法可能有助于加速这些转换.

Answer 2

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

RequireJS:异步JavaScript加载

• 某种#include/import/require
• 加载嵌套依赖项的能力
• 易于开发人员使用,但后来有一个有助于部署的优化工具

Answer 3

使用RequireJS的其他一些非常尖锐的原因是有道理的:

1. 对于大型项目,管理自己的依赖项很快就会崩溃.
2. 您可以拥有任意数量的小文件,而不必担心跟踪依赖关系或加载顺序.
3. RequireJS可以在不触及窗口对象的情况下编写整个模块化应用程序.

取自rmurphey在这个要点中的评论.

抽象层可能是学习和适应的噩梦,但是当它有用并且做得好时,它才有意义.