• 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>
           小结一下记得老师以前重复强调,如无必要。勿增实体。相同在程序设计的过程中也一样,我们在程序启动时。就载入非常多的东西,势必会影响程序的性能。因此我们要学会在须要的时候,一点一点的进行加入。有点装饰模式的赶脚。同一时候也是一个灵活性的体现。尽管是一个小的知识点,可是运用好了,是有大用处的。
  • 相关阅读:
    warshall、
    简单的php单例再次理解
    windows操作系统,在phpstudy集成环境,安装redis扩展,并启用redis服务和客户端
    php单例模式相关知识
    jui结合ajax非表单提交刷新页面
    php截取想要的字符串
    xmlToArray和arrayToXml
    jquery时间戳转换成格式化时间
    腾讯地图调用获取经度纬度代码
    随机生成自定义位数英文字符串
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5382499.html
Copyright © 2020-2023  润新知