js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式
第一种:函数引用 将所需加载方法放在匿名函数中传入
//第一种 函数引用
function loadScript(url,callback){
//创建一个js
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用
script.onreadystatechange=function(){
if(script.readyState=="conplete"||script.readyState=="loaded"){
callback();
}
}
}else{
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用
script.onload=function(){
callback();
}
}
script.src=url;
//将js加载到页面上去
document.head.appendChild(script);
} loadScript("demo.js",function(){ //函数引用 将需要实现的方法传入
test();
})
第二种:eval 会把字符串当做函数代码来执行 将使用方法以字符串形式传入进去(不推荐)
//第二种 eval
function loadScript(url,callback){
//创建一个js
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用
script.onreadystatechange=function(){
if(script.readyState=="conplete"||script.readyState=="loaded"){
eval(callback);
}
}
}else{
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用
script.onload=function(){
eval(callback);
}
}
script.src=url;
//将js加载到页面上去
document.head.appendChild(script);
} loadScript("demo.js","test()");
demo.js:
function test(){
console.log("a")
}
第三种 与函数库相配合
//第三种 与函数库相配合
function loadScript(url,callback){
//创建一个js
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用
script.onreadystatechange=function(){
if(script.readyState=="conplete"||script.readyState=="loaded"){
tools[callback]();
}
}
}else{
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用
script.onload=function(){
tools[callback]();
}
}
script.src=url;
//将js加载到页面上去
document.head.appendChild(script);
} loadScript("demo.js","test");
demo.js
var tools={
"test":function(){
console.log("a");
},
"demo":function(){
console.log("b");
}
}
js异步执行 按需加载 三种方式的更多相关文章
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- iOS字体加载三种方式
静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...
- entity framework 数据加载三种方式的异同(延迟加载,预加载,显示加载)
三种加载方式的区别 显示加载: 显示加载
- vue的异步组件按需加载
当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...
- flask配置加载几种方式
方法一.直接配置 app.config['HOST']='xxx.a.com' print(app.config.get('HOST')) 方法二.通过环境变量加载配置 环境变量:export MyA ...
- Windows学习总结(8)——DOS窗口查看历史执行过的命令的三种方式
在DOS窗口执行了一些列命令完成某项工作后,如果要查看都执行了那些命令,该如何办呢?(前提:DOS窗口未关闭的情况下) 一.方法一: 使用↑↓箭头上下翻看执行过的命令,此方式适宜执行命令较少的情况. ...
- Flask的配置文件加载两种方式
配置文件 1 基于全局变量 2 基于类的方式 配置文件的加载需要将配合文件的相对路径添加到app.config.from_object("文件路径"),类的方式也是一样,需要将类的 ...
- js中将字符串转换成json的三种方式
1,eval方式解析,恐怕这是最早的解析方式了.如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; ...
- JS创建对象,数组,函数的三种方式
害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象 var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...
随机推荐
- vue-cli3点滴
1.如果你不在构造函数中声明private的变量,那么久会提示错误. 2.
- 学Python必背的初级单词,你都背了吗?
今天给大家分享一些学习Python必须认识的英文单词,同时也是学习编程都必须会的单词,新手赶快学起来!有点长耐心看完. 小编推荐一个学Python的学习裙:九三七六六七 五零九,无论你是大牛还是小白, ...
- 初窥ECharts
近来趁着空闲时间了解了一下 ECharts.也顺带记录一番. 首先要从下载ECharts库,这个从官网可以直接下载. 引入ECharts.JS <head> <meta charse ...
- 推荐一款疫情期间适合在家办公的远程工具,仅需IP和密码轻松实现远程管理
这段时间,受疫情影响,很多企业都开启了居家办公模式.但疫情突发,大多数人的办公资料没有拷贝打包,对于居家办公的人,尤其是运维人员来说,很难完成顺利完成工作. 像向日葵.teamviewer之类的远程软 ...
- Kong Gateway - 11 基于网关服务的ACL访问控制列表 黑名单
Kong Gateway - 11 基于网关服务的ACL访问控制列表 黑名单 同一服务名称 book 不允许即创建白名单访问控制列表又创建黑名单访问控制列表 启用服务的白名单&黑名单配置文件时 ...
- java代码生成器 快速开发平台 二次开发 外包项目利器 springmvc SSM后台框架源码
. 权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限. 按钮权限: 给角色分配按钮权限.2 ...
- SQL语法学习记录——JOIN
学习内容参考来源:www.runoob.com JOIN准备 --为了方便练习,在数据库中创建演示数据: create database TEST; use TEST ; ---------- go ...
- Java获取IP地址,IpUtils工具类,Java IP地址获取
================================ ©Copyright 蕃薯耀 2020-01-17 https://www.cnblogs.com/fanshuyao/ import ...
- Java多线程之互斥锁Syncharnized
public class Bank { private int money; private String name; public Bank(String name, int money) { th ...
- 浏览器对象模型“BOM”,对浏览器窗口进行访问和操作
location对象 location.href url地址 location.hash 锚点 location.hostname 主机名(需要放到服务器上) location.ho ...