Web項目中前端頁面引用外部Js和Css的路徑問題
一般我們在做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 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的變化。