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 ...
随机推荐
- Linux ftp VSftp
一.Linux FTP服务器分类: <1>wu-ftp <2>proftp=profession ftp <3>vsftp=very security ftp 本 ...
- Spring MVC系列之JDBC Demo(SpringBoot)(七)
前言 前面我们了解了Spring MVC的基本使用,其实和.NET或.NET Core MVC无异,只是语法不同而已罢了,本节我们将和和数据库打交道,从最基础的JDBC讲解起,文中若有错误之处,还望指 ...
- centos容器yum安装JDK环境
1.yum命令安装jdk 选择版本安装 -openjdk java--openjdk-devel 或者如下命令,安装jdk1.8.0的所有文件 -openjdk*yum install -y java ...
- centos7上安装docker社区版
container(容器) docker(集装箱) 容器的优点 1. 启动速度快 2. 节省资源 3. 兼容性高 保证机器正常上网 #ping www.baidu.com CPU需要支持虚拟化 # g ...
- 2019IT运维大会上海站 智和信通解析等保2.0支撑
2019IT运维大会上海站 智和信通解析等保2.0支撑 2019年11月14日上午8:30-12:10,上海锦荣国际大酒店二层锦荣厅
- leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- Escape(反思与总结)
题目描述: BH is in a maze,the maze is a matrix,he wants to escape! Input: The input consists of multiple ...
- 【DTOJ】2703:两个数的余数和商
DTOJ 2703:两个数的余数和商 解题报告 2017.11.10 第一版 ——由翱翔的逗比w原创,引用<C++ Primer Plus(第6版)中文版> 题目信息: 题目描述 给你a ...
- php ip转换省市县
http://www.cz88.net/ip/ http://www.ttlsa.com/php/php_cunzhen-ipdata/ # wget h http://6.scdx3.crsky.c ...
- LeetCode 面试题 02.07. 链表相交
题目链接:https://leetcode-cn.com/problems/intersection-of-two-linked-lists-lcci/ 给定两个(单向)链表,判定它们是否相交并返回交 ...