在开发过程中会用到各种第三方的插件，或者自己写在单独文件中的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文件的同级文件或其子目录文件!