目录
一、form表单的基本使用
1.1什么是表单
1.2表单的组成部分
1.3form标签属性
1.4表单的同步提交及缺点
1.4.1什么是表单的同步提交
1.4.2表单同步提交的缺点
1.4.3如何解决表单同步提交的缺点
二、通过Ajax提交表单数据
2.1监听表单提交事件
2.2阻止表单默认提交行为
2.3快速获取表单中的数据
2.3.1serialize()函数
三、模板引擎的基本概念
3.1渲染UI结构时遇到的问题
3.2什么是模板引擎
3.3模板引擎的好处
四、art-template模板引擎
4.1art-template简介
4.2art-template模板引擎的基本使用
4.3art-template标准语法
4.3.1标准语法-原文输出
4.3.2标准语法-条件输出
4.3.3标准语法-循环输出
4.3.4标准语法-过滤器
五、模板引擎的实现原理
5.1正则与字符串操作
5.1.1基本语法
5.1.2分组
5.1.3字符串的replace函数
5.1.4多次replace
5.1.5使用while循环replace
5.1.6replace替换为真值
5.2实现简易的模板引擎
5.2.1实现步骤
一、form表单的基本使用
1.1什么是表单
表单在网页中主要负责数据采集功能。
1.2表单的组成部分
表单由三个基本部分组成：表单标签、表单域、表单按钮。
1.3form标签属性
<form>标签用来收集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
- 当未指定action属性值的情况下，action的默认值为当前页面的URL地址。
- target属性中：_blank:在新窗口中打开，_self:默认，在相同的框架中打开，_parent：在父框架中打开，_top:在整个窗口中打开，framename:在指定的框架中打开。
- method属性中：get适合用来提交少量的、简单的数据；post适合用来提交大量的、复杂的、或包含文件上传的数据。
- 在使用包含文件上传控件的表单时，enctype属性必须使用multipart/form-data值。
1.4表单的同步提交及缺点
1.4.1什么是表单的同步提交
通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。
1.4.2表单同步提交的缺点
1、表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
2、表单同步提交后，页面之间的状态和数据会丢失。
1.4.3如何解决表单同步提交的缺点
解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器。
二、通过Ajax提交表单数据
2.1监听表单提交事件
$(function () {
//第一种方式
$('#f1').submit(function () {
alert('监听到表单提交事件')
})
//第二种方式
$('#f1').on('submit', function () {
alert('监听到表单提交事件')
})
})2.2阻止表单默认提交行为
当监听到表单的提交事件之后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下：
//第一种阻止方式
$('#f1').submit(function (e) {
alert('监听到表单提交事件')
e.preventDefault()
})
//第二阻止种方式
$('#f1').on('submit', function (e) {
alert('监听到表单提交事件')
e.preventDefault()
})2.3快速获取表单中的数据
2.3.1serialize()函数
$(selector).serialize()好处：可以一次性获取表单中的所有的数据，但是必须为每个表单元素添加name属性！
三、模板引擎的基本概念
3.1渲染UI结构时遇到的问题
如果UI结构比较复杂，则拼接字符串的适合需要格外注意引号之间的嵌套，且一旦需求发生改变，修改起来也非常麻烦。
3.2什么是模板引擎
根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
3.3模板引擎的好处
1、减少了字符串的拼接操作
2、使代码结构更清晰
3、使代码更易于阅读和维护
四、art-template模板引擎
4.1art-template简介
中文官网：art-template (aui.github.io)
4.2art-template模板引擎的基本使用
步骤：
- 导入art-template
- 定义数据
- 定义模板
- 调用template函数
- 渲染HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.导入模板引擎 -->
<!-- 在window全局，多一个函数，叫做template('模板的id'，需要渲染的数据) -->
<script src="./template-web.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<div id="container">
</div>
<!-- 3.定义模板 -->
<!-- 模板的HTML结构，必须定义到script中 -->
<script type="text/html" id="tpl-user">
<h1>{{name}}</h1>
</script>
<script>
// 2.定义需要渲染的数据
var data = { name: 'zs' }
//4.带用template函数
var htmlstr = template('tpl-user', data)
$('#container').html(htmlstr)
</script>
</body>
</html>4.3art-template标准语法
4.3.1标准语法-原文输出
{{@ value}}如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。
4.3.2标准语法-条件输出
如果要实现条件输出，则可以在{{}}中使用if...else if.../if的方式，进行按需输出。
{{if value}}按需输出的内容{{/if}}
{{if v1}}按需输出的内容{{else if v2}}按需输出的内容{{/if}}
{{if flag===0}}
flag的值为0
{{else if flag===1}}
flag的值为1
{{/if}}4.3.3标准语法-循环输出
如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当循环的索引使用$index进行访问，当前的循环项使用$value进行访问。
{{each arr}}
{{$index}}{{$value}}
{{/each}}
{{each hobby}}
<li>索引是：{{$index}},循环项是：{{$value}}</li>
{{/each}}4.3.4标准语法-过滤器
过滤器的本质，就是一个function处理函数。
{{value | filterName}}过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function (value) {
// return处理的结果
}示例：
<script type="text/html" id="tpl-user">
<h3>{{regTime|dataFormat}}</h3>
</script>
<script>
template.defaults.imports.dataFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
// return处理的结果
}
var data = {regTime: new Date() }
</script>
五、模板引擎的实现原理
5.1正则与字符串操作
5.1.1基本语法
exec()函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回null。
RegEzpObject.exec(string)示例：
<script>
var str = 'hello'
var pattern = /o/
var result = pattern.exec(str)
console.log(result);
</script>5.1.2分组
正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容。
示例：
<script>
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-A]+)}}/
var result = pattern.exec(str)
console.log(result);
</script>5.1.3字符串的replace函数
replace()函数用于在字符串中用一些字符替换另一些字符。
var result='123456'.replace('123','abc')//得到'abc456'示例：
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-A]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容
console.log(str);5.1.4多次replace
var str = '<div>我是{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-A]+)\s*}}/
//第一次匹配
var res1 = pattern.exec(str)
str = str.replace(res1[0], res1[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容
console.log(str); //<div>我是name今年{{ age }}岁了</div>
//第二次匹配
var res2 = pattern.exec(str)
str = str.replace(res2[0], res2[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容
console.log(str); //<div>我是name今年age岁了</div>5.1.5使用while循环replace
var str = '<div>我是{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-A]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], patternResult[1])
}
console.log(str);5.1.6replace替换为真值
var data = { name: '张三', age: 20 }
var str = '<div>我是{{name}}今年{{ age }}岁了</div>'
var pattern = /{{\s*([a-zA-A]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str);5.2实现简易的模板引擎
5.2.1实现步骤
1、定义模板结构
2、预调用模板引擎
3、封装template函数
4、导入并使用自定义的模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入自定义的模板引擎 -->
<!-- <script src="./template.js"></script> -->
</head>
<body>
<div id="user-box"></div>
<!-- 1.定义模板结构 -->
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>年龄：{{ age }}</div>
<div>性别：{{ gender}}</div>
<div>住址：{{address }}</div>
</script>
<script>
// 2.预调用
var data = { name: '张三', age: 18, gender: '男', address: '中国山东' }
var htmlStr = template('tpl-user', data)
document.getElementById('user-box').innerHTML = htmlStr
//3.封装
function template(id, data) {
var str = document.getElementById(id).innerHTML
var pattern = /{{\s*([a-zA-A]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
return str
}
</script>
</body>
</html>
