在JavaScript中使用JSP標(biāo)簽的步驟詳解
面對“古老”的項(xiàng)目，延續(xù)其生命并發(fā)揮最大價(jià)值，是件很苦逼的事兒。如何在JS中使用JSP標(biāo)簽？如何使ES6模板字符串 含有 JSP標(biāo)簽、EL表達(dá)式、JS變量 正常識(shí)別？如何解決JSP的EL表達(dá)式和 ES6模板字符串 語法沖突？本文將遇到的幾處難點(diǎn)做梳理、并結(jié)合實(shí)際案例深入剖析。
- Windows-7-Ultimate-x64、Windows-10-BusinessEditions-21h2-x64、CentOS-7.9.2009-x64
- OracleJDK-1.8_u201
- IntelliJ IDEA Community Edition 2022.2.2
- Maven-3.6.3
1、簡述
本案例為Java項(xiàng)目，基礎(chǔ)架構(gòu)Spring MVC，使用到的技術(shù)點(diǎn)有：JSP EL表達(dá)式、ES6模板字符串、JSP標(biāo)簽等。
1.1、JSP EL表達(dá)式
EL（Expression Language）在JSP中訪問模型對象是通過EL表達(dá)式的語法來表達(dá)。
變量：${ 變量名 }
運(yùn)算：${ not empty 變量名 ? 變量名 : "默認(rèn)值" }
1.2、JavaScript ES6模板字符串
傳統(tǒng)的 JavaScript 語言，輸出模板通常是 字符串 與 變量 拼接而成，可能涉及到轉(zhuǎn)義，寫法相當(dāng)繁瑣不便，而使用 ES6 模板字符串 （反單引號 ` ）完美解決這個(gè)問題。如下：
let unitPrice = 1.68;
// 傳統(tǒng)寫法
alert('<div>單價(jià)：<em>' + unitPrice + '</em> 元</div>');
// 模板字符串，換行、空格、縮進(jìn)均會(huì)保留
alert(`<div>單價(jià)：<em>${unitPrice}</em> 元</div>`);2、案例剖析
如何在JavaScript中使用JSP標(biāo)簽，以下將進(jìn)行詳細(xì)剖析。
2.1、JavaScript腳本命名
通常，JavaScript腳本文件命名為 XXX.js，而要使 JSP引擎 也能解析JS中的JSP代碼，首先需將文件后綴名改為 XXX.jsp。
本案例 客制化JS腳本 為跟 標(biāo)準(zhǔn)的 JSP文件 區(qū)分，特命名為 XXX.js.jsp，如： 含有JSP標(biāo)簽的JS腳本.js.jsp。
2.2、配置文件后綴名映射
為使JSP引擎正常解釋JS腳本的JSP標(biāo)簽，需要在項(xiàng)目根目錄的 《xxx-gateway/src/main/webapp/WEB-INF/web.xml》中配置servlet-mapping，對包含JSP代碼的 JS腳本文件做映射（注：允許使用通配符進(jìn)行模糊匹配）。如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" >
<display-name>Admin Web</display-name>
<!-- WebAppRootKey -->
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>admin-gateway</param-value>
</context-param>
<context-param>
<param-name>isLog4jAutoInitializationDisabled</param-name>
<param-value>true</param-value>
</context-param>
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.jsp</url-pattern>
<!-- JavaScript文件中使用的 JSP標(biāo)簽 由服務(wù)端來解釋 -->
<url-pattern>/static/js/含有JSP標(biāo)簽的JS腳本.js.jsp</url-pattern>
</servlet-mapping>
<!-- Error page -->
<!--
<error-page>
<exception-type>java.lang.Throwable</exception-type>
<location>/WEB-INF/views/error/500.jsp</location>
</error-page>
-->
<error-page>
<error-code>500</error-code>
<location>/WEB-INF/views/error/500.jsp</location>
</error-page>
<error-page>
<error-code>404</error-code>
<location>/WEB-INF/views/error/404.jsp</location>
</error-page>
</web-app>2.3、JS腳本中使用JSP標(biāo)簽
主要包含以下技術(shù)點(diǎn)：
- JSP渲染前，需要先進(jìn)行字符集聲明，避免出現(xiàn)中文亂碼；
- JS腳本中，導(dǎo)入JSP自定義標(biāo)簽庫；
- JS腳本中 ES6模板字符串 含有 JSP標(biāo)簽、EL表達(dá)式、JS變量 混合嵌套時(shí)，將JS變量作為參數(shù)傳入 JSP標(biāo)簽 內(nèi)部調(diào)用，需要用 ${'${JS變量名}'} 格式；
《含有JSP標(biāo)簽的JS腳本.js.jsp》腳本文件內(nèi)容如下：
<%-- 指定頁面字符集：解決 JavaScript 文件中使用 ES6模板字符串 渲染頁面時(shí)亂碼 --%>
<%@ page contentType="text/javascript;charset=UTF-8" %>
<%-- 導(dǎo)入JSP自定義標(biāo)簽庫：解決 JavaScript 文件中使用 ES6模板字符串 無法解析JSP標(biāo)簽 --%>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
// TODO 此處省略1萬字
// ES6模板字符串 含有 JSP標(biāo)簽、EL表達(dá)式、JS變量
let userNo = '123456';
console.log(`<sys:user id="${'${userNo}'}">`);
// TODO 此處省略1萬字注意：
1、在 JSP文件中使用 ${} 會(huì)被優(yōu)先當(dāng)作 EL表達(dá)式，而不是 JS ES6模板字符串；
2、JSP標(biāo)簽中如果含 HTML字符串值拼接，需要使用 單引號 ' 替代，否則 ES6模板字符串 解析后，會(huì)報(bào)字符串拼接異常；
2.4、JSP中引入自定義JS腳本
用戶訪問的JSP頁面文件內(nèi)容，如下：
<html>
<head>
<title>JS腳本中插入JSP標(biāo)簽Demo</title>
<script src="/static/js/含有JSP標(biāo)簽的JS腳本.js.jsp"></script>
<script type="text/javascript">
// TODO
</script>
</head>
<body>
正文
</body>
</html>3、實(shí)踐總結(jié)
本案例中遇到的技術(shù)點(diǎn)，最終是由逆向倒推法一步步的處理，費(fèi)了不少工夫。如下：
- JSP引擎解析 JS腳本
- 解析后的 JS 腳本亂碼
- 如何讓 JS 正常識(shí)別 JSP標(biāo)簽
- ES6 模板字符串 插入 JS變量
- JSP EL表達(dá)式 和 JS ES6模板字符串 語法沖突解決
以上就是在JavaScript中使用JSP標(biāo)簽的步驟詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript使用JSP標(biāo)簽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在我們進(jìn)行前端開發(fā)時(shí)，針對項(xiàng)目優(yōu)化，常會(huì)提到一條：針對較小圖片，合理使用Base64字符串替換內(nèi)嵌，可以減少頁面http請求。本文整理了一些Base64編碼字符串的相關(guān)知識(shí)，感興趣的可以了解一下2023-02-02
JavaScript之面向?qū)ο骭動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語言如Java、C#的面向?qū)ο缶幊潭疾惶粯?。下面通過本文給大家介紹js面向?qū)ο笾R(shí)，包括面向?qū)ο蟮膬蓚€(gè)基本概念，一起看看吧2017-06-06
在JavaScript中對象是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)據(jù)和功能組織在一起,描述一類對象所具有的屬性和方法,這篇文章主要介紹了JS手撕代碼之高頻對象與數(shù)組工具方法的相關(guān)資料,需要的朋友可以參考下2026-04-04
一文詳解JavaScript混淆的原理、方法和實(shí)用技巧
在前端開發(fā)中,代碼的可閱讀性很重要,但有時(shí)候?yàn)榱吮Ｗo(hù)源代碼或防止被輕易篡改,我們會(huì)使用“混淆”技術(shù),把代碼變得難以理解,今天,我們就從基礎(chǔ)開始,逐步了解JavaScript混淆的原理、方法和實(shí)用技巧,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了JS常見面試試題,總結(jié)分析了javascript去重、遍歷、閉包、繼等相關(guān)算法與操作技巧,需要的朋友可以參考下2019-08-08
JavaScript實(shí)踐之使用Canvas開發(fā)一個(gè)可配置的大轉(zhuǎn)盤抽獎(jiǎng)功能
公司項(xiàng)目搞優(yōu)惠活動(dòng),讓做一個(gè)轉(zhuǎn)盤抽獎(jiǎng)的活動(dòng),這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)踐之使用Canvas開發(fā)一個(gè)可配置的大轉(zhuǎn)盤抽獎(jiǎng)功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了用場景去理解函數(shù)柯里化(入門篇)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript前端實(shí)現(xiàn)判斷登錄設(shè)備是移動(dòng)端還是PC
這篇文章主要為大家詳細(xì)介紹了JavaScript前端如何實(shí)現(xiàn)判斷登錄設(shè)備是移動(dòng)端還是PC,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2025-03-03
javascript跟隨滾動(dòng)效果插件代碼（javascript Follow Plugin）
這篇文章介紹了javascript跟隨滾動(dòng)效果插件代碼（javascript Follow Plugin），有需要的朋友可以參考一下2013-08-08
js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無法序列化的問題
JSON序列化指將JSON對象轉(zhuǎn)換為JSON字符串,J實(shí)現(xiàn)方式有兩種：一種是調(diào)用JSON對象內(nèi)置的stringify()函數(shù),一種是為對象自定義toJSON()函數(shù),本文重點(diǎn)介紹js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無法序列化的問題,感興趣的朋友一起看看吧2024-01-01