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

hykeda2个月前JS258

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', () => {

})


相关文章

ES6导出、导入模块方式

ES6使用 export 和 import 来导出、导入模块 。export导出的,导入需要用{}var firstName = 'Michael';var lastName = &#...

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

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

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

计算两个经纬度之间的距离

PHP计算:#lng为经度,lat为纬度,一定不要弄错了哦 function distance($lat1, $lng1, $lat2, $lng2){ &...

天地图用服务端去调用接口提示403错误,解决办法

天地图用服务端去调用接口提示403错误,这里很有可能就是跨域问题。可以使用天地图官方的处理跨域的地址去处理:https://api.tianditu.gov.cn/apiserver/ajaxprox...

介绍几款有用的图表插件

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

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

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

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

发表评论    

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