公众号:南宫一梦
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的变化。