欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html编程开发中模板编译实例

程序员文章站 2022-11-28 09:14:33
模板编译实例 下面,我们来看一个通过模板字符串,生成正式模板的实例。 let template = ` <% for(let i=0; i < dat...

模板编译实例

下面,我们来看一个通过模板字符串,生成正式模板的实例。

let template = `
  • <% for(let i=0; i < data.supplies.length; i++) { %>
  • <%= data.supplies[i] %>
  • <% } %>
`;

上面代码在模板字符串之中,放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码,使用<%= ... %>输出 JavaScript 表达式。

怎么编译这个模板字符串呢?

一种思路是将其转换为 JavaScript 表达式字符串。

echo('
  • '); for(let i=0; i < data.supplies.length; i++) { echo('
  • '); echo(data.supplies[i]); echo('
  • '); }; echo('
');

这个转换使用正则表达式就行了。

let evalExpr = /<%=(.+?)%>/g;
let expr = /<%([\s\S]+?)%>/g;

template = template
  .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
  .replace(expr, '`); \n $1 \n  echo(`');

template = 'echo(`' + template + '`);';

然后,将template封装在一个函数里面返回,就可以了。

let script =
`(function parse(data){
  let output = "";

  function echo(html){
    output += html;
  }

  ${ template }

  return output;
})`;

return script;

将上面的内容拼装成一个模板编译函数compile。

function compile(template){
  const evalExpr = /<%=(.+?)%>/g;
  const expr = /<%([\s\S]+?)%>/g;

  template = template
    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');

  template = 'echo(`' + template + '`);';

  let script =
  `(function parse(data){
    let output = "";

    function echo(html){
      output += html;
    }

    ${ template }

    return output;
  })`;

  return script;
}

compile函数的用法如下。

let parse = eval(compile(template));
p.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
//   
  • //
  • broom
  • //
  • mop
  • //
  • cleaner
  • //