项目中做过这样的事情:所有页面都通过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相关推荐

  1. jquery按需加载js和css插件使用说明

    * ==================================================== ** 1. 概述 : * ================================ ...

  2. yii2-按需加载并管理CSS样式/JS脚本

    (注:以下为Yii2.0高级:注意代码中php标签自己补上) 一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAs ...

  3. wordpress home.php,WordPress主题通过function.php来加载js和css文件

    WordPress主题开发的时候可以直接将需要的js或css写在head标签中,但是现在已经不主张这种加载方式了,现在WordPress主题通过function.php来加载js和css文件. 基本架 ...

  4. 解决springmvc加载JS,CSS等文件问题【转】

    解决springmvc加载JS,CSS等文件问题[转] 参考文章: (1)解决springmvc加载JS,CSS等文件问题[转] (2)https://www.cnblogs.com/jerrylz/ ...

  5. vue动态加载js和css以及部分页面加载特定的js和css

    vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...

  6. js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)

    var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...

  7. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  8. VUE动态加载js和css

    创建一个DynamicTool.js文件 /*** 动态加载css文件* @param {*} url* @param {*} isCache*/ export function loadCSS(ur ...

  9. Joomla!程序中加载JS和CSS的方法

    1.加载单独的js文件: $js = JURI::base().'components/com_foobar/assets/script.js'; $document =& JFactory: ...

最新文章

  1. post提交返回json格式
  2. 极大似然估计_极大似然估计、极大后验估计和贝叶斯估计
  3. QQ空间及邮箱验证码登录的校验方式及自动登录的解决方案
  4. linux+kill+进程和线程,在LINUX系统中 关于进程和线程终止的问题
  5. SQLPrompt 安装后sql上看不到菜单
  6. Kubernetes 小白学习笔记(14)--k8s集群路线-kubernetes核心组件详解
  7. 拉普拉斯变换的matlab仿真,拉普拉斯变换及Simulink仿真.doc
  8. java swing 汽车租赁管理系统 java swing mysql实现的汽车租赁管理系统源码(1027)
  9. Unity shader 空气扭曲效果
  10. [16-8-1]每日总结
  11. 面试题系列:Mysql 夺命13问,你能扛到第几问?
  12. 卷积神经网络流程图_AAAI 2020 | 北大:图卷积中的多阶段自监督学习算法
  13. MQTT连接阿里云物联网平台步骤
  14. bp 神经网络 优点 不足_【学术论文】基于灰度共生矩阵和BP神经网络的乳腺肿瘤识别...
  15. mysql 设置的黑名单_在SQL中实现多条件任意组合黑名单的方法
  16. 电脑鼠标不管用但键盘可以用怎么办
  17. 【面经】数据分析岗_面试题整理总结(持续更新中…)
  18. Win7安装.net4.0失败如何解决_离水的鱼_新浪博客
  19. 同步IO 和异步IO
  20. 本地存储-cookie|localStorage|sessionStorage|indexedDB

热门文章

  1. php中类的构造函数是,php类与构造函数解析
  2. c语言图像浏览器,单片机采用浏览器进行监控将给软件的编程带来极大的便利...
  3. ul li前面的点怎么变大_亚马逊产品被投诉需要UL认证,该如何办理?
  4. php substr四个参数,PHP substr()函数参数解释及用法讲解
  5. 程序怎么启动vasp_构建可扩展的GPU加速应用程序(NVIDIA HPC)
  6. 信息系统项目管理师论文模板下载
  7. 第11章:项目风险管理(2)—章节重点
  8. 笔记-项目配置管理-配置项
  9. 软件开发定律系列之布鲁克斯定律有感
  10. Windows下配置Hadoop的Java开发环境以及用Java API操作HDFS