简介
动态加载js，css在现在以及将来肯定是很重要的。目前来看前端代码编写的业务量已经远远超过后端编写的。随着对用户体验度逐渐增强，前端业务复杂，加载速度变得很慢很慢。为了解决这个问题，目前出现的两个前端模块加载器为require.js与sea.js，这两款模块加载器都不错。但是呢，有时候我仅仅需要的只是动态加载一个js，不需要把代码模块化，那我们只能自己手写一个加载函数。
简单的加载js
/**
* HTML动态加载js
* @path {String} src地址必须带有后缀名.js
* */
function addJs(path){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
这段代码已经满足我们需求，动态加载js。随之问题又来了，假设某一个前端小白不知道你加载了没有，又加载了一次，这样就是浪费流量，时间，还有可能造成一些问题。现在我来优化一下。
次佳的加载js
/**
* HTML动态加载js
* @path {String} src地址必须带有后缀名.js
* */
var cache=[];
function addJs(path){
var flag=0;//检查是否加载的状态
for(var i=cache.length;i--;){
cache[i]==path?flag=1:flag=0;
}
if(flag){//如果已经加载则不加载
return;
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
cache.push(path);//把加载过的存起来
}
一天线上又出现bug了，结果一看是因为动态加载的js导致，因为只加载了，由于加载的js文件过大，导致还没加载成功，下边就开始使用了。下面在完善一下。
不错的加载js
/**
* HTML动态加载js
* @path {String} src地址必须带有后缀名.js
* @callback {Function} 加载成功的回掉函数
* */
var cache=[];
function addJs(path,callback){
var flag=0;//检查是否加载的状态
for(var i=cache.length;i--;){
cache[i]==path?flag=1:flag=0;
}
if(flag){//如果已经加载则不加载
return;
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
script.onload = script.onreadystatechange = function() {/*判断是否加载成功*/
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
script.onload = script.onreadystatechange = null;
callback();
}
};
cache.push(path);//把加载过的存起来
}
可以看出现在稍微完善一点，一天技术总监说，首页加载太慢了，js,css都要动态加载。这下我们还需要更改代码，再次优化一下。
推荐使用的动态加载js,css
var addStyleJs = (function(dom) {
var cache = {}, /*缓存加载过的css或者js*/
funct;
/**
* HTML动态加载css或者js
* @path {String} src 或 link 地址必须带有后缀名.js或者.css
* @callback {Function} 加载成功的回掉函数
* */
funct = function(path, callback) {
if(!path) { /*检查路径是否为空*/
throw new Error("请输入path路径!");
};
var fn=Object.prototype.toString.call(callback)=="[object Function]"?callback:function(){};
if(".js" == path.substr(-3)) { /*检查路径后缀名是否为.js*/
addJs(path, fn);
} else if(".css" == path.substr(-4)) { /*检查路径后缀名是否为.css*/
addCss(path, fn);
} else {
throw new Error('请输入正确的path路径!');
}
};
/**
* HTML 动态添加 CSS
* @path {String} link 地址必须带有后缀名.css
* @callback {Function} 加载成功的回掉函数
* */
function addCss(path, callback) {
if(!checkcache(path)) { /*检查是否加载过*/
var head = dom.getElementsByTagName('head')[0];
var link = dom.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link); /*添加到HTML中*/
link.onload = link.onreadystatechange = function() { /*判断是否加载成功*/
if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
link.onload = link.onreadystatechange = null;
callback();
}
};
cache[path] = 1; /*存储加载过的css路径,值设为1*/
}
};
/**
* HTML动态加载js
* @path {String} src 地址必须带有后缀名.js
* @callback {Function} 加载成功的回掉函数
* */
function addJs(path, callback) {
if(!checkcache(path)) { /*检查是否加载过*/
var head = dom.getElementsByTagName('head')[0];
var script = dom.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script); /*添加到HTML中*/
script.onload = script.onreadystatechange = function() { /*判断是否加载成功*/
if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
script.onload = script.onreadystatechange = null;
callback();
}
};
cache[path] = 1; /*存储加载过的js路径,值设为1*/
}
};
/**
* 检查是否加载
* @path {String} 路径
* */
function checkcache(path) {
if(cache[path]) { /*判断是否加载过的js路径*/
return true;
} else {
return false;
}
};
return funct;
}(document));
总结
动态加载js与动态加载css在日常开发中也许会不常用，但是对于我们来说这是必须要会的。代码也许学几天就会写，但是写一段高质量的代码则需要你常常写，常常总结，思考。欢迎大家与我一同进步。如有问题请大家指出哦！