JavaScript动态加载资源【js|css】示例代码

在开发过程中会用到各种第三方的插件，或者自己写在单独文件中的js方法库或者css样式，在html头部总是需要写一大堆的script和link标签，如果想要自己实现动态的引入资源文件，可以使用开源的require.js，如果想要自己做一个简单的实现，参考实例代码如下：

;(function(){
	var config = {
		idPrefix : 'xxx',
		path : function(){
			var scripts = document.scripts,
				script  = scripts[scripts.length - 1],
				jsPath  = script.src;

			return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
		}(),
	};
	var load = {
		sources : function(sourceName){
			var head = document.getElementsByTagName('head')[0];
			var sourceName = sourceName.replace(/\s/g,'');
			var isCssFile  = /\.css$/.test(sourceName);
			var htmlNode   = document.createElement(isCssFile? 'link' : 'script');
			var sourceId   = config.idPrefix + sourceName.replace(/\.|\//g,'');

			if(isCssFile) {
				htmlNode.rel  = 'stylesheet';
				htmlNode.type = 'text/css';
			}
			htmlNode[isCssFile? 'href' : 'src'] = /^http:\/\//.test(sourceName) ? sourceName : config.path+sourceName;
			htmlNode.id = sourceId;

			if(!document.getElementById(sourceId)){
				head.appendChild(htmlNode);
			}
			return this;
		},
	}
	//加载
	load.sources('css/main.css');
})();

如果动态加载的是css样式，请考虑页面渲染的顺序，动态加载的样式自己一般用于在页面加载完成后的一些交互内容。如果是加载js文件，也要考虑先load再调用相关引入的js文件中的方法。

上面的代码片段适用于加载：上述代码所在js文件的同级文件或其子目录文件!