这篇文章主要介绍了javascript实现动态导入js与css等静态资源文件的方法,基于回调函数实现该功能,具有一定参考借鉴价值,需要的朋友可以参考下。

本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**  * 动态导入静态资源文件js/css  */
var $import = function() {
	return function(rId, res, callback) {
		if (res && 'string' == typeof res) {
			if (rId) {
				if ($($('#' + rId), $('head')).length > 0) {
					return;
				}
			}
			//加载资源文件
			var sType = res.substring(res.lastIndexOf('.') + 1);
			// 支持js/css
			if (sType && ('js' == sType || 'css' == sType)) {
				var isScript = (sType == 'js');
				var tag = isScript ? 'script': 'link';
				var head = document.getElementsByTagName('head')[0];
				// 创建节点
				var linkScript = document.createElement(tag);
				linkScript.type = isScript ? 'text/javascript': 'text/css';
				linkScript.charset = 'UTF-8';
				if (!isScript) {
					linkScript.rel = 'stylesheet';
				}
				isScript ? linkScript.src = res: linkScript.href = res;
				if (callback && 'function' == typeof callback) {
					if (linkScript.addEventListener) {
						linkScript.addEventListener('load',
						function() {
							callback.call();
						},
						false);
					} else if (linkScript.attachEvent) {
						linkScript.attachEvent('onreadystatechange',
						function() {
							var target = window.event.srcElement;
							if (target.readyState == 'complete') {
								callback.call();
							}
						});
					}
				}
				head.appendChild(linkScript);
			}
		}
	};
} ();