您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

MyEclipse 中高效引入大量 JS 文件：使用 JSPF 片段

編輯：程式設計綜合問答

問題

EasyUI 等框架需引入十幾個 JS/CSS，每個頁面重複寫 `` 維護極其痛苦。

解決方案：JSP Fragment (.jspf)

將公共引入抽離為獨立片段文件，各頁面 `include` 一次即可。

1. 創建 `common_js.jspf`

<%-- WebRoot/common/common_js.jspf --%>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/icon.css">
<!-- 其他通用 JS/CSS -->

2. 頁面引入

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/common_js.jspf" %>
<html>
<head><title>我的頁面</title></head>
<body>
    <!-- 頁面內容 -->
</body>
</html>

優勢

**維護單一來源**：增減 JS 只改一處。
**編譯時靜態包含**：無運行時開銷，等同於直接寫在頁面。
**支持 EL/JSTL**：片段中可用 ``、表達式動態生成路徑。
**IDE 友好**：MyEclipse/Eclipse 可正常提示片段內路徑。

進階：按模塊劃分片段

<%@ include file="/common/core_js.jspf" %>       <%-- jQuery, EasyUI 核心 --%>
<%@ include file="/common/chart_js.jspf" %>      <%-- ECharts, Highcharts --%>
<%@ include file="/common/form_js.jspf" %>      <%-- Validate, Uploader --%>

頁面按需組合：`<%@ include file="/common/core_js.jspf" %>` + `<%@ include file="/common/chart_js.jspf" %>`

替代方案對比

方案	優點	缺點
JSPF 靜態包含	零開銷、IDE 支持、可用動態路徑	修改後需重新編譯 JSP（開發模式通常熱部署）
JSP 動態 <jsp:include>	修改即時生效、可傳參	每次請求額外 include 開銷、無法在片段定義全局變量
模板引擎	功能強大、布局復用	引入學習成本、項目已用 JSP 則過度設計
前端構建	合並壓縮、緩存控制、現代化	需配置 Webpack/Gulp、非 Java 後端項目首選