Ajax技术

1.模板引擎

通过搜索用户例我们发现，要渲染到网页上的数据是使用js循环拼接字符串，再将拼接好的字符串填入tbody标签中的。

这种方式可读性差，出错不容易查找。

模板引擎技术就是为了解决字符串拼接问题的。 ==模板引擎技术本质就是拼接字符串。==

传统模式有两种拼接显示字符串的方式:

• 在后端程序中拼接好，然后以字符串形式返回

• 后端程序返回json对象，前端程序接收了之后，解析json进行拼接

模板引擎方式:

模板引擎属于前端程序拼接字符串
提前定义好要显示格式,所有数据位置以特殊标记表示出来.模板引擎会自动分析,并将数据天到响应的位置.

1.1artTemplate快速上手

基本使用步骤:

1) 使用script标签引入arttemplate库文件 (template-web.js)

2) 定义标签，用来显示最终结果数据

3) 定义模板和模板中所需数据。

 ① 定义要显示在模板中的数据，必须是 json 对象
 ② 使用script标签定义模板，type="text/template"  id="tpl"，并且使用 {{}}  将所有数据位置标记出来

4) 调用template函数，解析模板

5) 将解析好的模板字符串填充到事先定义好的标签中(显示到网页上)

关键点:

1)在定义模板时使用script标签,type="text/==template==" id="tpl"

2)定义json对象,json对象中的key值一定要和模板{{key}}一致

3)条用template函数是进行解析

参数1:模板的id值
参数2:json对象
返回值:解析好的字符串

1.2循环结构--each

关键点:

1)template函数需要的参数是一个json对象,所以申明json对象,里面是数组

2)在定义模板时使用each进行循环

each结构:

{{each}}
        输出内容
{{/each}}

data:要循环的数组

value:循环取出的单元值

注意:使用{{.each}}结束循环

1.3选择结构 -- if else

{{if  判断条件}}

  程序1

{{else}}

　　程序块2

{{/if}}

1.4模板引擎原理简介

核心原理:使用正则替换模板引擎中的标记

核心方法:

　　①reg.exec(str):

　　reg:正则表达式

　　str:字符串

函数作用:从str字符串中找到符合reg正则表达式的对象,如果没有则返回null

　　②str.replace(str1,str2);

　　函数作用:在str字符串中找到str字符串,然后str字符串进行替换