关于前端:简单实现ejs模板引擎

48次阅读

共计 6465 个字符，预计需要花费 17 分钟才能阅读完成。

1. 起因

部门最近的一次分享中，有人提出来要实现一个 ejs 模板引擎，忽然发现之前仿佛素来都没有思考过这个问题，始终都是间接拿过去用的。那就入手实现一下吧。本文次要介绍 ejs 的简略应用，并非全副实现，其中波及到 options 配置的局部间接省略了。如有不对请指出，最初欢送点赞 + 珍藏。

2. 根本语法实现

定义 render 函数，接管 html 字符串，和 data 参数。

const render = (ejs = '', data = {}) => {}

事例模板字符串如下:

<body>
    <div><%= name %></div>
    <div><%= age %></div>
</body>

能够应用正则将 <%= name %> 匹配进去，只保留 name。这里借助ES6 的模板字符串。将 name 用${}包裹起来。

props中第 2 个值就是匹配到的变量。间接 props[1] 替换。

[
  '<%= name %>',
  'name',
  16,
  '<body>\n    <div><%= name %></div>\n    <div><%= age %></div>\n</body>'
]
const render = (ejs = '', data = {}) => {const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {return '${' + props[1] + '}';
        // return data[props[1].trim()];
    });
}

3. Function 函数

这里失去的 html 是一个模板字符串。能够通过 Function 将字符串编程可执行的函数。当然这里也能够应用eval，随你。

<body>
    <div>${name}</div>
    <div>${age}</div>
</body>

Function是一个构造函数，实例化后返回一个真正的函数，构造函数的最初一个参数是函数体的字符串，后面的参数都为形式参数。比方这里传入形参 name，函数体通过 console.log 打印一句话。

const func = new Function('name', 'console.log(" 我是通过 Function 构建的函数，我叫："+ name)');
// 执行函数，传入参数
func('yindong'); // 我是通过 Function 构建的函数，我叫：yindong

利用 Function 的能力能够将 html 模板字符串执行返回。函数字符串编写return，返回一个拼装好的模板字符串、

const getHtml = (html, data) => {const func = new Function('data', `return \`${html}\`;`);
    return func(data);
    // return eval(`((data) => {return \`${html}\`; })(data)`)
}

const render = (ejs = '', data = {}) => {const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {return '${' + props[1] + '}';
    });
    return getHtml(html, data);
}

4 with

这里 render 函数中 props[1] 的实际上是变量名称，也就是 name 和age，能够替换成 data[props[1].trim()]，不过这样写会有一些问题，偷个懒利用with 代码块的个性。

with语句用于扩大一个语句的作用域链。换句人话来说就是在 with 语句中应用的变量都会先在 with 中寻找，找不到才会向上寻找。

比方这里定义一个 age 数字和 data 对象，data中蕴含一个 name 字符串。with包裹的代码块中输入的 name 会先在 data 中寻找，age在 data 中并不存在，则会向上寻找。当然这个个性也是一个 with 不举荐应用的起因，因为不确定 with 语句中呈现的变量是否是 data 中。

const age = 18;
const data = {name: 'yindong'}

with(data) {console.log(name);
    console.log(age);
}

这里应用 with 革新一下 getHtml 函数。函数体用 with 包裹起来，data就是传入的参数 data，这样with 体中的所有应用的变量都从 data 中查找了。

const getHtml = (html, data) => {const func = new Function('data', `with(data) {return \`${html}\`; }`);
    return func(data);
    // return eval(`((data) => {with(data) {return \`${html}\`; } })(data)`)
}

const render = (ejs = '', data = {}) => {// 优化一下代码，间接用 $1 代替 props[1];
    // const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {//     return '${' + props[1] + '}';
    // });
    const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
    return getHtml(html, data);
}

这样就能够打印出真是的 html 了。

<body>
    <div>yindong</div>
    <div>18</div>
</body>

5. ejs 语句

这里扩大一下 ejs，加上一个arr.join 语句。

<body>
    <div><%= name %></div>
    <div><%= age %></div>
    <div><%= arr.join('--') %></div>
</body>
const data = {
    name: "yindong",
    age: 18,
    arr: [1, 2, 3, 4]
}

const html = fs.readFileSync('./html.ejs', 'utf-8');

const getHtml = (html, data) => {const func = new Function('data', ` with(data) {return \`${html}\`; }`);
    return func(data);
}

const render = (ejs = '', data = {}) => {const html = html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
    return getHtml(html, data);
}

const result = render(html, data);

console.log(result);

能够发现 ejs 也是能够失常编译的。因为模板字符串反对 arr.join 语法，输入：

<body>
    <div>yindong</div>
    <div>18</div>
    <div>1--2--3--4</div>
</body>

如果 ejs 中蕴含 forEach 语句，就比较复杂了。此时 render 函数就无奈失常解析。

<body>
    <div><%= name %></div>
    <div><%= age %></div>
    <% arr.forEach((item) => {%>
        <div><%= item %></div>
    <%})%>
</body>

这里分两步来解决。仔细观察能够发现，应用变量值得形式存在 = 号，而语句是没有 = 号的。能够对 ejs 字符串进行第一步解决，将 <%= 变量替换成对应的变量，也就是本来的 render 函数代码不变。

const render = (ejs = '', data = {}) => {const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
    console.log(html);
}
<body>
    <div>${name}</div>
    <div>${age}</div>
    <% arr.forEach((item) => {%>
        <div>${item}</div>
    <%})%>
