模版插件

模版引擎简介

我们在使用ajax请求数据时,返回的如果是一个JSON格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果.那么这个包装得过程有没有简单的方法呢?

  • 假设有如下数据(javascript中)
    var obj = {
     name:"fox",
     age:18,
     skill:"卖萌"
    };
    
  • 希望包装为:
    <ul>
      <li>姓名:fox</li>
      <li>年龄:18</li>
      <li>爱好:卖萌</li>
    </ul>
    
  • 定义模板,替换: 其间需要我们使用对象替换的位置为<%= 属性名 %>部分,如果可以读取模板->传入对象->完成替换->返回html代码 实现这样的步骤,那么就能够完成我们的模板操作了
    <ul>
      <li>姓名:<%= name %></li>
      <li>年龄:<%= age %></li>
      <li>爱好:<%= skill %></li>
    </ul>
    

模版插件原理

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

定义正则表达式:

想要匹配<%= 属性名 %> 我们可以定义正则如下(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);
  • 演示结果为:

常见的模板插件

BaiduTemplate(百度开发) ArtTemplate(腾讯开发) velocity.js(淘宝开发) Handlebars

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);
    // 返回值就是填充好的内容
  • 使用演示:

发表评论

邮箱地址不会被公开。 必填项已用*标注