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