模版插件

模版引擎简介

作用：封装了一个文件(类似js工厂方法)，通过传入一个object，来创建一个模块的HTML标签。

特性：(以我们常用的artTemplate库为例)

1.是写在 <script> 标签中的，注意：type=text/template、或者text/html，不能是text/javascript，如果是后者就直接执行了，是前两者的话，就可以当成一个平常标签来使用
2.<script> 中的代码，HTML代码照常写，里面需要动态改变的部分，用JS代码写，写在<% %>里

本质原理：

通过模板标签的id(artTemplate要求是\<script>标签)，来获取标签的innerHTML，然后获取传入object的属性，通过正则表达式，对innerHTML进行查找 —> 替换修改

模版插件原理

我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?

定义正则表达式:

想要匹配<%= 属性名 %> 我们可以定义正则如下(javascript中)

/* 
JS中的RegExp对象:
    创建
        创建方法1: var reg = new RegExp("正则")
        创建方法2: var reg = /正则/;    推荐使用这种
    使用:
        reg.exec(string) 可以检测字符串
*/
/*
正则含义
    <%:以 <% 开始
    =\s* "="号之后有0个或多个空白字符
    ([^%>]+\S): 匹配除了%>以外的所有字符(至少1个)
    \s*:0个或多个空白字符
    %>:以%>结束
*/
    var reg = /<%=\s*([^%>]+\S)\s*%>/;

基本使用

定义好作为模板的文本
使用正则表达式进行匹配替换即可

// 定义文本
var str = '大家好，我叫<%= name %>，我今年<%= age %>，我的爱好为:<%= skill %>';
// 定义数据
var data = {
        name: 'itcast',
        age: 10,
        skill:'打篮球'
       };

// 快速的创建方法,好处,直接使用 \ 即可 不需要考虑 转义
var reg = /<%=\s*([^%>]+\S)\s*%>/;
// 返回的是一个对象
var match = null;

// 使用  while循环 进行检查,知道没有匹配的内容
while (match = reg.exec(str)){
    // 匹配到的字符串
    var mathString = match[0]
    // 子表达式匹配到的字符串
    var subString = match[1];
    // 打印文本内容
    console.log("循环中:"+str);
    // 替换字符串的内容
    var str = str.replace(mathString,data[subString]);
    match = reg.exec(str);
}
console.log("循环完毕:"+str);

演示结果为:

常见的模板插件

ArtTemplate基本使用

模板引擎的用法大同小异,ArtTemplate由于性能优秀,这里我们演示ArtTemplate的用法

导入模板引擎: 将下载好的ArtTemplate导入到页面中

<script type="text/javascript" src = "./files/template-native.js"></script>

定义模板:

<% %>这样的语法是定义逻辑表达式 <%=内容 %>这样的语法为输出表达式 注意:这路的模板type='text'如果写成javascript会执行

<script type="text" id = "templ01">
      <ul>
          <li><%=name %></li>
          <li><%=age %></li>
          <li><%=skill %></li>
          <li><ul>favouriteFood
              <% for(var i = 0 ;i < favouriteFood.length;i++) \{\%> //此处两个转义符号使用时去掉
                  <li><%=favouriteFood[i] %></li>
              <% } %>
              </ul>
          </li>
      </ul>
</script>

读取模板,传入数据:

导入了模板引擎以后,我们可以使用template(模板id,数据);

    // 调用模板引擎的方法
    var backHtml = template("templ01",data);
    // 返回值就是填充好的内容

个人总结:

4.2 模板引擎