首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在DOM中简单地创建一个<script>元素和Require.js有什么不同?

在DOM中简单地创建一个<script>元素和Require.js有什么不同?
EN

Stack Overflow用户
提问于 2011-02-07 02:22:27
回答 4查看 32.9K关注 0票数 138

在DOM中使用Require.JS和简单地创建一个<script>元素有什么区别?

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

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

以Require.JS的方式做到这一点:

代码语言:javascript
复制
define(['need_me'],function(){
    function doStuff(){
        //do some stuff
        needMe();
        //do some more stuff
    }
});

只需创建一个元素即可完成此操作:

代码语言:javascript
复制
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库。我真的看不到任何功能上的区别。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-02-07 02:26:17

以下是ajaxian.com上关于为什么使用它的一篇很好的文章:

RequireJS: Asynchronous JavaScript loading

加载供开发人员使用的嵌套dependencies

  • ease的
  • 某种

,然后由有助于部署的优化工具提供支持

票数 43
EN

Stack Overflow用户

发布于 2013-07-01 08:14:23

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

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

相反,为了让你的建议真正起作用,你需要这样做:

代码语言:javascript
复制
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应用程序遵循更传统的模型,即从一个页面转换到另一个页面,导致资源重新加载,则延迟加载方法可能有助于加速这些转换。

票数 52
EN

Stack Overflow用户

发布于 2014-06-20 09:20:45

使用RequireJS有意义的其他一些非常明确的原因:

  1. 管理你自己的依赖关系对于大型项目来说很快就会崩溃。
  2. 你可以拥有尽可能多的小文件,而不必担心跟踪依赖关系或加载window使编写完整的模块化应用程序成为可能,而不需要接触窗口对象。

摘自rmurphey's comments here in this Gist

抽象层可能是学习和适应的噩梦,但当它服务于一个目的并做得很好时,它就是有意义的。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4915201

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档