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

最新推荐文章于 2024-02-12 09:00:00 发布

原创

最新推荐文章于 2024-02-12 09:00:00 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#script onload #script onerror #requirejs加载js #seajs加载js

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

之前学习了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" 
	onload="console.log('onload')" onerror="console.log('onerror')" 
	onreadystatechange="console.log('state='+this.readyState);">
</script>

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

demo.html代码如下：

<head>
	<script type="text/javascript" charset="UTF-8" async="true" src="modules/bModule.js"
		onload="console.log('onload')" onerror=""

最低0.47元/天解锁文章