动态引入js文件
来源:互联网 发布:yum install卡住 编辑:程序博客网 时间:2024/06/07 00:07
动态引入js文件
背景:
打开一个页面,需要引用js文件、css文件,以及编写一些基本的html代码。
某个页面的功能比较丰富,需要引用大量的js文件。如果一开始就全部引进来,可能这个加载过程比较耗时。如果采用页面直接引用的方式,可能导致页面维护js文件的代码量较大,也不利于集中管理。当要消除js文件加载的缓存时,每个页面都要加上时间戳,更不利于维护。
最好方法是,提炼一个公共方法,动态引进需要的js文件群,而这些js文件都集中维护起来。
选用的实施方案:
1、 Js函数,动态创建<script>并添加到当前文件。
2、 Jsp:include,引入静态的<script>标签群。
2种方法的优劣比较
页面的加载顺序是从上往下进行。
页面开始执行函数是从onload或者ready函数开始。
JavaScript的onload方法,必须等待页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成,才开始执行。如果页面功能丰富,包含的图片或者js文件非常多,那么加载过程就很久,会让用户误以为页面性能太差,或功能失效。
但是这种方法可以保证,onload执行的方法所依赖的外部js文件已经全部加载完毕,可以正常使用。
Jquery的ready方法,只要加载完页面的dom tree,就开始执行了,不需要等待全部的外部图片和资源加载完毕。用户可以“一点点”看到页面的生成,知道页面在加载了,也即有“异步”的效果。
但是,作为入口的ready方法,必然需要调用其他js文件的功能,ready调用的方法所依赖的外部js没有加载完成,那么就报错。这种情况导致功能的直接失效,更不能被用户接受。
正常来说,按照页面的从上至下的加载顺序,如果我们在页面上直接写好<script>标签来引用外部的js文件,那么ready函数里面所依赖的js功能必行加载完毕,正常执行功能。
所以,通过引入静态的<script>标签群,我们就可以确保ready在所有外部js文件加载完成之后执行。而ready的执行也不会被外部大图片的加载所拖累。
引入静态的<script>标签群:
<jsp:include page="/js.jsp?need=_base_ext_plugin_bootstrap_"flush="true" />
jsp:include 引入的外部jsp文件,实际上是“完样”嵌套入当前页面,属于页面dom tree的构建过程,必然遵守“从上至下”的加载原则,所以优先于ready的执行。
【js.jsp】
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
//通过参数need,获取不同的js文件群
Stringneed = request.getParameter("need") ==null? "": request.getParameter("need");
//时间戳,在系统的首页设置到session中,则所有页面都可重用,用于消除js加载缓存
Stringversion = (String)request.getSession().getAttribute("version")==null? "": (String)request.getSession().getAttribute("version");
%>
<title>opcm</title>
<metahttp-equiv="X-UA-Compatible"content="IE=8"/>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<%
if(need.indexOf("_base_") > -1){
%>
<linkrel="stylesheet"type="text/css"href="../css/style.css"/>
<linkrel="stylesheet"type="text/css"href="../css/myCss/btn.css"/>
<linkrel="stylesheet"type="text/css"href="../css/MainStyle.css"/>
<scripttype="text/javascript"src="../js/jquery-1.9.1.min.js"></script>
<scripttype="text/javascript"src="../js/jquery-migrate-1.1.0.min.js"></script>
<%
}
%>
补充 :
include标签和jsp:include标签的区别
一:执行时间上:
<%@ include file=”relativeURI”%> 是在翻译阶段执行
<jsp:include page=”relativeURI” flush=”true” /> 在请求处理阶段执行.
二:引入内容的不同:
<%@ include file=”relativeURI”%>
引入静态文本(html,jsp),在JSP页面被转化成servlet之前和它融和到一起. (所以两个文件不同定义多个contentType)
(A.jsp + B.jsp ) —— Servlet
<jsp:include page=”relativeURI” flush=”true” />引入执行页面或servlet所生成的应答文本.
A.jsp + (B.jsp - servlet)
另外在两种用法中file和page属性都被解释为一个相对的URI.如果它以斜杠开头,那么它就是一个环境相关的路径.将根据赋给应用程序的URI的前缀进行解释,如果它不是以斜杠开头,那么就是页面相关的路径,就根据引入这个文件的页面所在的路径进行解释.
- 动态引入js文件
- 动态引入js文件
- js动态引入JS文件
- 同步异步动态引入js文件
- js 动态创建对象、引入文件等
- js动态的引入头文件
- 动态引入js/cs
- js动态引入css
- 动态引入“”和<>文件
- dwr 引入js文件
- JS: 文件引入
- js引入头文件
- JS判断各种浏览器,根据判断动态引入不同的CSS文件、JS文件
- JS判断各种浏览器,根据判断动态引入不同的CSS文件、JS文件
- js、css的动态引入
- 动态更改js引入脚本
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- 数组和指针
- C#winForm窗体,以窗口对话形式选择文件夹、文件路径
- 性能优化攻略
- 杂谈对抽象事物的审美——繁体字与简体字,孰美?
- JMS学习2 - 体系结构及消息模型
- 动态引入js文件
- 经验总结38--新闻内容处理
- 显示两位小数
- CPU私有变量(per-CPU变量)
- 线性表的顺序存储实现
- Maven 生成可执行 jar 文件
- Bootstrap分页插件
- NIOS II 处理器性能测试(转)
- [STAThread]——c#