整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
:if標(biāo)簽：
完成類似java的if else的功能：
馬克- to-win：馬克 java社區(qū)：防盜版實名手機(jī)尾號： 73203。
例 2.2.2
<%@ page contentType="text/html; charset=GBK"%>
<!--看看如何完成if else的功能。$就是計算一下的意思。
-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="java.util.*"%>
<html>
<body>
<c:set var="age" value="13"></c:set>
<c:if test="${age<12}">
你是小學(xué)生
</c:if>
<c:if test="${18>age&&age>12}">
你是中學(xué)生
</c:if>
<c:if test="${age>18}">
你高于中學(xué)生
</c:if>
</body>
</html>
運行jsp后，瀏覽器中輸出結(jié)果是：
你是中學(xué)生
篇幅有限更多請見擴(kuò)展鏈接:http://www.mark-to-win.com/tutorial/jsp_5_cifExample.html
家好，html模板的判斷語句和Python里的寫法是一樣的，只不過每一行需要包裹在花括號和百分號里。
·從視圖函數(shù)里傳遞一個名稱為user的數(shù)據(jù)，user變量的值輸入小鐵，在html文件里判斷。如果user返回了數(shù)據(jù)顯示歡迎你小鐵，否則如果沒有顯示數(shù)據(jù)顯示請登錄。
·最后用and if來閉合判斷語句，運行Web服務(wù)，在瀏覽器里查看效果。因為user這個變量是有數(shù)據(jù)的，所以前端顯示的歡迎您小鐵。將user變量的值改成無，回到瀏覽器查看效果，這個時候瀏覽器顯示的是請登錄。
這就是html模板文件里if判斷語句的使用方法。
于parseHTML函數(shù)代碼實在過于龐大，我這里就不一次性貼出源代碼了，大家可以前往（https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js）查看源代碼。
我們來總結(jié)一下該函數(shù)的主要功能：
1、匹配標(biāo)簽的 "<" 字符
匹配的標(biāo)簽名稱不能是：script、style、textarea
有如下情況：
1、注釋標(biāo)簽 /^<!\--/
2、條件注釋 /^<!\[/
3、html文檔頭部 /^<!DOCTYPE [^>]+>/i
4、標(biāo)簽結(jié)束 /^<\/ 開頭
5、標(biāo)簽開始 /^</ 開頭
然后開始匹配標(biāo)簽的屬性包括w3的標(biāo)準(zhǔn)屬性（id、class）或者自定義的任何屬性，以及vue的指令（v-、:、@）等，直到匹配到 "/>" 標(biāo)簽的結(jié)尾。然后把已匹配的從字符串中刪除，一直 while 循環(huán)匹配。
解析開始標(biāo)簽函數(shù)代碼：
function parseStartTag () {
// 標(biāo)簽的開始 如<div
const start=html.match(startTagOpen)
if (start) {
const match={
tagName: start[1], // 標(biāo)簽名稱
attrs: [], // 標(biāo)簽屬性
start: index // 開始位置
}
// 減去已匹配的長度
advance(start[0].length)
let end, attr
while (!(end=html.match(startTagClose)) && (attr=html.match(dynamicArgAttribute) || html.match(attribute))) {
attr.start=index
v
advance(attr[0].length)
attr.end=index
match.attrs.push(attr) // 把匹配到的屬性添加到attrs數(shù)組
}
if (end) { // 標(biāo)簽的結(jié)束符 ">"
match.unarySlash=end[1]
advance(end[0].length) // 減去已匹配的長度
match.end=index // 結(jié)束位置
return match
}
}
}處理過后結(jié)構(gòu)如下：
接下來就是處理組合屬性，調(diào)用 “handleStartTag” 函數(shù)
function handleStartTag (match) {
const tagName=match.tagName // 標(biāo)簽名稱
const unarySlash=match.unarySlash // 一元標(biāo)簽
if (expectHTML) {
if (lastTag==='p' && isNonPhrasingTag(tagName)) {
// 解析標(biāo)簽結(jié)束
parseEndTag(lastTag)
}
if (canBeLeftOpenTag(tagName) && lastTag===tagName) {
parseEndTag(tagName)
}
}
// 是否為一元標(biāo)簽
const unary=isUnaryTag(tagName) || !!unarySlash
const l=match.attrs.length
// 標(biāo)簽屬性集合
const attrs=new Array(l)
for (let i=0; i < l; i++) {
const args=match.attrs[i]
const value=args[3] || args[4] || args[5] || ''
const shouldDecodeNewlines=tagName==='a' && args[1]==='href' ? options.shouldDecodeNewlinesForHref : options.shouldDecodeNewlines
attrs[i]={
name: args[1], // 屬性名稱
value: decodeAttr(value, shouldDecodeNewlines) // 屬性值
}
if (process.env.NODE_ENV !=='production' && options.outputSourceRange) {
// 開始位置
attrs[i].start=args.start + args[0].match(/^\s*/).length
// 結(jié)束位置
attrs[i].end=args.end
}
}
if (!unary) {
stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
lastTag=tagName
}
// 調(diào)用start函數(shù)
if (options.start) {
options.start(tagName, attrs, unary, match.start, match.end)
}
}我們簡單說一下最后調(diào)用的start函數(shù)的作用：
1、判斷是否為svg標(biāo)簽，并處理svg在ie下的兼容性問題
2、遍歷標(biāo)簽屬性，驗證其名稱是否有效
3、標(biāo)簽名是否為 style 或者 script ，如果在服務(wù)端會提示warn警告
4、檢查屬性是否存在 v-for、v-if、v-once指令
5、如果是更元素就驗證其合法性，不能是 slot 和 template 標(biāo)簽，不能存在 v-for指令
以上就是界面html模板的開始標(biāo)簽的分析，接下來我們來分析如何匹配結(jié)束標(biāo)簽。
請看：Vue源碼全面解析三十 parseHTML函數(shù)（解析html（二）結(jié)束標(biāo)簽）
如有錯誤，歡迎指正，謝謝。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
