npm包toki-templater使用教程

前端开发中，我们常常需要根据不同的数据动态生成HTML代码，这就需要用到模板引擎。Tokio-templater 是一个轻量级的JS模板引擎，可以通过npm包安装，本文将介绍如何在项目中使用它。

安装

npm install toki-templater --save

获取数据

前往 mockapi.io/register 注册并新建一个API，将返回的URL作为请求URL。

利用Fetch API获取需要的信息，这里我用Jsonplaceholder的API作为例子:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data));

编写模板

toki-templater使用 ## 作为标识符，例如：

let template = `
    <ul>
        ## for(user of users) {
            <li>姓名: ##= user.name ## ，邮箱: ##= user.email ##</li>
        ## }
    </ul>
`;

上面的模板用于渲染用户信息列表，其中 ## for(user of users) ## 和 ## } ## 用于遍历数据。 ##= user.name ## 和 ##= user.email ## 用于输出Key值。

渲染模板

-- -------------------- ---- -------
------ ---- ---- -----------------

---------------------------------------------------
  -------------- -- ----------------
  ----------- -- -
    --- ---- - -------------- ------- --------
    ----------------------- - -----
    ------------------
  ---

Tokio-templater的语法非常简洁明了，而且可以很容易的利用for循环来遍历对象数组。它所支持的语法比起其他模板引擎还有更多的扩展语法，例如javascript的表单也可以在模板中使用。

最后的效果如图所示：

总之，toki-templater是一个非常不错的模板引擎，它的打包后大小也非常小，非常适合在前端开发项目中使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571e81e8991b448d40fd