# 动态加载

# loadJs:动态加载js文件

运行时动态引入外部js文件。 文件加载成功后指向回调函数(如果定义了的话)。

参数 说明
src 网络路径
callback 加载成功后执行的回调
import {loadJs} from 'sjfx'

loadJs('//cdn.bootcss.com/jquery/3.3.1/jquery.min.js',function () {
	//现在可以使用jquery了
});

# loadCss:动态加载css文件

运行时动态引入外部css文件。 该方法无返回,无回调

参数 说明
src 网络路径
import {loadCss} from 'sjfx'

loadCss('//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css');

# loadRes:动态加载多个js、css文件

运行时动态引入多个js、css文件。 js文件加载成功后执行回调函数(如果定义了的话)。 如果只传入css参数,不传入js参数,则不会触发回调。(这种情况,直接使用loadCss方法更合适)

参数 说明 类型
js 需要加载的js文件列表 Array
css 需要加载的css文件列表 Array(可不传)
callback 加载成功后执行的回调 function(可不传)
import {loadRes} from 'sjfx'

loadRes('//cdn.bootcss.com/jquery/3.3.1/jquery.min.js',function () {
	//现在可以使用jquery了
});

# loadModule:动态加载模块

该方法的主要作用是动态引入外部js,减少文件打包的体积,提高用户加载速度,并在二次访问时减少请求。

该方法共有两个参数,返回一个Promise对象。

参数 说明
name 模块所使用的全局变量名称
src 网络路径

调用该方法时,程序首先会判断window[name]是否存在,如果已存在,则直接resolve; 如果不存在,则动态加载js,在js加载成功后resolve。

import {loadModule} from 'sjfx'
loadModule('jQuery', '//cdn.bootcss.com/jquery/3.3.1/jquery.min.js').then(function ($) {
	//现在可以使用jquery了
});

# 扩展

为简化调用,已集成了如下模块:

jQuery
echarts
import {loadJquery,loadEcharts} from 'sjfx'

loadJquery().then($=>{

});
loadEcharts().then((echarts)=>{

});
Last Updated: 1/14/2020, 3:34:31 PM