公众号：南宫一梦
Web项目中前端页面引用外部Js和Css的路径问题
一般我们在做Web项目时，通常会将多个页面引入的公共js和css文件抽取出来，单独写成一个公共文件，以期方便各个页面单独引入，达到复用。
1、抽取分离公共的js和css代码，并新建成一个文件取名 common.jsp。
<%@ taglib prefix="yy" uri="/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"><%--/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><%--/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><%--/6/11新加--%><script type="text/javascript" src="${path}/statics/uploader/jquery.uploadify.v2.1.4.js"></script><%--/6/11新加--%><script type="text/javascript" src="${path}/statics/autocomplete/jquery.autocomplete.js"></script><%--/6/11新加--%></head>
相对路径
./表示当前文件所在目录 ，./可省略/表示根目录…/…/ 代表上两级目录绝对路径
具体的某一个文件所在的路径，譬如：G:/testworkspace/logo.png用法
项目中常用相对路径写法，因为当本地项目部署到服务器后，文件路径一般会发生改变，使用绝对路径会找不到对应的文件但是这里我用的是${path}，好处在于其它页面引入common.jsp时，可以不用考虑其它页面所处的页面层级路径。因为如果你在common.jsp里使用相对路径的话，当其它页面所处的页面层级路径不在同一层时，这时其它页面引入common.jsp后会导致部分页面找不到引入的资源(js和css)。
2、 引入页面通过指令元素：include:<%@ include file=""%> 和动作元素include：<jsp:include page="" />
区别
指令元素include：<%@ include file=“文件的相对路径或绝对路径”%>先包含合并成为一个文件，变量共享不能同名，然后进行编译。动作元素include：<jsp:include page=“文件的相对路径或绝对路径” />
先各自编译成自己的Servlet，然后再包含。变量各自独立，可以同名不影响。
总结
指令元素include是在编译阶段就处理所需要的文件，优点是执行速度快。但是被处理的文件在逻辑和语法上依赖于当前的jsp页面，这导致jsp程序的逻辑变得复杂混乱。动作元素include是在当前的JSP页面运行阶段才处理所需要引入的文件，缺点是执行要慢一点。但是被处理的文件在逻辑和语法上独立与当前的JSP页面。强烈建议
正规开发中，个人强烈反对使用@include指令，而建议使用<jsp:include page=” ” />指令。保持jsp页面的逻辑语义清晰，比处理速度快(当然两者效率上差异不是很大)更重要。使用<jsp:include page=” ” />指令的好处：假设现在又a.jsp，在a中include文件b.jsp，当jsp页面发生修改时假设使用了@include：如果b被修改了，a不会发现b的改变，除非a也被修改了。
假设使用了jsp:include：如果b被修改了，执行时a马上会察觉到b的变化。
