js模板引擎artTemplate内部实现原理

原生js模板引擎内部实现原理

模板引擎的实质其实是利用正则表达式,替换模板当中事先定义好的标签

必备元素:字符串 正则 数据

1.不引入模板引擎,简单实现

	<% 与  %> 符号包裹起来的语句则为模板的逻辑表达式
   	<%= %>为输出表达式

<div id="content"></div>
<!-- 1.创建模板 -->
<script type="text/html" id="tpl">
 
   <h4>my name is <%= name %></h4>
   <h5>i am <%= age %> years old</h5>
</script>

<script>

   //2.将函数进行简单封装
   function template(id,data){

      var tpl = document.getElementById(id);

      //字符串
      tpl = tpl.innerHTML;

      //通过正则表达式查换特殊标记的内容,这里正则表达式不做介绍,网上有很多,可以查
      var reg = /<%=\s*([^%>]+\S)\s*%>/;
      var match;

      //匹配不到则为null,循环则停止
      while(match = reg.exec(tpl)){//exec匹配字符串中的正则表达式
         //替换
         tpl = tpl.replace(match[0],data[match[1]]);
      }
      return tpl;//返回渲染值
   }
   // 3.渲染模板
   var data = {
      name:'cici',
      age:10
   }
   //4.调用模板引擎
   var html = template('tpl',data);
   //5.输出内容
   document.getElementById('content').innerHTML = html;</script>

2.引入模板引擎,简单实现

div id="content"></div>
<!-- 1.引入模板 原生语法版-->
<script src="js/template-native.js"></script>
<!-- 2.制作模板 -->
<script type="text/html" id = "tpl">
   <h3>my name is <%=name%></h3>
   <h4>i am <%=age%> years old</h4>
   <h5>sex <%=sex%></h5>
</script>

template(id, data)方法根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。

<script>
   //3.渲染模板
   var data = {
      name: 'Heeno',
      age: 23,
      sex:'女'
   }
   //4.引用模板
   var html = template('tpl',data);
   //5.输出内容
   document.getElementById('content').innerHTML = html;
</script>

3.应用场景：
1、如果你有动态ajax请求数据并需要封装成视图展现给用户，想要提高自己的工作效率。
2、如果你是拼串族或者数组push族，迫切的希望改变现有的书写方式。
3、如果你在页面布局中，存在共性模块和布局，你可以提取出公共模板，减少维护的数量。