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. window下建立vue.js项目

    安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...

  2. WinBox软路由的自定义IP设定

             软路由ros(MIKRTIK)安装简单步骤 由于本主也是刚刚接触软路由这个硬件方面的知识.所以也是略知皮毛而已,今天通过网上的学习,然后自己总结了一下怎么在软路由中设定一个自定义IP ...

  3. Caliburn.Micro框架之Action Convertions

    首先新建一个项目,名称叫Caliburn.Micro.ActionConvertions 然后删掉MainWindow.xaml 然后去app.xaml删掉StartupUri这行代码 其次,安装Ca ...

  4. js是什么?js可以做什么?js的构成与学习方向

    js(百度官方介绍javascript)编程的基本语言学习目标是:a.怎么写和运行js脚本b.理解变量和值c.学会简单的数学运算符d.数据类型是什么e.流程控制 对于JavaScript的背景知识和结 ...

  5. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  6. iOS开发 - 在SwiftUI中显示模态视图

    在SwiftUI中显示模态视图 简介 这里教大家如何弹出一个简单的模态视图.分别有两个页面,ContentView和GCPresentedView,以下对应简称为A和B.我们要做的是在A视图中点击按钮 ...

  7. Chrome的插件扩展程序安装目录

    地址栏输入chrome:version回车 个人资料路径下的Extensions文件夹即默认的扩展安装路径

  8. Python股票量化第一步环境搭建

    很久之前就希望可以量化分析股票,那么国内的股票数据API也有个,最有名的就是tushare,然后还有baostock. 今天我们就来研究一下这个baostock吧. 首先,我们需要下载一个叫做anac ...

  9. SpringCloud入门学习

    我相信,如果小伙伴们能来到这里,肯定对微服务有一定的认识. 我们之前创建web项目的时候,常见的有两种方式: 1).创建一个war包,然后放在servlet容器中运行(比如Tomcat等); 2).使 ...

  10. postgresql开篇

    postgresql 作为官方号称的最先进的开源数据库,从今天(2020-1-19)起开始系统的学习一下,记录自己学习的点点滴滴.