从 art-template 模版维护到动态加载的思考

最新推荐文章于 2022-02-28 14:48:44 发布

转载最新推荐文章于 2022-02-28 14:48:44 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/381139

文章标签：

#webpack #javascript #ViewUI

　　自己用 art-template 有些年头了，最近在培养团队学习 art-template 使用，发现有一个痛点比较难解决。

　　比如有一个模版，我们可以直接写在页面中，像这样：

 
          <
          script 
          id="appbtnTemp" type="text/html"> 
         
          <
          div 
          id="<%=id%>" class="appbtn" title="<%=title%>" appid="<%=appid%>" realappid="<%=realappid%>" type="<%=type%>"> 
         
          <
          img 
          src="<%=imgsrc%>" alt="<%=title%>" style="width:<%=appsize%>px;height:<%=appsize%>px;"> 
         
          <
          span 
          style="width:<%=appsize+10%>px;"><%=title%></
          span
          > 
         
          </
          div
          > 
         
          </
          script
          >

　　但如果这是个公用的模版，在很多页面需要用到，那就不能直接写在页面中了，不然就得复制很多份了，那就只能写到 js 文件里，做为一个公用函数。

 
          var 
          appbtn = template.compile( 
         
          '<div id="<%=id%>" class="appbtn" title="<%=title%>" appid="<%=appid%>" realappid="<%=realappid%>" type="<%=type%>">'
          + 
         
          '<img src="<%=imgsrc%>" alt="<%=title%>" style="width:<%=appsize%>px;height:<%=appsize%>px;">'
          + 
         
          '<span style="width:<%=appsize+10%>px;"><%=title%></span>'
          + 
         
          '</div>' 
         
          );

　　这样子虽然解决了公用的问题，但代码就变得难以维护了，毕竟是在 js 文件里写 html 代码，代码高亮提示没了，而且都是字符串拼接，如果模版有修改，将会是一个可怕的问题。

　　那有没有什么解决办法呢？我的第一个想法是把每个模版都写到独立的文件里，但在官网文档里看到浏览器版本不支持文件路径读取模版，那就自己改造下吧，让浏览器版本也支持文件加载读取模版。

　　这里我的大致思路是通过 jquery 的 $.ajax() 去获取模版，读取到模版然后用 template.compile() 把模版编译成函数并储存好，如果再次调用模版，则不用重新去获取模版。

 
          $(
          function
          (){ 
         
          var 
          cache = {}; 
         
          var 
          renderFile = 
          function
          (path, data){ 
         
          var 
          html; 
         
          if
          (cache.hasOwnProperty(path)){ 
         
          html = cache[path](data); 
         
          }
          else
          { 
         
          $.ajax({ 
         
          type: 
          'GET'
          , 
         
          url: path, 
         
          dataType: 
          'text'
          , 
         
          async: 
          false 
         
          }).done(
          function
          (cb){ 
         
          var 
          render = template.compile(cb); 
         
          html = render(data); 
         
          cache[path] = render; 
         
          }); 
         
          } 
         
          return 
          html; 
         
          } 
         
          renderFile(
          'test.art'
          , {title: 
          '测试1'
          }); 
         
          });

　　下面是 test.art 文件

 
          <
          div
          > 
         
          <
          h1
          ><%=title%></
          h1
          > 
         
          </
          div
          >