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

hykeda12个月前JS1113

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...

生成随机图片

function getMockImagesURL() { let arr = [200, 250, 300, 350, 400, 450]; const width = arr[...

前端截取视频指定帧为封面的两种方法

前端截取视频指定帧为封面的两种方法

一、使用本地canvas截取我们在网页上传视频后,如果能给视频设置一个封面图,用户体验会比较好,但是如果使用video标签的默认实现,部分浏览器会显示视频的第一帧,有些浏览器则怎么都不会展示;通过创建...

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

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

如何实现精准的setTimeout

setTimeout 是不准的。因为 setTimeout 是一个宏任务,它的指定时间指的是:进入主线程的时间。setTimeout(callback, 进入主线程的时间)所以什么时候可以执...

介绍几款有用的图表插件

大家在开发一些系统的时候会用到很多统计的图表,我在做统计报表的时候用过挺多图表插件的,现在推荐大家几款优秀、稳定、可靠、大公司开发的图表体统。 1、Highcharts Highchart...

发表评论    

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