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文件的同级文件或其子目录文件!