JavaScript模板引擎实现原理和封装

我会带着你远行 2022-05-31 02:38 168阅读 0赞

这里以art-template为例

先看例子

<script type="text/javascript" src="arttemplate.js"></script>
    
    <div id="content"></div>
    
    <script id="contentTemplate" type="text/html">
        <h1>{
       {title}}</h1>
        <ul>
            {
       {each list}}
                <li>你好，{
       {name}} 我来自{
       {form}}</li>
            {
       {/each}}
        </ul>
    </script>
    
    <script type="text/javascript">
        var data = {// 准备模板中涉及的数据
            name:"姜文", form:"西安"
        };
        var html = template('contentTemplate', data);// 调用template()方法将模板与数据结合进行渲染
        document.getElementById('content').innerHTML = html;// 将渲染结果写入div
    </script>

实现思路：

定义好模板，用id拿到模板内容的字符串，用正则去匹配双花括号，找到之后使用定义好的对象属性进行替换

1.定义模板

2.用id取到模板内容  
var str = document.querySelector("\#contentTemplate").innerHTML;

3.定义替换对象和正则表达式

// 要替换的对象

var data = \{

name:"姜文",

from:"西安"

//正则表达式(不会正则也没关系，这块匹配的是\{ \{name\}\}这种格式的字符串)

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

4.查找并替换内容