一般我们在做Web项目时，通常会将多个页面引入的公共js和css文件抽取出来，单独写成一个公共文件，以期方便各个页面单独引入，达到复用。

1、抽取分离公共的js和css代码，并新建成一个文件取名 common.jsp。
<%@ taglib prefix="yy" uri="http://java.sun.com/jsp/jstl/core"%>
<yy:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<head>
    <%--  ./表示当前文件所在目录 ,./可省略 --%>
    <%-- /表示根目录  --%>
    <%-- ../../ 代表上两级目录  --%>
    <link href="${path}/statics/css/Top.css" rel="stylesheet" type="text/css">
    <link href="${path}/statics/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css"><%--2020/6/11新加--%>
    <link href="${path}/statics/easyui/themes/insdep/easyui.css" rel="stylesheet" type="text/css">
    <link href="${path}/statics/easyui/themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css">
    <link href="${path}/statics/easyui/themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css">
    <link href="${path}/statics/easyui/themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css">
    <link href="${path}/statics/easyui/themes/insdep/icon.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="${path}/statics/easyui/jquery.min.js">script>
    <script type="text/javascript" src="${path}/statics/js/jquery-form.js">script><%--2020/6/11新加--%>
    <script type="text/javascript" src="${path}/statics/easyui/jquery.cookie.js">script>
    <script type="text/javascript" src="${path}/statics/easyui/jquery.easyui.min.js">script>
    <script type="text/javascript" src="${path}/statics/easyui/datagrid-detailview.js">script>
    <script type="text/javascript" src="${path}/statics/easyui/themes/insdep/jquery.insdep-extend.min.js">script>
    <script type="text/javascript" src="${path}/statics/uploader/swfobject.js">script><%--2020/6/11新加--%>
    <script type="text/javascript" src="${path}/statics/uploader/jquery.uploadify.v2.1.4.js">script><%--2020/6/11新加--%>
    <script type="text/javascript" src="${path}/statics/autocomplete/jquery.autocomplete.js">script><%--2020/6/11新加--%>

head>
        相对路径
  • ./表示当前文件所在目录 ，./可省略
  • /表示根目录
  • ../../ 代表上两级目录
绝对路径
  • 具体的某一个文件所在的路径，譬如：G:/testworkspace/logo.png
       用法
  • 项目中常用相对路径写法，因为当本地项目部署到服务器后，文件路径一般会发生改变，使用绝对路径会找不到对应的文件
  • 但是这里我用的是${path}，好处在于其它页面引入common.jsp时，可以不用考虑其它页面所处的页面层级路径。因为如果你在common.jsp里使用相对路径的话，当其它页面所处的页面层级路径不在同一层时，这时其它页面引入common.jsp后会导致部分页面找不到引入的资源(js和css)。
2、 引入页面通过指令元素：include: 和动作元素include：

       区别

  • 指令元素include：
    先包含合并成为一个文件，变量共享不能同名，然后进行编译。
  • 动作元素include：先各自编译成自己的Servlet，然后再包含。变量各自独立，可以同名不影响。

       总结

  • 指令元素include是在编译阶段就处理所需要的文件，优点是执行速度快。但是被处理的文件在逻辑和语法上依赖于当前的jsp页面，这导致jsp程序的逻辑变得复杂混乱。
  • 动作元素include是在当前的JSP页面运行阶段才处理所需要引入的文件，缺点是执行要慢一点。但是被处理的文件在逻辑和语法上独立于当前的JSP页面。
  • 强烈建议：正规开发中，个人强烈反对使用@include指令，而建议使用指令。保持jsp页面的逻辑语义清晰，比处理速度快(当然两者效率上差异不是很大)更重要。
  • 使用指令的好处：假设现在有a.jsp，在a中include文件b.jsp，当jsp页面发生修改时如果使用了@include，当b被修改了，a不会发现b的改变，除非a也被修改了。但是如果使用了jsp:include：当b被修改了，执行时a马上会察觉到b的变化。