续上一篇
- 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表单与模板引擎（下）相关推荐

前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
Form表单及模板引擎
Form表单及模板引擎什么是Form表单 Form表单的一些属性表单的同步提交及优缺点通过Ajax提交表单数据 JQuery的监听表单提交事件取消表单默认提交行为快速获取表单中的数据模板引 ...
form表单与模板引擎
form表单与模板引擎一.form表单的基本使用 1.1 什么是表单 1.2 表单的组成部分 1.3 <form>标签的属性 1.4 表单的同步提交及缺点二.通过ajax提交表单数据 ...
前后端交互之form表单和模板引擎
目录一.Form表单 1.1 标签属性 1.1.1 action 1.1.2 target 1.1.3 method 1.1.4 enctype 1.2 表单的同步提交及缺点 1.3 通过Ajax提 ...
前后端交互：form表单与模板引擎
目录 form表单基础知识概念组成常用属性表单同步提交概念缺点表单事件监听 submit监听方式 on监听方式阻止表单默认行为 serialize 快速获取表单提交的数据模板引擎 ...
前端_网页编程 Ajax加强
目录内容一.XMLHttpRequest的基本使用 1. 什么是XMLHttpRequest 2. 使用xhr发起GET请求 3. xhr对象的readyState属性 4. 使用xhr发起带参数 ...
前端学习--Ajax(2) form表单
一.form表单组成:表单标签.表单域(采集信息).表单按钮(提交) 1.1 <form>的属性 action -- 向何处发送表单数据如果不写默认是当前页面url target -- ...
【前端】Ajax-form表单与模板引擎
目录一.form表单的基本使用 1.1什么是表单 1.2表单的组成部分 1.3form标签属性 1.4表单的同步提交及缺点 1.4.1什么是表单的同步提交 1.4.2表单同步提交的缺点 1.4.3如 ...

前端_网页编程 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 导入并使用自定义的模板引擎

总结

前端_网页编程 Form表单与模板引擎（下）相关推荐

最新文章

热门文章