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