经验总结:按需加载JS和css
项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不需要用到这些脚本,所以造成脚本冗余较大(尽管可以从缓存读取,但还是应该尽量减少没用到的脚本为佳)
public-js.shtml
<!--#config timefmt="%Y%m%d%H%M%S"-->
<script type="text/javascript" src="/js/jquery1.6.js?v=<!--#flastmod virtual='/js/jquery1.6.js' -->" ></script>
<!-- <script type="text/javascript" src="/js/core.js?v=#flastmod virtual='/js/core.js'" ></script>
-->
<script type="text/javascript" src="/js/public.js?v=#flastmod virtual='/js/public.js'" ></script>
<!-- 加载组件 -->
<!--#include virtual="/include/component.shtml" -->
<!-- 加载表单验证插件 -->
<!--#include virtual="/include/nicevalidator.shtml" -->
<!-- 页面通用函数 -->
<!--#include virtual="/include/page-js.shtml" -->
为了实现组件和验证插件的按需加载,定义这么一个函数loadJsCss
/*** js和css按需加载 ***/ function loadJsCss(url, callback ){// 非阻塞的加载 后面的js会先执行var isJs = /\/.+\.js($|\?)/i.test(url) ? true : false;function onloaded(script, callback){//绑定加载完的回调函数if(script.readyState){ //iescript.attachEvent('onreadystatechange', function(){if(script.readyState == 'loaded' || script.readyState == 'complete'){script.className = 'loaded';callback && callback.constructor === Function && callback();}});}else{script.addEventListener('load',function(){script.className = "loaded";callback && callback.constructor === Function && callback();}, false); }}if(!isJs){ //加载cssvar links = document.getElementsByTagName('link');for(var i = 0; i < links.length; i++){//是否已加载if(links[i].href.indexOf(url)>-1){ return; }}var link = document.createElement('link');link.type = "text/css";link.rel = "stylesheet";link.href = url;var head = document.getElementsByTagName('head')[0]; head.insertBefore(link,head.getElementsByTagName('link')[0] || null );}else{ //加载jsvar scripts = document.getElementsByTagName('script');for(var i = 0; i < scripts.length; i++){//是否已加载if(scripts[i].src.indexOf(url)>-1 && callback && (callback.constructor === Function) ){ //已创建scriptif(scripts[i].className === 'loaded'){//已加载 callback();}else{//加载中 onloaded(scripts[i], callback);}return; }}var script = document.createElement('script');script.type = "text/javascript";script.src = url; document.body.appendChild(script);onloaded(script, callback); } }
// 表单验证插件 动态加载
function loadValidator(callback){// 加载nicevalidator插件
loadJsCss("/css/nicevalidator.css");
loadJsCss("/js/nicevalidator.js", callback);
}
// 组件动态加载
function loadComponent(callback){// 加载自定义组件
loadJsCss("/css/component.css");
loadJsCss("/js/component.js", callback);
}
但是发现每个验证方法或组件的调用都要放到回调函数内部,实在笨拙,而且改起来也很麻烦。如:
loadValidator(function(){ $('#frm').validator({...}););
loadComponent(function(){ $.Tab({...}); );
经过尝试发现可以保持页面原有的调用方式,只需在public.js公共js文件中定义相同接口即可:
(function(){$.fn.validator = function(){var args = arguments, self = this;loadValidator(function(){//~~~初始状态fn.validator会请求js和css, 加载后的回调函数重写 fn.validator 为正确的方法$.fn.validator.apply(self, args);})}var fnames = ['Tab',"SiceSlider","SiceLvSelect","SiceSelect"];$.each(fnames, function(i,fname){//~~~同理 回调函数重写接口为正确的函数$[fname] = function(){var args = arguments;loadComponent(function(){ var Foo = function(){}; Foo.prototype = $[fname].prototype; var foo = new Foo(); // 需要new 的组件,这样获取参数对象$[fname].apply(foo,args); });}}); })(jQuery)
~~~个人认为在不用seaJs requireJs等模块化管理插件的情况下,这种方式也还可以。
经验总结:按需加载JS和css相关推荐
- jquery按需加载js和css插件使用说明
* ==================================================== ** 1. 概述 : * ================================ ...
- yii2-按需加载并管理CSS样式/JS脚本
(注:以下为Yii2.0高级:注意代码中php标签自己补上) 一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAs ...
- wordpress home.php,WordPress主题通过function.php来加载js和css文件
WordPress主题开发的时候可以直接将需要的js或css写在head标签中,但是现在已经不主张这种加载方式了,现在WordPress主题通过function.php来加载js和css文件. 基本架 ...
- 解决springmvc加载JS,CSS等文件问题【转】
解决springmvc加载JS,CSS等文件问题[转] 参考文章: (1)解决springmvc加载JS,CSS等文件问题[转] (2)https://www.cnblogs.com/jerrylz/ ...
- vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
- js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- VUE动态加载js和css
创建一个DynamicTool.js文件 /*** 动态加载css文件* @param {*} url* @param {*} isCache*/ export function loadCSS(ur ...
- Joomla!程序中加载JS和CSS的方法
1.加载单独的js文件: $js = JURI::base().'components/com_foobar/assets/script.js'; $document =& JFactory: ...
最新文章
- post提交返回json格式
- 极大似然估计_极大似然估计、极大后验估计和贝叶斯估计
- QQ空间及邮箱验证码登录的校验方式及自动登录的解决方案
- linux+kill+进程和线程,在LINUX系统中 关于进程和线程终止的问题
- SQLPrompt 安装后sql上看不到菜单
- Kubernetes 小白学习笔记(14)--k8s集群路线-kubernetes核心组件详解
- 拉普拉斯变换的matlab仿真,拉普拉斯变换及Simulink仿真.doc
- java swing 汽车租赁管理系统 java swing mysql实现的汽车租赁管理系统源码(1027)
- Unity shader 空气扭曲效果
- [16-8-1]每日总结
- 面试题系列:Mysql 夺命13问,你能扛到第几问?
- 卷积神经网络流程图_AAAI 2020 | 北大:图卷积中的多阶段自监督学习算法
- MQTT连接阿里云物联网平台步骤
- bp 神经网络 优点 不足_【学术论文】基于灰度共生矩阵和BP神经网络的乳腺肿瘤识别...
- mysql 设置的黑名单_在SQL中实现多条件任意组合黑名单的方法
- 电脑鼠标不管用但键盘可以用怎么办
- 【面经】数据分析岗_面试题整理总结(持续更新中…)
- Win7安装.net4.0失败如何解决_离水的鱼_新浪博客
- 同步IO 和异步IO
- 本地存储-cookie|localStorage|sessionStorage|indexedDB
热门文章
- php中类的构造函数是,php类与构造函数解析
- c语言图像浏览器,单片机采用浏览器进行监控将给软件的编程带来极大的便利...
- ul li前面的点怎么变大_亚马逊产品被投诉需要UL认证,该如何办理?
- php substr四个参数,PHP substr()函数参数解释及用法讲解
- 程序怎么启动vasp_构建可扩展的GPU加速应用程序(NVIDIA HPC)
- 信息系统项目管理师论文模板下载
- 第11章:项目风险管理(2)—章节重点
- 笔记-项目配置管理-配置项
- 软件开发定律系列之布鲁克斯定律有感
- Windows下配置Hadoop的Java开发环境以及用Java API操作HDFS