动态引入js文件

动态引入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>

<meta http-equiv="X-UA-Compatible"content="IE=8" />

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>

<%

if(need.indexOf("_base_") > -1){

%>

          <link rel="stylesheet" type="text/css" href="../css/style.css"/>

          <link rel="stylesheet" type="text/css" href="../css/myCss/btn.css"/>

          <link rel="stylesheet" type="text/css" href="../css/MainStyle.css"/>

          <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

         <script type="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的前缀进行解释,如果它不是以斜杠开头,那么就是页面相关的路径,就根据引入这个文件的页面所在的路径进行解释.



展开阅读全文

没有更多推荐了,返回首页