Web開發中前台與後台技術小結--關於EL運算式，JSTL，eval()函數，jstleval
在我們日常Web開發中，常常用到EL運算式，JSTL標籤，還有可能用到JavaScript中的eval()。下面就這樣技術和函數小小說明一下。
EL(Expression Language)，全稱運算式語言，既然是開發語言，那麼就像Java等語言一樣是用來寫語句的，通常是用在JSP頁面中，我們為了擷取JSP提供的內建對象的屬性值,
我們通常會使用到EL運算式，比如開發中常見的一個需求就是擷取項目的根目錄，如果項目的名值變化了，我們在指定路徑時，如果把項目的根目錄用一個變數來表示的話，那麼就不
需要修改我們代碼，所以此時我們通常會使用到一個常見的運算式${pageContext.request.contextPath},這個運算式的基本解釋就是擷取JSP的內建對象pageContext的request
對象的屬性contextPath的值。到此我們可以舉一個小例子來看看${pageContext.request.contextPath}的使用：
比如我們的項目結構是下面：
--demo
--src
--WebRoot
--WEB-INF
--css
--js
--img
--font
--page
如果我們的jsp檔案全部放在page目錄下面，其中有一個檔案demo.jsp引用了img檔案夾下的一張圖片nav.jpg,核心代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>demo示範頁面</title>
</head>
<body>
<img alt="nav" src="${pageContext.request.contextPath}/img/nav.jpg">
</body>
</html>
如果這個項目發布到伺服器中去了，以後有需求，說項目名得修改為demonstration，如果我們上面的代碼中不使用EL運算式來擷取項目名的話，上面的代碼可能就是下面的樣子
<img alt="nav" src="/demo/img/nav.jpg">，這時如果修改了項目名demo為demonstration,我們demo.jsp代碼就得跟著修改為下面的樣子
<img alt="nav" src="/demonstration/img/nav.jpg">。
所以我們使用EL運算式語言的第一個直觀的好處就是從頁面中抽取可能變化的部分，將其封裝為一個變數，這樣就方便了代碼的維護。當然除了這一點外，我們在開發中還是會
大量使用到EL運算式的，比如擷取page域、request域、session域或者application域中的參數和變數，我們經常在頁面中寫上這樣的EL表單式：
<input class="" id="" name="username" type="text" value="${username}" > 這樣的input輸入框通常出現在表單中，那麼後面的value="${username}是什麼含義
呢? 因為表單一般是用來封裝使用者提交的資料，那麼如果使用者輸入有誤，表單提交給背景程式處理，背景程式提示報錯不能正常按照商務邏輯走下去，比如使用者登陸表單中有上面的
<input>輸入框，使用者輸錯了使用者名稱，那麼就不能正常登陸，頁面應該跳轉到登陸頁面，提示相應的錯誤，那麼如果使用者名稱很長，輸入不是很方便的話，我們希望將使用者輸入的使用者
名回顯的話，那麼${username}，就是完成這一功能的。它會從上面講到的page域開始尋找是否有一個變數username，並通過${}來把變數的值擷取到，如果沒有再從request
域中尋找...如果還沒有就從session域中尋找，如果還沒有找到的話，最後會從application域尋找，如果有就輸出其值，如果還沒有找到，就返回''(或者null).所以頁面中<input>
第一次是沒有值的，如果使用者輸入了錯誤的值，頁面跳回來的時候會把使用者輸入的錯誤的值回顯出來。
所以EL運算式的第二個用處就是常用來做資料的回顯。講到此處，順便說下，EL用來做頁面資料回顯的好處，因為EL底層也是使用Java語言寫的，所以使用EL可以輕鬆擷取
Java類型的資料，然而jsp頁面最終通過伺服器"翻譯"成html的時候，只認識string類型的資料，這時使用EL它會自動完成基礎資料型別 (Elementary Data Type)的轉換，比如int類型資料，Date類型的數
據。這一點是JavaScript無法比擬的，因為JavaScript是無法直接解析後台傳過來的Java類型資料。
那麼開發中常常使用EL的地方還有嗎？很顯然還是有的，但是它喜歡帶上它的朋友JSTL一起。他們通常會一起合作來完成一些工作。比如我們有一個需求就是判斷使用者是否登
陸，如果登陸則顯示相應的操作菜單，我們通常這麼使用:
<c:if test="${user != null}">
<ul class="nav">
<li><a href="#">個人首頁</a></li>
<li><a href="#">登出</a></li>
</ul>
</c:if>
所以可以看出來JSTL有點像標籤，沒錯JSTL就是 JSP標準標籤庫,標籤的底層實際上也是使用Java編寫的，它通常和邏輯判斷有關聯，同時呢，它的判斷條件很多時候又依賴EL來
擷取，所以說JSTL和EL是一對好朋友，互相協助，彼此協作。JSTL還是有很多的功能的，限於時間和篇幅，我就把開發中常見的JSTL標籤的使用情境列舉一下：
（1）使用JSTL標籤的core標籤，常常使用別名c,比如<c:set>設定值，用來來時儲存一個值，一般是是供function標籤使用的、<c:out>輸出值，可以實現自動轉義，防止指令碼攻
擊，<c:url>可以拼接url路徑並帶上參數，這樣也可以防止提交參數亂碼；
（2）還有剛才說到function標籤，我們可以截取內容顯示，fn:substring()；
（3）除此之外我們還常常用到資料的格式化顯示別名fmt的標籤，實現格式化顯示日期，資料，貨幣。
最後說明一下，JavaScript中的eval()，首先它是一個函數，它的功能是：可計算某個字串，並執行其中的的 JavaScript 代碼,但是我們很少直接使用，我們使用它的情況是
使用eval()來將json格式的資料的字串解析成一個對象，比如下面的例子：
var data = '{"return_code":0,"return_message":"success","data":{"data":[{"id":"1","question":"公主令牌在哪交？"},{"id":"2","question":"公主護使有什麼用？"},{"id":"3","question":"角鬥場在哪？"},{"id":"4","question":"北部斷層在哪？"},{"id":"5","question":"歡樂令有什麼用？"},{"id":"6","question":"令牌積分有什麼用？"},{"id":"7","question":"南部斷層在哪？"},{"id":"8","question":"大妖魔令牌交給誰？"},{"id":"9","question":"神工坊在哪？"},{"id":"10","question":"警戒妖珠有什麼用？"}]}}';
我們可以通過下面的代碼擷取上面類Map對象資料：
var obj = eval("("+data+")");
alert("return_code:"+obj["return_code"]);
alert("第一個問題id：" + obj["data"]["data"][0]["id"]);
好了，時間不早了，祝自己做一個拯救世界的好夢！世界不早了，Good Night ,World !
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
