首页 > 其他分享 >动态加载JS文件

动态加载JS文件

时间:2023-12-29 09:56:12浏览次数:27  
标签:head resolve script JS Promise 动态 加载

在某些特殊场景下,特别是在库和框架的开发过程中,需要动态加载JS文件并执行它们。下面是使用 Promise 的简单封装。

function loadJS(files, done) {
// Get the head tag
const head = document.getElementsByTagName('head')[0];
Promise.all(files.map(file => {
return new Promise(resolve => {
//Create a script tag and add it to the head
const s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = file;
//Listen to the load event and resolve if the loading is completed
s.addEventListener('load', (e) => resolve(), false);
head.appendChild(s);
});
})).then(done); // Everything is completed, execute the user's callback event
}
loadJS(["test1.js", "test2.js"], () => {
//User callback logic
});

 

上面的代码有两个核心点。一种是使用Promise处理异步逻辑,使用script标签加载执行js。

标签:head,resolve,script,JS,Promise,动态,加载
From: https://www.cnblogs.com/jiangyueniannian/p/17934092.html

相关文章

  • js的作用域
    全局作用域全局作用域是指代码中任何地方都可以访问的变量,在整个应用程序中都是可见的局部作用域(函数作用域)局部作用域是指在函数内部定义的变量,它们只能在函数内部访问,函数外部无法访问块级作用域这是一个特殊的作用域,在es6之前,js中没有块级作用域。在es6中,使用let和const......
  • .NET 6 控制台程序(Console)读取配置appsettings.json配置文件
    ​ 1、添加引用Microsoft.Extensions.Configuration.Json添加引用 Microsoft.Extensions.Configuration.Json,引用方法可以参考:1)使用Nuget界面管理器搜索"Microsoft.Extensions.Configuration.Json"在列表中分别找到它,点击"安装"相关文档:VS(VisualStudio)中Nuget的使用......
  • 12.28数组遍历以及动态初始化,数组求最值,基础方法1
    fori用法:数组名.fori直接依次遍历数组中所有元素数组的动态初始化:定义没有元素的数组(静态初始化即已知元素)   方法调用:方法名(); ......
  • elf与动态库大小裁剪
    老板最近看拼多多的包挺小的,扔了一篇文章过来让我们优化优化各自的动态库,美团这篇关于动态库大小缩减的文章,说的极好哈哈:https://tech.meituan.com/2022/06/02/meituans-technical-exploration-and-practice-of-android-so-volume-optimization.html#按需导出符号对库大小影响大......
  • 初见threejs
    threejs底层封装了强大的webGL技术,让开发者们可以开箱即用(其实也并非开箱即用,还是挺麻烦的......
  • Unity解析key不确定的Json
    遇到Json的key不固定时,只需要解析value,如下Jsondata下的key(1和2)是变化的:{"status":1,"msg":"success","data":["1:":{"atitle":"test",......
  • SwiftUI 中Webview与JS交互
    iOS中WKWebview原生与网页端JS交互常用的方法是首先在webview中注入标定好的方法名,例如标定一个request方法letconfig=WKWebViewConfiguration()letuserContent=WKUserContentController();  vardealMessage=DealMessage()userContent.add(dealMessage,name:......
  • 前端那些好用的CSS/JS网站
    ......
  • 在nodejs环境里使用canvas和sharp生成图片
    1.安装依赖包npminstalljsdomcanvas2.实例代码const{JSDOM}=require('jsdom');const{createCanvas}=require('canvas');//创建一个虚拟DOM环境constdom=newJSDOM('<!DOCTYPEhtml><html><head></head><body>&......
  • phantomjs selenium 如何动态修改代理?
    在使用PhantomJS和Selenium进行网页爬取时,动态修改代理可以通过使用Selenium的WebDriver的service_args参数来实现。以下是一个基本的示例,演示了如何在PhantomJS中动态修改代理:fromseleniumimportwebdriver#设置PhantomJS的可执行文件路径phantomjs_path='/......