requireJS&seaJS模块加载器原理：<script>标签加载外部js文件用到的onload、onerror和onreadystatechange事件

最新推荐文章于 2025-02-25 09:04:25 发布

aitangyong

最新推荐文章于 2025-02-25 09:04:25 发布

阅读量4.5k

点赞数

分类专栏： requireJS&AMD seajs&CMD 文章标签： script onload script onerror requirejs加载js seajs加载js

本文链接：https://blog.youkuaiyun.com/aitangyong/article/details/49425061

版权

本文深入探讨了requireJS和seaJS这两种JavaScript模块加载器的工作原理，重点讲解了<script>标签在加载外部JS文件时如何利用onload、onerror和onreadystatechange事件确保文件的正确加载与错误处理，帮助开发者理解模块化加载背后的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前学习了requireJS框架，最近在学习seaJS框架，两者都是js模块文件的加载器，做的事情大致是相同的。这篇文章学习下<script>标签的一些特性，了解框架是如何加载js文件的。requireJS和seaJS其实都是通过动态创建<script>标签，设置好<script>标签的相关属性，然后再将<script>标签插入到<head>节点下。最终生成的<script>标签，大致形式如下：

<script type="text/javascript" charset="UTF-8" async="true"
	src="modules/bModule.js" 
	οnlοad="console.log('onload')" οnerrοr="console.log('onerror')" 
	onreadystatechange="console.log('state='+this.readyState);">
</script>

这跟我们平时自己在html文件中，通过<script>标签加载外部js文件没有什么特别的，唯独多了onload、onerror等事件。其实这些事件，浏览器本身就是支持的，只不过我们平时没有用到，但是作为框架却需要使用这些高级特性。现在我们通过一个例子，看看这3个事件的使用，有图有真相。