简单封装template.js_h5 template 独立文件-优快云博客

1.先来一个例子:

  
 

   <
   script
   type=
   "text/html"
   id=
   "template"
   >
  

   <
   ul
   >
  

   <
   li
   >{{name}}
   </
   li
   >
  

   <
   li
   >{{skill}}
   </
   li
   >
  

   </
   ul
   >
  

   </
   script
   >
  

   <
   script
   >
  

   var 
   data = {
  

   name: 
   'jack',
  

   skill: 
   'jump'
  

   }
  

   var 
   templateDom =
   document.
   getElementById(
   'template');
  

   var 
   string =
   templateDom.
   innerHTML;
  

   var 
   reg =
    /{{(\w+
   )}}/;
  

   var 
   result =
   reg.
   exec(
   string);
  

   while (
   result) {
  

   string = 
   string.
   replace(
   result[
   0],
   data[
   result[
   1]]);
  

   result = 
   reg.
   exec(
   string);
  

   }
  

   document.
   body.
   innerHTML =
   string;
  

  <
  /
  script
  >
 

结果:

jack
jump

2.进行函数封装:

  function 
  template(
  id,
  data) {
 

  var 
  templateDom =
  document.
  getElementById(
  id);
 

  var 
  string =
  templateDom.
  innerHTML;
 

  var 
  reg =
   /{{(\w+
  )}}/;
 

  var 
  result =
  reg.
  exec(
  string);
 

  while (
  result) {
 

  string = 
  string.
  replace(
  result[
  0],
  data[
  result[
  1]]);
 

  result = 
  reg.
  exec(
  string);
 

  }
 

  return 
  string;
 

  }
 

进行调用一下:

  document.
  body.
  innerHTML =
  template(
  'template', {
 
  name: 
  'rose',
 
  skill: 
  'beautiful'
 
  });

结果:

rose
beautiful

3.注意事项:

 
 <
 script
 type=
 "text/html"
 id=
 "template"
 >

 
 <
 ul
 >

 
 <
 li
 >{{name}}
 </
 li
 >

 
 <
 li
 >{{skill}}
 </
 li
 >

 
 </
 ul
 >

 
 </
 script
 >

a.上面{{}}里面的内容要根据data的key来设置;

b.type只要不为text/javascript,html可以换成其他的名字,如test,但设置为html,编辑器可实现代码自动提示以及高亮的效果;

c.必须给定一个id(id具有唯一性),调用函数时通过id获取对应作用元素.

 
 var 
  reg =
  /{{(\w+
 )}}/;

 
 var 
  result = 
 reg.
 exec(
 string);

 
 console.
 log(
 result);

d.打印出来的result注意理解(正则表达式exec方法);

4.大神做的template可见:https://aui.github.io/art-template/docs/