在DOM中使用Require.JS和简单地创建一个<script>
元素有什么区别?
我对Require.JS的理解是,它提供了加载依赖项的能力,但这不能简单地通过创建一个加载必要的外部JS文件的<script>
元素来实现吗?
例如,假设我有一个函数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库。我真的看不到任何功能上的区别。
发布于 2011-02-07 02:26:17
以下是ajaxian.com上关于为什么使用它的一篇很好的文章:
RequireJS: Asynchronous JavaScript loading
加载供开发人员使用的嵌套dependencies
,然后由有助于部署的优化工具提供支持
发布于 2013-07-01 08:14:23
与简单地在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应用程序遵循更传统的模型,即从一个页面转换到另一个页面,导致资源重新加载,则延迟加载方法可能有助于加速这些转换。
发布于 2014-06-20 09:20:45
使用RequireJS有意义的其他一些非常明确的原因:
摘自rmurphey's comments here in this Gist。
抽象层可能是学习和适应的噩梦,但当它服务于一个目的并做得很好时,它就是有意义的。
https://stackoverflow.com/questions/4915201
复制相似问题