javascript脚本封装

最新推荐文章于 2025-02-23 12:51:07 发布

原创最新推荐文章于 2025-02-23 12:51:07 发布 · 964 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#脚本 #javascript #jquery #chrome #function #yui

本文探讨了如何在网页中动态加载JavaScript脚本，并确保所有依赖项正确加载的方法。介绍了通过动态创建`<script>`标签并监听其`onload`事件来实现按需加载和依赖管理的技术。

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

很多时候在一个页面当中会引用到很多javascript的脚本，这些脚本我们有时候可能会想进行一些打包封装，简单来说只需要引入一个统一入口的脚本文件。举个例子你现在有一个负责翻译的脚本文件translate.js。而在translate.js中你可能会用到其它的javascript框架，像Jquery, YUI等，这个时候一般的做法是在你需要用的HTML页面里直接添加多个<script>标签来完成。这种方式虽然比较常用，但有时可能会比较麻烦，如果一个页面要加载十几个javascript脚本，有几十个页面要都要加载。这种情况就copy和paste好多次了~。当然也可能通过一些服务器语言的特性来解决，像JSP的话可以通过import一个公共common.jsp来解决问题。但本文中采用另外一种方式。就是通过动态脚本来实现依赖脚本的载入。就是平常所用的如下代码：

var j = document.createElement('script');j.setAttribute('src', 'http://*/js/jquery.min.js');document.body.appendChild(j);

当然，如果要加载的依赖脚本有多个的话，这里要注意的是一般的通过页面<script>加载的脚本（一般也叫做parse-inserted script）执行的时候是按顺序同步执行，这样的话只要脚本顺序没问题，页面代码就不会有问题。但当是动态加载多个脚本的时候，执行是异步加载的，也就是如果先加载完的脚本调用了后加载脚本的某些未加载完的部分，执行会出错。这样的话应该让依赖的脚本先加载完成，才进行后续脚本的载入。

怎么样来确保依赖的脚本已经加载完毕了呢？这个就是我今天要跟大家探讨的问题。

var done = false; var script = document.createElement('script'); script.setAttribute('src', 'http://*/js/jquery.min.js'); document.body.appendChild(script); script.onload = script.onreadystatechange = function(){ if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) { done = true; } };

通过如上所示的方法即可判断脚本加载情况，如果已加载完成，则done为true。此方法兼容IE,FF,Chrome。