Simple js template engine writing method

Front

There are many, many js template engines. I used to often use art-template, and sometimes vue was used as a template engine.

Until...

At the beginning of the year, I was still in the previous project team. At that time, the code specification wasYou cannot use [external code] without permission,Oops.

If there is a need, then write it, but later it is not used for some reasons. Later, we divided the production line and built a set of builds by myself. After using it for a few months, I felt very comfortable. I rewrote this small piece of code according to more popular standards and shared it with everyone.

https://github.com/shalldie/mini-tpl

Grammar

The first is to choose template syntax, ejs syntax is the first choice, because it is popular, there is no need to learn it Things like directive template engines.

If you have written jsp or asp/asp.net, you can get started directly.

How to use it?

I want to use it this way

If you want to use it this way, then let’s analyze how to achieve it.

new Function

1 const content = 'console.log("hello world");'; 2 3 let func = new Function(content); 4 5 func(); // hello world

new Function ([arg1[, arg2[, ...argN]],] functionBody)

functionBodyAstring containing aJavaScript statement that includes the function definition.

Functions generated using the Function constructor do not create closures in the context in which they are created; they are generally created in the global scope.
When these functions are run, they can only access their own local variables and global variables, and cannot access the scope of the context generated by the Function constructor being called. (MDN)

That is to say:

1. You can use new Function to dynamically create a function to execute a dynamically generated function definition js statement.

2. The function generated through new Function has a global scope.

3. There are three ways to pass parameters:Put the variable globally (nonsense),Function parameter passing,Use call/ apply passes the value to thisof the function.

At first I used call to pass the value, but now that I thought about it it was not very elegant, so I changed it to passing it by parameters. That's it:

const content = 'console.log(data);'; let func = new Function('data', content); func('hello world'); // hello world

So far, the prototype is here. Let’s break it down below.

Template split

Look at the template first:

<% for(var i=0; i 
我的名字是<%=item.name%>，我的年龄是<%=item.age%>
 <%}else{%> 
my name is <%=item.name%>,my age is a sercet.
 <%}%> <% } %>

js logical part, wrapped by<%%>,The placeholder for the js variableis wrapped by<%= %>, and the rest is the ordinaryhtml stringpart to be spliced.

In other words, there are three types of parts that need to be found using regular expressions:

1. <%%>The js content of the logical part

2. ##<%=%>The js content of the placeholder part

3. Others

   plain textContent

js partandsplicing part.

ofint type, there is afunction spliceattribute of type. Then the browser will think it is an array.

duck typing. If something looks like a duck and quacks like a duck, then it is a duck 0_o

通过这样，就可以拿到匹配到的 js 逻辑部分，并通过 index 和本次匹配到的内容，来获取每个js逻辑部分之间的文本内容项。

要注意，在全局匹配模式下，正则表达式会接着上次匹配的结果继续匹配新的字符串。

/** * 从原始模板中提取 文本/js 部分 * * @param {string} content * @returns {Array<{type:number,txt:string}>} */ function transform(content) { var arr = []; //返回的数组，用于保存匹配结果 var reg = /<%(?!=)([\s\S]*?)%>/g; //用于匹配js代码的正则 var match; //当前匹配到的match var nowIndex = 0; //当前匹配到的索引 while (match = reg.exec(content)) { // 保存当前匹配项之前的普通文本/占位 appendTxt(arr, content.substring(nowIndex, match.index)); //保存当前匹配项 arr.push({ type: 1, //js代码 txt: match[1] //匹配到的内容 }); //更新当前匹配索引 nowIndex = match.index + match[0].length; } //保存文本尾部 appendTxt(arr, content.substr(nowIndex)); return arr; } /** * 普通文本添加到数组，对换行部分进行转义 * * @param {Array<{type:number,txt:string}>} list * @param {string} content */ function appendTxt(list, content) { content = content.replace(/\r?\n/g, "\\n"); list.push({ txt: content }); }

得到了js逻辑项 和 文本内容 ，就可以把他们拼在一起，来动态生成一个function。要注意的是，文本内容中，包含 js占位项，这个地方要转换一下。

/** * 模板 + 数据 =》 渲染后的字符串 * * @param {string} content 模板 * @param {any} data 数据 * @returns 渲染后的字符串 */ function render(content, data) { data = data || {}; var list = ['var tpl = "";']; var codeArr = transform(content); // 代码分割项数组 for (var i = 0, len = codeArr.length; i < len; i++) { var item = codeArr[i]; // 当前分割项 // 如果是文本类型，或者js占位项 if (!item.type) { var txt = 'tpl+="' + item.txt.replace(/<%=(.*?)%>/g, function (g0, g1) { return '"+' + g1 + '+"'; }) + '"'; list.push(txt); } else { // 如果是js代码 list.push(item.txt); } } list.push('return tpl;'); return new Function('data', list.join('\n'))(data); }

这样就完成了简易的模板引擎，不要觉得拼字符串慢。

在现代浏览器(IE8开始)中，特地对字符串的操作做了大量的优化，用 += 拼字符串，要比用数组 push 再 join 的方式快很多很多，即使放到IE7(IE6不清楚)中，我这里测试也是拼字符串快。。。

The above is the detailed content of Simple js template engine writing method. For more information, please follow other related articles on the PHP Chinese website!