</body>

第二步比拟绕一点，能够将下面的字符串解决成多个字符串拼接。简略举例，将 a 加上 arr.forEach 的后果再加上 c 转换为，str存储 a，再拼接arr.forEach 每项后果，再拼接c。这样就能够取得正确的字符串了。

// 原始字符串
retrun `
    a
    <% arr.forEach((item) => {%>
        item
    <%})%>
    c
`
// 拼接后的
let str;
str = `a`;

arr.forEach((item) => {str += item;});

str += c;

return str;

在第一步的后果上应用 /<%(.*?)%>/g 正则匹配出 <%%> 两头的内容，也就是第二步。

const render = (ejs = '', data = {}) => {
    // 第一步
    let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
    // 第二步
    html = html.replace(/<%(.*?)%>/g, (...props) => {return '`\r\n' + props[1] + '\r\n str += `';
    });
    console.log(html);
}

替换后失去的字符串长成这个样子。

<body>
    <div>${name}</div>
    <div>${age}</div>
    `
 arr.forEach((item) => {
 str += `
        <div>${item}</div>
    `
})
 str += `
</body>

增加换行会更容易看一些。能够发现，第一局部是短少首部 \` 的字符串，第二局部是用 str 存储了 forEach 循环内容的残缺 js 局部，并且可执行。第三局部是短少尾部 \` 的字符串。

// 第一局部
<body>
    <div>${name}</div>
    <div>${age}</div>
    `

// 第二局部
 arr.forEach((item) => {
 str += `
        <div>${item}</div>
    `
})

// 第三局部
 str += `
</body>

解决一下将字符串补齐，在第一局部增加 let str = \`，这样就是一个残缺的字串了，第二局部不须要解决，会再第一局部根底上拼接上第二局部的执行后果，第三局部须要在结尾出拼接 \`; return str; 也就是补齐尾部的模板字符串，并且通过 return 返回 str 残缺字符串。

// 第一局部
let str = `<body>
    <div>${name}</div>
    <div>${age}</div>
    `

// 第二局部
 arr.forEach((item) => {
 str += `
        <div>${item}</div>
    `
})

// 第三局部
 str += `
</body>
`;

return str;

这部分逻辑能够在 getHtml 函数中增加，首先在 with 中定义 str 用于存储第一局部的字符串，尾部通过 return 返回 str 字符串。

const getHtml = (html, data) => {const func = new Function('data', ` with(data) {let str = \`${html}\`; return str; }`);
    return func(data);
}

这样就能够实现执行 ejs 语句了。

const data = {
    name: "yindong",
    age: 18,
    arr: [1, 2, 3, 4],
    html: '<div>html</div>',
    escape: '<div>escape</div>'
}

const html = fs.readFileSync('./html.ejs', 'utf-8');

const getHtml = (html, data) => {const func = new Function('data', ` with(data) {var str = \`${html}\`; return str; }`);
    return func(data);
}

const render = (ejs = '', data = {}) => {
    // 替换所有变量
    let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
    // 拼接字符串
    html = html.replace(/<%(.*?)%>/g, (...props) => {return '`\r\n' + props[1] + '\r\n str += `';
    });
    return getHtml(html, data);
}

const result = render(html, data);

console.log(result);

输入后果

<body>
    <div>yindong</div>
    <div>18</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

</body>

6. 标签本义

<%=会对传入的 html 进行本义，这里编写一个 escapeHTML 本义函数。

const escapeHTML = (str) => {if (typeof str === 'string') {return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g,"&#34;").replace(/'/g, "&#39;");
    } else {return str;}
}

变量替换的时候应用 escapeHTML 函数解决变量。这里通过 \s* 去掉空格。为了防止命名抵触，这里将 escapeHTML 革新成自执行函数，函数参数为 $1 变量名。

const render = (ejs = '', data = {}) => {
    // 替换转移变量
    // let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
    let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, `\${((str) => {if (typeof str === 'string') {return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g,"&#34;").replace(/'/g, "&#39;");
            } else {return str;}
        })($1)
    }`);
    // 拼接字符串
    html = html.replace(/<%(.*?)%>/g, (...props) => {return '`\r\n' + props[1] + '\r\n str += `';
    });
    return getHtml(html, data);
}

getHtml函数不变。

const getHtml = (html, data) => {const func = new Function('data', `with(data) {var str = \`${html}\`; return str; }`);
    return func(data);
}

<%-会保留本来格局输入，只须要再加一条不应用 escapeHTML 函数解决的就能够了。

const render = (ejs = '', data = {}) => {
    // 替换本义变量
    let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
    // 替换其余变量
    html = html.replace(/<%-(.*?)%>/gi, '${$1}');
    // 拼接字符串
    html = html.replace(/<%(.*?)%>/g, (...props) => {return '`\r\n' + props[1] + '\r\n str += `';
    });
    return getHtml(html, data, escapeHTML);
}

输入款式

<body>
    <div>yindong</div>
    <div>18</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

    <div>&lt;div&gt;escapeHTML&lt;/div&gt;</div>
</body>

至此一个简略的 ejs 模板解释器就写完了。

正文完
前端
发表至： 前端
2021-12-22
 0
关于前端:promise实现原理面试
关于前端:小程序解决方案为科技园区建设赋能
关于前端:深圳虾皮招前端开发-内推-薪资30
关于前端:antdesign开发记录汇总