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

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;">//动态运行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账号...

(0)


相关推荐

  • linux 重启服务器命令[通俗易懂]

    linux 重启服务器命令[通俗易懂]Linux有如下的关机和重启命令:shutdown,reboot,halt,poweroff,那么它们有什么区别呢?shutdown-建议使用的命令shutdown是最常用也是最安全的关机和重启命令,它会在关机之前调用fsck检查磁盘,其中-h和-r是最常用的参数:-h:停止系统服务并关机-r:停止系统服务后重启下面看几个例子:shutdown-h…

    2022年10月18日
  • 阶乘算法优化「建议收藏」

    阶乘算法优化「建议收藏」原文地址:http://blog.csdn.net/yxnk/article/details/1665052我的感言:首先,有一个概念上的认知,即根据阶乘定义而来的常规算法,如果是longint型只能正确计算到12左右的阶乘,如果用double型只能正确计算170左右的阶乘,当然这些只是大概,需要结合实际平台进行验证。下面是原文:序大数阶乘的计算是一个有趣的话题,从中学生到大学教

  • 地图API地址  百度地图开放平台

    地图API地址  百度地图开放平台

  • SPPnet 笔记

    SPPnet 笔记ECCV2014的文章,后来又扩展成了TPAMI整体的先后次序:RCNN(CVPR2014)->SPPnet(ECCV2014)->FastRCNN(ICCV2015)->FasterRCNN(NIPS2015)现有的深度卷积网络需要固定大小的输入图片(比如224×224224\times224224×224),这个要求人工设计的痕迹过于明显,并且可能会降低一…

  • 【排版六原则】

    上个月,我贴了《图形化简历》。几天后,就收到了秋叶老师的来信,希望…

  • 全新企业发卡系统源码/带有代理功能发卡平台源码[通俗易懂]

    全新企业发卡系统源码/带有代理功能发卡平台源码[通俗易懂]☑️编号:ym286☑️品牌:无☑️语言:PHP☑️大小:105MB☑️类型:企业发卡系统☑️支持:pc+wap????欢迎免费领取(注明编号)????✨源码介绍全新企业发卡系统源码,带有代理功能的发卡平台源码,目前应该算是最完美的一款了,亲测可运营。并且多套模板可以切换,有需要的自取吧。更新说明:支付界面短链接二维码后台模板等修复及一些细节优化pc用户端后台稍微美化(颜色调整)安卓用户端后台界面UI美化重写,商户头像根据QQ获取Admin后台登录页面重写(

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号