前端_网页编程 Form表单与模板引擎（下）
生活随笔
收集整理的這篇文章主要介紹了
前端_网页编程 Form表单与模板引擎（下）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 續上一篇
- 6. 模板引擎的實現原理
- 6.1 正則與字符串操作
- 6.1.1 基本語法
- 6.1.2 分組
- 6.1.3 字符串的replace函數
- 6.1.4 多次replace
- 6.1.5 使用while循環replace
- 6.1.6 replace替換為真值
- 6.2 實現簡易的模板引擎
- 6.2.1 實現步驟
- 6.2.2 定義模板結構
- 6.2.3 預調用模板引擎
- 6.2.4 封裝 template 函數
- 6.2.5 導入并使用自定義的模板引擎
- 總結
續上一篇
6. 模板引擎的實現原理
在模板引擎內部用的最主要的技術就是正則表達式和字符串替換的操作。
6.1 正則與字符串操作
這里補充一下正則和字符串的基本知識
6.1.1 基本語法
正則函數exec()，用于檢索字符串中的正則表達式的匹配。
如果字符串中有匹配的值，則返回該匹配值，否則返回 null。
語法格式：
// RegExpObject 表示正則表達式 RegExpObject.exec(string)代碼示例：
var str = 'hello' var pattern = /o/ // 正則表達式 // 輸出的結果["o", index: 4, input: "hello", groups: undefined] console.log(pattern.exec(str))6.1.2 分組
正則表達式中 () 包起來的內容表示一個分組，可以通過分組來提取自己想要的內容，示例代碼如下
var str = '<div>我是{{name}}</div>'var pattern = /{{([a-zA-Z]+)}}/ // + 號表示任意多個var patternResult = pattern.exec(str)console.log(patternResult)// 得到 name 相關的分組信息// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]正則/{{([a-zA-Z]+)}}/里的小括號()代表提取分組。
6.1.3 字符串的replace函數
replace() 函數用于在字符串中用一些字符替換另一些字符，語法格式如下：
// 將1、2、3替換為a、b、c var result = '123456'.replace('123', 'abc') // 得到的 result 的值為字符串 'abc456'代碼示例：
var str = '<div>我是{{name}}</div>' var pattern = /{{([a-zA-Z]+)}}/var patternResult = pattern.exec(str) str = str.replace(patternResult[0], patternResult[1]) // replace 函數返回值為替換后的新字符串 // 輸出的內容是：<div>我是name</div> console.log(str)6.1.4 多次replace
代碼示例：
var str = '<div>{{name}}今年{{ age }}歲了</div>'var pattern = /{{\s*([a-zA-Z]+)\s*}}/// 第一次匹配var res1 = pattern.exec(str)str = str.replace(res1[0], res1[1])console.log(str)// 第二次匹配var res2 = pattern.exec(str)str = str.replace(res2[0], res2[1])console.log(str)// 第三次匹配var res3 = pattern.exec(str)console.log(res3)</script>\s* 表示空字符串，出現一次或多次。
6.1.5 使用while循環replace
代碼示例：
<script>var str = '<div>{{name}}今年{{ age }}歲了</div>'var pattern = /{{\s*([a-zA-Z]+)\s*}}/var patternResult = nullwhile (patternResult = pattern.exec(str)) {str = str.replace(patternResult[0], patternResult[1])}console.log(str) // 輸出 <div>name今年age歲了</div></script> 控件臺輸出：
6.1.6 replace替換為真值
代碼示例：
<script>var data = {name: '張三',age: 20}var str = '<div>{{name}}今年{{ age }}歲了</div>'var pattern = /{{\s*([a-zA-Z]+)\s*}}/var patternResult = nullwhile ((patternResult = pattern.exec(str))) {// 模板引擎的核心代碼str = str.replace(patternResult[0], data[patternResult[1]])}console.log(str) // 輸出：<div>張三今年20歲了</div></script> 控制臺輸出：
6.2 實現簡易的模板引擎
6.2.1 實現步驟
- 定義模板結構；
- 預調用模板引擎；
- 封裝 template 函數；
- 導入并使用自定義的模板引擎；
6.2.2 定義模板結構
模板代碼示例：
<div id="user-box"></div><!-- 定義模板結構 --><script type="text/html" id="tpl-user"><div>姓名：{{name}}</div><div>年齡：{{ age }}</div><div>性別：{{ gender}}</div><div>住址：{{address }}</div></script>6.2.3 預調用模板引擎
js代碼示例：
<!-- 預調用模板引擎 --><script>// 定義數據var data = { name: '張三瘋',age: 128,gender: '男',address: '湖北武當山' }// 調用模板函數var htmlStr = template('tpl-user', data)// 渲染HTML結構document.getElementById('user-box').innerHTML = htmlStr</script> 頁面渲染：
6.2.4 封裝 template 函數
代碼：
// 封裝template函數function template(id, data) { var str = document.getElementById(id).innerHTML var pattern = /{{\s*([a-zA-Z]+)\s*}}/ var pattResult = null while ((pattResult = pattern.exec(str))) { str = str.replace(pattResult[0], data[pattResult[1]]) } return str}6.2.5 導入并使用自定義的模板引擎
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>自定義模板引擎</title><!-- 導入自定義的模板引擎 --><script src="./js/template.js"></script> </head>總結
上一篇：前端_網頁編程 Form表單與模板引擎（中）
總結
以上是生活随笔為你收集整理的前端_网页编程 Form表单与模板引擎（下）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java-switch选择结构
- 下一篇： 前端学习笔记之 创建节点 与 添加节点案