JavaScript学习10：动态加载脚本和样式

我们在写Web页面的时候，需要引入很多的JavaScript脚本文件和CSS样式文件，尤其是在网站需求量很大的时候，脚本的需求量也随之变大，这样一来，网站的性能就会大打折扣，因此就出现了动态加载的概念，即在需要的时候才去加载对应的脚本和样式。下面我们就来看看如何实现动态加载。

 动态脚本：

先来看一个动态加载js文件的代码示例：

//动态加载JS
var flag=false ;
if(flag){
	loadScript('browserdetect.js');
}
function loadScript(url){
	var script =document.createElement('script');
	script.type='text/javascript';
	script.src=url;
	document.getElementsByTagName('head')[0].appendChild(script);
}

如此一来，我们只需控制flag的值就可以控制js脚本文件是否加载到当前页面中。

再来看一个动态执行js的示例：

//动态执行JS
var flag=true ;
if(flag){
	executeScript();
}
function executeScript(){
	var script =document.createElement('script');
	script.type='text/javascript';
	var text=document.createTextNode("alert('Lian')");
	script.appendChild(text);
	document.getElementsByTagName('head')[0].appendChild(script);
}

 动态样式

我们肯定都对各种换肤功能司空见惯了，但是你肯定没想过换肤是如何实现的。我也是学到这块才恍然大悟，原来看起来蛮高级的换肤功能竟然如此简单：只需换一个CSS样式即可。

那我们就来看看网页的样式是如何动态加载的。通常样式表有两种方式进行加载，一种是<link>标签，一种是<style>标签。因此给出两种方式的代码示例，来说明如何动态加载样式。

使用link标签加载，和上面提到的动态加载js脚本没什么两样，不再多说。

<span style="font-size:18px;">//动态执行link
var flag=true;
if(flag){
	loadStyle('basic.css');
}
function loadStyle(url){
	var link=document.createElement('link');
	link.rel='stylesheet';
	link.type ='text/css';
	link.href=url;
	document.getElementsByTagName('head')[0].appendChild(link);
}</span>

比较麻烦点的是使用style来改变样式，因为涉及兼容性问题，所以在执行的时候，需要根据浏览器支持的类型，选择相应的函数来执行这个过程，看下代码示例

<span style="font-size:18px;">//动态执行style
var flag=true;
if(flag){
	var style=document.createElement('style');
	style.type='text/css';
	document.getElementsByTagName('head')[0].appendChild(style);
	insertRule(document.styleSheets[0],'#box','background:red',0);
}
function insertRule(sheet,selectorText,cssText,position){
	//如果是非IE
	if(sheet.insertRule){
		sheet.insertRule(selectorText+"{"+cssText+"}",position);
	}else if(sheet.addRule){ //如果是IE
		sheet.addRule(selectorText,cssText,position);
	}
}</span>

小结一下：记得老师曾经反复强调，如无必要，勿增实体。同样在程序设计的过程中也一样，我们在程序启动时，就加载很多的东西，势必会影响程序的性能，因此我们要学会在需要的时候，一点一点的进行添加，有点装饰模式的赶脚，同时也是一个灵活性的体现，虽然是一个小的知识点，但是运用好了，是有大用处的。

版权声明：本文为博主原创文章，未经博主允许不得转载。