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异步执行 按需加载 三种方式的更多相关文章

  1. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  2. iOS字体加载三种方式

    静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...

  3. entity framework 数据加载三种方式的异同(延迟加载,预加载,显示加载)

    三种加载方式的区别 显示加载: 显示加载

  4. vue的异步组件按需加载

    当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...

  5. flask配置加载几种方式

    方法一.直接配置 app.config['HOST']='xxx.a.com' print(app.config.get('HOST')) 方法二.通过环境变量加载配置 环境变量:export MyA ...

  6. Windows学习总结(8)——DOS窗口查看历史执行过的命令的三种方式

    在DOS窗口执行了一些列命令完成某项工作后,如果要查看都执行了那些命令,该如何办呢?(前提:DOS窗口未关闭的情况下) 一.方法一: 使用↑↓箭头上下翻看执行过的命令,此方式适宜执行命令较少的情况. ...

  7. Flask的配置文件加载两种方式

    配置文件 1 基于全局变量 2 基于类的方式 配置文件的加载需要将配合文件的相对路径添加到app.config.from_object("文件路径"),类的方式也是一样,需要将类的 ...

  8. js中将字符串转换成json的三种方式

    1,eval方式解析,恐怕这是最早的解析方式了.如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; ...

  9. JS创建对象,数组,函数的三种方式

    害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象   var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...

随机推荐

  1. 【转】Android WiFi 经常掉线出现的几个原因分析!

    原因1.从Log分析来看,这个是由于Dhcp request fail 导致最终disconnect . Log 分析如下: 16:53:31.659 958 6525 D NetUtils: dhc ...

  2. 优雅地使用 C++ 制作表格:tabulate

    作者:HelloGitHub-ChungZH 0x00 介绍 tabulate tabulate 是一个使用 C++ 17 编写的库,它可以制作表格.使用它,把表格对齐.格式化和着色,不在话下!你甚至 ...

  3. 将 ASP.NET Core 2.1 升级到最新的长期支持版本ASP.NET Core 3.1

    目录 前言 Microsoft.AspNetCore.Mvc.ViewFeatures.Internal 消失了 升级到 ASP.NET Core 3.1 项目文件(.csproj) Program. ...

  4. Cesium案例解析(四)——3DModels模型加载

    目录 1. 概述 2. 代码 3. 解析 4. 参考 1. 概述 Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据.glTF是为WebGL量身定制的数据格式,在网络环境 ...

  5. 记一次Postgres CPU爆满故障

    问题描述 公司项目测试环境调用某些接口的时候,服务器立即崩溃,并一定时间内无法提供服务. 问题排查 服务器配置不够 第一反应是服务器需要升配啦,花钱解决一切!毕竟测试服务器配置确实不高,2CPU + ...

  6. 邓 【PHP大全】

    获取对应的时间戳(只保存月底的时间戳) function getTimeDate($timeType, $time, $count) { switch ($timeType) { case 'MONT ...

  7. springboot~HttpPut开启application/x-www-form-urlencoded

    在使用spring框架时,默认情况下@RequestParam注解只到接受Get和Post请求参数 ,而对于Put来说默认是使用@ReqeustBody注解的,如果希望为Put也开启@RequestP ...

  8. sqldeveloper更改语言设定

    \sqldeveloper\ide\bin\ide.conf   添加下面的 日语 AddVMOption -Duser.language=jaAddVMOption -Duser.country=J ...

  9. 在香蕉派的树莓派系统上配置 Syncthing 自启动

    在香蕉派的树莓派系统上配置 Syncthing 自启动 —— 魏刘宏 2020 年 1 月 19 日 首先做个名词解释,” 香蕉派” 是国内一款山寨树莓派的硬件产品,” 树莓派系统” 指的是”rasp ...

  10. SWIG 3 中文手册——10. 参数处理

    目录 10 参数处理 10.1 typemaps.i 库 10.1.1 引言 10.1.2 输入参数 10.1.3 输出参数 10.1.4 输入 / 输出参数 10.1.5 使用不同的名称 10.2 ...