1.前提
有些时候可能碰到一些特殊情况，需要临时添加一些js，css文件或代码到当前页面
有些时候某些平台如百度地图之类的依赖需要更新文件验证的
有需要动态加载js方法到当前页面的
我们可以使用js来实现这些需求
2.内容
2.1，将string类型代码加入到页面
scriptString:function(code){
var script=document.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text=code;
}
document.body.appendChild(script);
}
这个比较直接考虑兼容性使用try catch包含两种添加方法
2.2，动态添加js文件
//将.js文件加载到body元素
scriptFile:function(url){
//规定第一个参数为url必须要有
var args=arguments;
var len=args.length;
if(len){
//可以通过遍历所有script标签替换掉旧有的script文件，主要用于js文件更新
if(args[1]&&(typeof args[1]=='string')){
//取的所有script标签
var old=document.getElementsByTagName("script");
//遍历 拿新的uri和所有的uri做比较 统一砍掉.js后面的参数
for(var i=0,len=old.length;i<len;i++){
if(old.item(i).src.substring(0,old.item(i).src.indexOf(".js")+3)==url.substring(0,url.indexOf(".js")+3)){
document.body.removeChild(old.item(i));
}
}
}
var script=document.createElement("script");
script.type="text/javascript";
script.src=url;
//添加onload回调
if(args[1]&&(typeof args[1]=='function')){
script.onload=function(){
args[1]();
}
}else{
if(args[1]&&(typeof args[1]=='string')&&args[2]&&(typeof args[2]=='function')){
script.onload=function(){
args[2]();
}
}
}
document.body.appendChild(script);
}else{
console.error("必须有参数");
}
},
通过".js"来截断url路径可以确保大部分情况下正确对比，但也有特殊情况不正确，需要根据实际情况来考虑
添加onload事件以方便某些代码执行在文件加载完成后
2.3，添加string格式的css代码
styleString:function(css){
var style=document.createElement("style");
style.type='text/css';
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.stylesheet.cssText=css;
}
var Head=document.getElementsByTagName("head")[0];
Head.appendChild(style);
},
这里使用的是document.getElementsByTagName("head")[0];来获取head标签，实际上也可以使用document.head来获取，就是会有一定的兼容性问题
getElementsByTagName这个方法在很低版本的ie浏览器上也会出现不支持的情况，不过现在一般都不考虑
2.4，添加css文件
styleFile:function(url){
var head=document.getElementsByTagName('head').item(0);
var style=document.createElement("style");
style.type='text/css';
style.href=url;
style.rel='stylesheet';
head.appendChild(style);
}
实现原理和js文件类似 不过css文件代码不需要onload事件来支撑功能的实现，加载完成后自动生效
3.后记
vue的样式加载应该用到了类似的加载方式，所有的样式都是通过js文件写入到head头部style标签中
加载网络资源的时候可以使用此类方法切换多个来源以确保稳定，当然一般不会碰到这样的需求
