动态加载资源js/css/style

为了优化网站性能，很多js或css等文件我们不需要初始就加载，在需要的时候才进行动态加载。

代码如下：

function loadRes(name, type, fn) {
	let ref = null
	if (type === 'js') { // 外部js
		ref = document.createElement('script')
		ref.setAttribute('type', 'text/javascript')
		ref.setAttribute('src', name)
	} else if (type === 'css') { // 外部css
		ref = document.createElement('link')
		ref.setAttribute('rel', 'stylesheet')
		ref.setAttribute('type', 'text/css')
		ref.setAttribute('href', name)
	} else if (type === 'style') { // style
		ref = document.createElement('style')
		ref.innerhtml = name
	}
	if (typeof ref !== 'undefined') {
		document.getElementsByTagName('head')[0].appendChild(ref)
		ref.onload = function(e) { //加载完成执行
			if (e.readystate == "complete") {
				typeof fn === 'function' && fn()
			}
		}
	}
};

代码说明:

利用document.createElement方法创建对应的标签, 设置Attribute它对应的地址, 最后追加到head标签中。

通过onload方法来判断加载并且运行完成，调用的同时上面还会有一个readystate的属性，我们可以判断这个readystate的属性，当他发生变化的时候给他动态的绑定一个回调函数，继续执行后面的代码。

最新方式:

ES6中提供了一个语句 import语句，在最新版的ECMA规范当中定义了import语句的两外一种使用方式，你可以导入任意的模块，这个导入任意模块也可以用于动态的导入js。

链接: https://fly63.com/course/34_1633