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

全栈程序员-用户IM • 2022年2月5日下午1:00 • 未分类

大家好，又见面了，我是全栈君。

我们在写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;">//动态运行linkvar 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>

小结一下：记得老师以前重复强调，如无必要。勿增实体。相同在程序设计的过程中也一样，我们在程序启动时。就载入非常多的东西，势必会影响程序的性能。因此我们要学会在须要的时候，一点一点的进行加入。有点装饰模式的赶脚。同一时候也是一个灵活性的体现。尽管是一个小的知识点，可是运用好了，是有大用处的。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/115369.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...