一、回顾form表单知识点
1.你还记得什么是表单吗？
表单就是用来采集数据的，
标签的属性则是用于规定如何将采集到的数据发送到服务器上2.form表单的基本属性有哪些？
action 对应的是URL地址，即我们将表单中的数据传输到哪里去
method 对应的是方式，相比看过我上一篇文章的UU们应该直到有哪些吧，没错，就是大家都老朋友：GET 和 POST，即我们以何种方式将数据提交到 action 里面去
target 对应的是在何处打开我们的URL地址
enctype 对应的是在发送表单之前我们如何对数据进行编码（暂时可以忽略）
具体表现请看如下代码：（代码中还有贴心小提示哦）
<!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>
</head>
<body>
<!-- action 的默认值是当前页面的URL地址 如果想要改变地址，可以在 action 栏里面填入URL地址-->
<!-- target 页面打开位置 默认是“ _self ”当前页面打开 “ _blank ”在一个新的页面打开-->
<!-- method 页面打开方式 默认是“ get ”将数据直接传递给URL地址，和 action 默认时的形式差不多 “ post ”传递数据到后台，数据不会在URL地址中显示-->
<!-- 由于这个不同点，所以 post 比 get 更加保险，私密性更强，当操作比较复杂的工作时常用 post 而不是 get -->
<form action="/guess" target="_blank" method="post">
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
</body>
</html>
但是表单提交数据也有不好的一点，它是同步提交的方法，使得 form 表单提交后，页面之前的状态和数据都会丢失，这对我们来说是十分不利的一点，当然，聪明的程序员总有办法解决它
3.如何解决表单同步提交带来的缺点？
之前有提到：form表单只负责采集数据，而我们的好伙伴 Ajax正好可以将数据提交到服务器上，这岂不是一举两得
4.监听表单的提交事件
在jQuery中有两种方法可以监听表单提交事件，具体看代码：
<script>
// 监听表单的提交事件
// 方法一
// $('#f1').submit(function () {
// alert(11);
// });
// 方法二
$('#f1').on('submit', function () {
alert(22);
})
</script>
温馨提示：
只要是有使用到 <script>标签的，如果想要看到一定的效果，一定要引入 jquery.js 文件，否则就是白做一场
5.阻止表单默认的提交行为
当监听到表单的提交事件后，调用e.preventDefault();函数，可以阻止表单的提交和页面的跳转
具体代码如下：
<script>
// 阻止表单默认的提交行为
// event.preventDefault();
// 方法一
// $('#f1').submit(function (e) {
// alert(11);
// e.preventDefault();
// });
// 方法二
$('#f1').on('submit', function (e) {
alert(22);
e.preventDefault();
})
</script>
6.快速获取表单中的全部数据
利用传统的方法一个一个输入数据实在是过于繁琐，因此，简便方法也应运而生了:
serialize() 它能够一次性获取表单中全部的数据
其语法如下：
$('对象').serialize();
它输出的结果会用 & 连接起来
注意：使用 serialize() 的时候，需要用到它的元素一定要有 name 属性，否则无效
具体代码如下：
<script>
// 快速获取表单中的全部数据
// 方法一
$('#f1').submit(function (e) {
e.preventDefault();
var data = $(this).serialize(); // 将获取到的
值赋值给data
console.log(data);
});
// 方法二
// $('#f1').on('submit', function (e) {
// e.preventDefault();
// var data = $(this).serialize();
// console.log(data);
// })
</script>
到这里，我们form表单的新旧知识都已经讲完了，欸嘿，是不是以为这就结束了，nonono，新的篇章还在等着大家
二、模板引擎
1.什么是模板引擎？
模板引擎能够根据程序员指定的 模板结构 和 数据，自动的生成一个完整的HTML页面
2.使用模板引擎有哪些好处？
a.减少了字符串的拼接操作
b.使得代码结构更加清晰
c.使得代码更加易于阅读和维护
3.art-template模板引擎
art-template自称是简洁、超快的一个模板引擎，当然它名副其实，用过的都说好！
要使用模板引擎自然少不了要安装
4.art-template的安装步骤
a.打开浏览器，搜索art-template官网
b.找到下载链接，点击鼠标右键“另存为”即可
5.art-template的使用步骤
a.导入 art-template
b.定义数据
c.定义模板
d.调用 art-template 函数
e.渲染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="lib/template-web.js"></script>
<!-- 为了方便最后渲染HTML结构，引入 jquery.js 文件 -->
<script src="lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板 -->
<!-- 注意：模板的 HTML 结构一定要定义到 script 中（手动），因为它本身有个默认的定义 type -->
<!-- 默认 type 为： -->
<!-- <script type="text/javascript"></script> -->
<!-- 手动修改后 ： -->
<!-- 在 art-template 中，{{}} 表示一个占位符 -->
<script type="text/html" id="tpl-user">
<h1>{{name}} ------ {{age}}</h1>
</script>
<script>
// 2.定义数据
var data = { name: 'ls', age: '18' };
// 4.调用 template 函数
var htmlStr = template('tpl-user', data);
console.log(htmlStr);
// 5.渲染HTML结构(使用原生DOM或者js) 其实本质就是将内容直接放置页面上来显示
$('#container').html(htmlStr);
</script>
</body>
</html>
6.art-template的标准语法
在 art-template 中，{{}} 表示一个占位符，{{}}语法就是标准语法
5.art-template的标准语法的使用
详情见代码:
<!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>
</head>
<body>
<script src="lib/template-web.js"></script>
<script src="lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="tpl-user">
<h1>{{name}} ------ {{age}}</h1>
{{@ test}}
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
<ul>
{{each hobby}}
<li>索引号是：{{$index}},循环项是:{{$value}}</li>
{{/each}}
</ul>
<!-- 调用时间过滤器 -->
<h3>{{regTime | timeFormat}}</h3>
</script>
<script>
// 定义一个时间过滤器
template.defaults.imports.timeFormat = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var hh = date.getHours();
var mm = date.getMinutes();
var ss = date.getSeconds();
return y + "-" + m + "-" + d + ' ' + hh + ':' + mm + ':' + ss;
}
var data = { name: 'ls', age: '18', test: '<h3>测试原文的输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '玩儿'], regTime: new Date() };
var htmlStr = template('tpl-user', data);
console.log(htmlStr);
$('#container').html(htmlStr);
// 总结：
// 原文输出语法： {{@ value}}
// 条件输出语法： {{if value}} 按需输出的内容 {{else if}} 按需输出的内容 {{/if}}
// 循环输出语法： {{each 内容函数}} 索引：{{$index}} 内容：{{$value}} {{/each}}
// 过滤器语法：
// {{value | 过滤器名称}}
// 定义过滤器：
// template.defaults.imports.过滤器名称 = function(形参) {具体步骤来定义过滤器内容}
// return 结果 这一步不能省略!!!
</script>
</body>
</html>
7.模板引擎的实现原理
正则和字符串操作
exec()函数的使用，代码如下：
<script>
// exec函数用于 检索字符串 中正则表达式的匹配
// 如果有匹配到的值就返回值，没有的话就返回 null
// 其语法格式如下：
// 检索的值.exec(检索对象)
var str = 'hello';
var pattern = /o/;
var result = pattern.exec(str);
console.log(result);
</script>
8.提取分组
具体代码如下：
<script>
var str = '<div>我是{{name}}</div>';
// [] 说明情况，它可以是a~z,A~Z
// + 说明它可以是任意多个（连续多个）
// () 提取分组
var pattern = /{{([a-zA-Z]+)}}/
var result = pattern.exec(str);
console.log(result);
</script>
9.替换
具体代码如下：
<script>
var str = '<div>我是{{name}}</div>';
var pattern = /{{([a-zA-Z]+)}}/;
var patternResult = pattern.exec(str);
// console.log(patternResult);
// replace(a,b) 将 a 的内容替换为 b 的内容
var str = str.replace(patternResult[0], patternResult[1]);
console.log(str);
</script>
10.while 循环
具体代码如下：
<script>
var str = '<div>{{name}}现在{{age}}岁了</div>';
var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
var patternResult = null;
while (patternResult = pattern.exec(str)) {
// 这个条件表达式的意思是：将获取到的正则表达式赋值给 patternResult 如果正则表达式有值，就能一直进行循环，保证条件成立（true）如果正则表达式的值为0，那么就是 null (false) 则条件不再成立，它就会立即跳出循环，进行下一项操作
str = str.replace(patternResult[0], patternResult[1]);
}
console.log(str);
</script>
11.replace 替换为真值
具体代码如下：
<script>
var data = { name: '李四', age: 18 };
var str = '<div>{{name}}今年{{age}}岁了</div>';
var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
var patternResult = null;
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]]);
}
console.log(str);
</script>
至此，有关 form 表单和模板引擎的大部分知识已经讲完了，内容稍许繁琐，但需要我们用心体会，用代码实践，没有任何的讲解能够代替自我实践，因此赶紧行动起来吧（实不相瞒，这些本人也学了很久），不要急于求成！
若有错误和不足，请在评论区中指正，我们共同进步！！！
