在使用do.js进行js管理时遇到的问题

hykeda3周前JS106

Do.js 是一个轻量级的 JavaScript 模块加载器和 DOM 就绪事件处理器,它主要用于管理 JavaScript 和 CSS 文件的异步加载、处理模块依赖关系以及执行 DOM 就绪后的回调函数。

比如我有a.js,在页面中包含a.js时想一起加载其他的js文件,在其他文件加载完后处理js事件。这样就可以用到这个轻量级的模块加载工具do.js。

首先这个do.js是基于jquery实现的,所以在使用的时候必须要有jquery在do.js文件中需要配置jquery的地址:

微信图片_20250409163415.png

如果你的页面中已经存在了jquery,那么在do.js的文件中核心库这里配置一个空的js文件,如果你不配置则会报错。

然后再html中加入

<script src="__PUBLIC__/js/do.js"></script>

在引入

<script src="__PUBLIC__/js/a.js"></script>

在a.js文件中就可以引入其他的js文件,并且可以有依赖关系:

微信图片_20250409163647.png

比如这里我引入了两个js,一个是gcoord.global.prod.js 和 一个天地图的js文件,可以支持远程地址。

然后使用:

微信图片_20250415094309.png

这类的gcoordJs表示将gcoord.global.prod.js命名成gcoordJs模块了。这里表示当两个模块加载成功后,在里面可以执行自己想要的操作,这里比如可以进行天地图的一些接口调用。

在使用这个js的时候遇到一个bug,必须重点说明一下:

微信图片_20250415094607.png

没有依赖其他的模块,那么里面的requires:[]这个必须去掉,不然无法加载成功,类似下面的情况:

微信图片_20250415093820.png

如果两个js存在依赖关系:

微信图片_20250415093955.png

这里表示gcoordJs需要依赖tiandituJS。就是加载gcoordJs的时候会同时加载tiandituJS。

特别注意:在add一个文件后,必须要使用Do('')方法去实现,不然没有效果。

比如我现在要实现预加载css文件:

Do.add('tdt-css', {path: '__PUBLIC__/css/tdtcss.css', type: 'css'});

如果单纯只这样添加一下,页面加载时不会去预加载这个css文件的,必须执行一下:

Do('tdt-css', () => {

})


相关文章

JavaScript图片延迟加载微型库Echo.js

JavaScript图片延迟加载微型库Echo.js

JavaScript图片延迟加载微型库Echo.js Echo.js是一个标准的独立的Javascript图片懒加载(延迟加载)库,它非常小巧快速,只有2KB,它使用HT...

WebAPP开发——H5标签audio(属性和API事件)

WebAPP开发——H5标签audio(属性和API事件)

audio支持的格式audio 定义音频 格式:mp3 wav oggmp3所有浏览器兼容ogg safari不支持wav 都支持js 能帮助生成audio对象 new Audio(); 等同于HTM...

js 对象合并和数组合并

1、对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。let obj1 = {     name:...

19个提高工作效率的JavaScript单行代码

1. 生成随机字符串当我们需要一个唯一id时,通过Math.random创建一个随机字符串简直不要太方便噢!!!const randomString = () ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。