编写一个简单的JavaScript模板引擎

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量120 收藏
点赞数
文章标签： javascript 前端 面试 ViewUI
原文链接：https://yq.aliyun.com/articles/613886
版权

本文首发于我的知乎专栏，转发于掘金。若需要用于商业用途，请经本人同意。

尊重每一位认真写文章的前端大佬，文末给出了本人思路的参考文章。

前言

能够访问到这篇文章的同学，初衷是想知道如何编写JavaScript的模板引擎。为了照顾一些没有使用过模板引擎的同学，先来稍微介绍一下什么叫模板引擎。

如果没有使用过模板引擎，但是又尝试过在页面渲染一个列表的时候，那么一般的做法是通过拼接字符串实现的，如下：



const arr = [{
	"name": "google",
	"url": "https://www.google.com"
}, {
	"name": "baidu",
	"url": "https://www.baidu.com/"
}, {
	"name": "凯斯",
	"url": "https://www.zhihu.com/people/Uncle-Keith/activities"
}]

let html = ''
html += '<ul>'
for (var i = 0; i < arr.length; i++) {
	html += `<li><a href="${arr[i].url}">${arr[i].name}</a></li>`
}
html += '</ul>'

上面代码中，我使用了ES6的反引号(``)语法动态生成了一个ul列表，看上去貌似不会复杂（如果使用字符串拼接，会繁琐很多），但是这里有一点糟糕的是：数据和结构强耦合。这导致的问题是如果数据或者结构发生变化时，都需要改变上面的代码，这在当下前端开发中是不能忍受的，我们需要的是数据和结构松耦合。

如果要实现松耦合，那么就应该结构归结构，数据从服务器获取并整理好之后，再通过模板渲染数据，这样我们就可以将精力放在JavaScript上了。而使用模板引擎的话是这样实现的。如下：

HTML列表


<ul>
<% for (var i = 0; i < obj.users.length; i++) { %>
	<li>
		<a href="<%= obj.users[i].url %>">
			<%= obj.users[i].name %>
		</a>
	</li>
<% } %>
</ul>
JS数据 

const arr = [{
	"name": "google",
	"url": "https://www.google.com"
}, {
	"name": "baidu",
	"url": "https://www.baidu.com/"
}, {
	"name": "凯斯",
	"url": "https://www.zhihu.com/people/Uncle-Keith/activities"
}]
const html = tmpl('list', arr)
console.log(html)

打印出的结果为 
" <ul>
    <li><a href="https://www.google.com">google</a>
    </li>
    <li><a href="https://www.baidu.com/">baidu</a>
    </li>
    <li><a href="https://www.zhihu.com/people/Uncle-Keith/activities">凯斯</a>
    </li>
</ul> "

从以上的代码可以看出，将结构和数据传入tmpl函数中，就能实现拼接。而tmpl正是我们所说的模板引擎（函数）。接下来我们就来实现一下这个函数。

模板引擎的实现

通过函数将数据塞到模板里面，函数内部的具体实现还是通过拼接字符串来实现。而通过模板的方式，可以降低拼接字符串出错而造成时间成本的增加。

而模板引擎函数实现的本质，就是将模板中HTML结构与JavaScript语句、变量分离，通过Function构造函数 + apply(call)动态生成具有数据性的HTML代码。而如果要考虑性能的话，可以将模板进行缓存处理。

请记住上面所说的本质，甚至背诵下来。

实现一个模板引擎函数，大致有以下步骤：

  1. 模板获取
  2. 模板中HTML结构与JavaScript语句、变量分离
  3. Function + apply(call)动态生成JavaScript代码
  4. 模板缓存

OK，接下来看看如何实现吧: )

  1. 模板获取

一般情况下，我们会把模板写在script标签中，赋予id属性，标识模板的唯一性；赋予type='text/html'属性，标识其MIME类型为HTML，如下


<script type="text/html" id="template">
	<ul>
		<% if (obj.show) { %>
			<% for (var i = 0; i < obj.users.length; i++) { %>
				<li>
					<a href="<%= obj.users[i].url %>">
						<%= obj.users[i].name %>
					</a>
				</li>
			<% } %>
		<% } else { %>
			<p>不展示列表</p>
		<% } %>
	</ul>
</script>

在模板引擎中，选用<% xxx %>标识JavaScript语句，主要用于流程控制，无输出；<%= xxx %>标识JavaScript变量，用于将数据输出到模板；其余部分都为HTML代码。（与EJS类似）。当然，你也可以用<@ xxx @>, <=@ @>、<* xxx *>, <*= xxx *>等。

传入模板引擎函数中的第一个参数，可以是一个id，也可以是模板字符串。此时，需要通过正则去判断是模板字符串还是id。如下


let tpl = ''
const tmpl = (str, data) => {
    // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
    if (!/[\s\W]/g.test(str)) {
        tpl = document.getElementById(str).innerHTML
    } else {
        tpl = str
    }
}

2. HTML结构与JavaScript语句、变量分离

这一步骤是引擎中最最最重要的步骤，如果实现了，那就是实现了一大步了。所以我们使用两种方法来实现。假如获取到的模板字符串如下：


" <ul>
	<% if (obj.show) { %>
		<% for (var i = 0; i < obj.users.length; i++) { %>
			<li>
				<a href="<%= obj.users[i].url %>">
					<%= obj.users[i].name %>
				</a>
			</li>
		<% } %>
	<% } else { %>
		<p>不展示列表</p>
	<% } %>
</ul> "

先来看看第一种方法吧，主要是通过replace函数替换实现的。说明一下主要流程：

  1. 创建数组arr，再拼接字符串arr.push('
  2. 遇到换行回车，替换为空字符串
  3. 遇到<%时，替换为');
  4. 遇到>%时，替换为arr.push('
  5. 遇到<%= xxx %>，结合第3、4步，替换为'); arr.push(xxx); arr.push('
  6. 最后拼接字符串'); return p.join('');

在代码中，需要将第5步写在2、3步骤前面，因为有更高的优先级，否则会匹配出错。如下



let tpl = ''
const tmpl = (str, data) => {
  // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
  if (!/[\s\W]/g.test(str)) {
      tpl = document.getElementById(str).innerHTML
  } else {
      tpl = str
  }
  let result = `let p = []; p.push('`
  result += `${
	tpl.replace(/[\r\n\t]/g, '')
	   .replace(/<%=\s*([^%>]+?)\s*%>/g, "'); p.push($1); p.push('")
	   .replace(/<%/g, "');")
	   .replace(/%>/g, "p.push('")
  }`
  result += "'); return p.join('');"      
}

细细品味上面的每一个步骤，就能够将HTML结构和JavaScript语句、变量拼接起来了。拼接之后的代码如下（格式化代码了，否则没有换行的） 

" let p = [];
p.push('<ul>');
if (obj.show) {
    p.push('');
    for (var i = 0; i < obj.users.length; i++) {
        p.push('<li><a href="');
        p.push(obj.users[i].url);
        p.push('">');
        p.push(obj.users[i].name);
        p.push('</a></li>');
    }
    p.push('');
} else {
    p.push('<p>不展示列表</p>');
}
p.push('</ul>');
return p.join(''); "

这里要注意的是，我们不能将JavaScript语句push到数组里面，而是单独存在。因为如果以JS语句的形式push进去，会报错；如果以字符串的形式push进去，那么就不会有作用了，比如for循环、if判断都会无效。当然JavaScript变量push到数组内的时候，要注意也不能以字符串的形式，否则会无效。如 


p.push('for(var i =0; i < obj.users.length; i++){')  // 无效
p.push('obj.users[i].name') // 无效
p.push(for(var i =0; i < obj.users.length; i++){)  // 报错

从模板引擎函数可以看出，我们是通过单引号来拼接HTML结构的，这里如果稍微思考一下，如果模板中出现了单引号，那会影响整个函数的执行的。还有一点，如果出现了 \ 反引号，会将单引号转义了。所以需要对单引号和反引号做一下优化处理。

  1. 模板中遇到 \ 反引号，需要转义
  2. 遇到 ' 单引号，需要将其转义

转换为代码，即为


str.replace(/\\/g, '\\\\')
    .replace(/'/g, "\\'")

结合上面的部分，即 

let tpl = ''
const tmpl = (str, data) => {
  // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
  if (!/[\s\W]/g.test(str)) {
      tpl = document.getElementById(str).innerHTML
  } else {
      tpl = str
  }
  let result = `let p = []; p.push('`
  result += `${
	tpl.replace(/[\r\n\t]/g, '')
           .replace(/\\/g, '\\\\')
           .replace(/'/g, "\\'")
	   .replace(/<%=\s*([^%>]+?)\s*%>/g, "'); p.push($1); p.push('")
	   .replace(/<%/g, "');")
	   .replace(/%>/g, "p.push('")
  }`
  result += "'); return p.join('');"      
}

这里的模板引擎函数用了ES6的语法和正则表达式，如果对正则表达式懵逼的同学，可以先去学习正则先，懂了之后再回头看这篇文章，会恍然大悟的。


OK，来看看第二种方法实现模板引擎函数。跟第一种方法不同的是，不只是使用replace函数进行简单的替换。简单说一下思路：

  1. 需要一个正则表达式/<%=?\s*([^%>]+?)\s*%>/g， 可以匹配<% xxx %>, <%= xxx %>
  2. 需要一个辅助变量cursor，记录HTML结构匹配的开始位置
  3. 需要使用exec函数，匹配过程中内部的index值会根据每一次匹配成功后动态的改变
  4. 其余一些逻辑与第一种方法类似

OK，我们来看看具体的代码


let tpl = ''
let match = ''  // 记录exec函数匹配到的值
// 匹配模板id
const idReg = /[\s\W]/g
// 匹配JavaScript语句或变量
const tplReg = /<%=?\s*([^%>]+?)\s*%>/g

const add = (str, result) => {
	str = str.replace(/[\r\n\t]/g, '')
		.replace(/\\/g, '\\\\')
		.replace(/'/g, "\\'")
	result += `result.push('${string}');`
	return result
}

const tmpl = (str, data) => {
	// 记录HTML结构匹配的开始位置
	let cursor = 0
	let result = 'let result = [];'
	// 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
	if (!idReg.test(str)) {
		tpl = document.getElementById(str).innerHTML
	} else {
		tpl = str
	}
        // 使用exec函数，每次匹配成功会动态改变index的值
	while (match = tplReg.exec(tpl)) {
		result = add(tpl.slice(cursor, match.index), result) // 匹配HTML结构
		result = add(match[1], result)		             // 匹配JavaScript语句、变量
		cursor = match.index + match[0].length	             // 改变HTML结果匹配的开始位置
	}
	result = add(tpl.slice(cursor), result)								 // 匹配剩余的HTML结构
	result += 'return result.join("")'
}
console.log(tmpl('template'))
上面使用了辅助函数add，每次传入str的时候，都需要对传入的模板字符串做优化处理，防止模板字符串中出现非法字符（换行，回车，单引号'，反引号\ 等）。执行后代码格式化后如下（实际上没有换行，因为替换成空字符串了，为了好看..）。 


" let result =[];
result.push('<ul>');
result.push('if (obj.show) {');
result.push('');
result.push('for (var i = 0; i < obj.users.length; i++) {');
result.push('<li><a href="');
result.push('obj.users[i].url');
result.push('">');
result.push('obj.users[i].name');
result.push('</a></li>');
result.push('}');
result.push('');
result.push('} else {');
result.push('<p>什么鬼什么鬼</p>');
result.push('}');
result.push('</ul>');
return result.join("") "

从以上代码中，可以看出HTML结构作为字符串push到result数组了。但是JavaScript语句也push进去了，变量作为字符串push进去了.. 原因跟第一种方法一样，要把语句单独拎出来，变量以自身push进数组。改造一下代码 

let tpl = ''
let match = ''  // 记录exec函数匹配到的值
// 匹配模板id
const idReg = /[\s\W]/g
// 匹配JavaScript语句或变量
const tplReg = /<%=?\s*([^%>]+?)\s*%>/g
const keyReg = /(for|if|else|switch|case|break|{|})/g   // **** 增加正则匹配语句

const add = (str, result, js) => {
	str = str.replace(/[\r\n\t]/g, '')
		.replace(/\\/g, '\\\\')
		.replace(/'/g, "\\'")
        // **** 增加三元表达式的判断，三种情况：JavaScript语句、JavaScript变量、HTML结构。
	result += js ? str.match(keyReg) ? `${str}` : `result.push(${str});` : `result.push('${str}');`
	return result
}

const tmpl = (str, data) => {
	// 记录HTML结构匹配的开始位置
	let cursor = 0
	let result = 'let result = [];'
	// 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
	if (!idReg.test(str)) {
		tpl = document.getElementById(str).innerHTML
	} else {
		tpl = str
	}
        // 使用exec函数，每次匹配成功会动态改变index的值
	while (match = tplReg.exec(tpl)) {
		result = add(tpl.slice(cursor, match.index), result) // 匹配HTML结构
		result = add(match[1], result, true)		     // **** 匹配JavaScript语句、变量
		cursor = match.index + match[0].length	             // 改变HTML结果匹配的开始位置
	}
	result = add(tpl.slice(cursor), result)		             // 匹配剩余的HTML结构
	result += 'return result.join("")'
}
console.log(tmpl('template'))

执行后的代码格式化后如下 


" let result = [];
result.push('<ul>');
if (obj.show) {
    result.push('');
    for (var i = 0; i < obj.users.length; i++) {
        result.push('<li><a href="');
        result.push(obj.users[i].url);
        result.push('">');
        result.push(obj.users[i].name);
        result.push('</a></li>');
    }
    result.push('');
} else {
    result.push('<p>什么鬼什么鬼</p>');
}
result.push('</ul>');
return result.join("") "

至此，已经达到了我们的要求。

两种模板引擎函数的实现已经介绍完了，这里稍微总结一下

  1. 两种方法都使用了数组，拼接完成后再join一下
  2. 第一种方法纯属使用replace函数，匹配成功后进行替换
  3. 第二种方法使用exec函数，利用其动态改变的index值捕获到HTML结构、JavaScript语句和变量

当然，两种方法都可以使用字符串拼接，但是我在Chrome浏览器中对比了一下，数组还是快很多的呀，所以这也算是一个优化方案吧：用数组拼接比字符串拼接要快50%左右！以下是字符串和数组拼接的验证



console.log('开始计算字符串拼接')
const start2 = Date.now()
let str = ''
for (var i = 0; i < 9999999; i++) {
  str += '1'
}
const end2 = Date.now()
console.log(`字符串拼接运行时间: ${end2 - start2}`ms)

console.log('----------------')

console.log('开始计算数组拼接')
const start1 = Date.now()
const arr = []
for (var i = 0; i < 9999999; i++) {
  arr.push('1')
}
arr.join('')
const end1 = Date.now()
console.log(`数组拼接运行时间: ${end1 - start1}`ms)

结果如下： 


开始计算字符串拼接
字符串拼接运行时间: 2548ms
----------------
开始计算数组拼接
数组拼接运行时间: 1359ms

3. Function + apply(call)动态生成HTML代码

上面两种方法中，result是字符串，怎么将其变成可执行的JavaScript代码呢？这里使用了Function构造函数来创建一个函数（当然也可以使用eval函数，但是不推荐）

大多数情况下，创建一个函数会直接使用函数声明或函数表达式的方式



function test () {}
const test = function test () {}

以这种方式生成的函数会成为Function构造函数的实例对象 


test instanceof Function   // true

当然也可以直接使用Function构造函数直接创建一个函数，这样做的性能会稍微差了一些（双重解析，JavaScript解析JavaScript代码，代码包含在字符串中，也就是说在 JavaScript 代码运行的同时必须新启动一个解析器来解析新的代码。实例化一个新的解析器有不容忽视的开销，所以这种代码要比直接解析慢得多。） 


const test = new Function('arg1', 'arg2', ... , 'console.log(arg1 + arg2)')
test(1 + 2) // 3

鱼和熊掌不可得兼，渲染便利的同时带来了部分的性能损失

Function构造函数可以传入多个参数，最后一个参数代表执行的语句。因此我们可以这样


const fn = new Funcion(result)

如果需要传入参数，可以使用call或者apply改变函数执行时所在的作用域即可。 


fn.apply(data)

4. 模板缓存

使用模板的原因不仅在于避免手动拼接字符串而带来不必要的错误，而且在某些场景下可以复用模板代码。为了避免同一个模板多次重复拼接字符串，可以将模板缓存起来。我们这里缓存当传入的是id时可以缓存下来。实现的逻辑不复杂，在接下来的代码可以看到。

好了， 结合上面讲到的所有内容，给出两种方式实现的模板引擎的最终代码

第一种方法：



let tpl = ''
// 匹配模板的id
let idReg = /[\s\W]/g
const cache = {}

const add = tpl => {
	// 匹配成功的值做替换操作
	return tpl.replace(/[\r\n\t]/g, '')
		.replace(/\\/g, '\\\\')
		.replace(/'/g, "\\'")
		.replace(/<%=\s*([^%>]+?)\s*%>/g, "'); p.push($1); p.push('")
		.replace(/<%/g, "');")
		.replace(/%>/g, "p.push('")
}

const tmpl = (str, data) => {
	let result = `let p = []; p.push('`
        // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
	if (!idReg.test(str)) {
		tpl = document.getElementById('template').innerHTML
		if (cache[str]) {
			return cache[str].apply(data)
		}
	} else {
		tpl = str
	}
	result += add(tpl)
	result += "'); return p.join('');"
	let fn = new Function(result)		// 转成可执行的JS代码
	if (!cache[str] && !idReg.test(str)) {	// 只用传入的是id的情况下才缓存模板
		cache[str] = fn
	}
	return fn.apply(data)										// apply改变函数执行的作用域
}

第二种方法： 


let tpl = ''
let match = ''
const cache = {}
// 匹配模板id
const idReg = /[\s\W]/g
// 匹配JavaScript语句或变量
const tplReg = /<%=?\s*([^%>]+?)\s*%>/g
// 匹配各种关键字
const keyReg = /(for|if|else|switch|case|break|{|})/g

const add = (str, result, js) => {
	str = str.replace(/[\r\n\t]/g, '')
		.replace(/\\/g, '\\\\')
		.replace(/'/g, "\\'")
	result += js ? str.match(keyReg) ? `${str}` : `result.push(${str});` : `result.push('${str}');`
	return result
}

const tmpl = (str, data) => {
	let cursor = 0
	let result = 'let result = [];'
        // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取
	if (!idReg.test(str)) {
		tpl = document.getElementById(str).innerHTML
		// 缓存处理
		if (cache[str]) {
			return cache[str].apply(data)
		}
	} else {
		tpl = str
	}
	// 使用exec函数，动态改变index的值
	while (match = tplReg.exec(tpl)) {
		result = add(tpl.slice(cursor, match.index), result) // 匹配HTML结构
		result = add(match[1], result, true)		     // 匹配JavaScript语句、变量
		cursor = match.index + match[0].length		     // 改变HTML结果匹配的开始位置
	}
	result = add(tpl.slice(cursor), result)		             // 匹配剩余的HTML结构
	result += 'return result.join("")'
	let fn = new Function(result)		                     // 转成可执行的JS代码
	if (!cache[str] && !idReg.test(str)) {                       // 只有传入的是id的情况下才缓存模板
		cache[str] = fn
	}
	return fn.apply(data)		                              // apply改变函数执行的作用域
}

最后

呼，基本上说完了，最后还是想稍微总结一下

假如！假如面试的时候面试官问你，请大致描述一下JavaScript模板引擎的原理，那么以下的总结可能会给予你一些帮助。

噢.. 模板引擎实现的原理大致是将模板中的HTML结构和JavaScript语句、变量分离，将HTML结构以字符串的形式push到数组中，将JavaScript语句独立抽取出来，将JavaScript变量以其自身push到数组中，通过replace函数的替换或者exec函数的遍历，构建出带有数据的HTML代码，最后通过Function构造函数 + apply(call)函数生成可执行的JavaScript代码。

如果回答出来了，面试官心里顿时发现千里马：欸，好像很叼也？接着试探一下：

  1. 为什么要用数组？可以用字符串吗？两者有什么区别？
  2. 简单的一下replace和exec函数的使用？
  3. exec 和match函数有什么不同？
  4. /<%=?\s*([^%>]+?)\s*%>/g 这段正则是什么意思？
  5. 简单说明apply、call、bind函数的区别？
  6. Function构造函数的使用，有什么弊端？
  7. 函数声明和函数表达式的区别？
  8. ....


这一段总结还可以扯出好多知识点... 翻滚吧，千里马！


OK，至此，关于实现一个简单的JavaScript模板引擎就介绍到这里了，如果读者耐心、细心的看完了这篇文章，我相信你的收获会是满满的。如果看完了仍然觉得懵逼，如果不介意的话，可以再多品味几次。


参考文章：

  1. 书籍推荐：《JavaScript高级程序设计 第三版》
  2. 最简单的JavaScript模板引擎 - 谦行 - 博客园
  3. 只有20行Javascript代码！手把手教你写一个页面模板引擎


原文发布时间为：2018年07月03日
原文作者：凯斯

本文来源： 掘金 如需转载请联系原作者




weixin_34361881
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Javascript模板引擎mustache.js
10-22
主要为大家介绍了Javascript模板引擎mustache.js，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用,需要的朋友可以参考下
写一个简单的模板引擎
weixin_30753873的博客
06-02 345
写一个简单的模板引擎 ES6 开始支持模板字符串(Template literals)，支持如下的写法： `string text ${expression} string text`; 其实在很多模板引擎中，常常会有这样需求，比如常用的 doT，使用类似的语法 <div>{{=1+2}}</div> // 或者支持循环或者判断 {{for(var i in it...
教你使用javascript简单写一个页面模板引擎
12-09
于是我又想着能不能写一些简单的代码来完善这个模板引擎，又能与其它现有的逻辑协同工作。AbsurdJS本身主要是以NodeJS的模块的形式发布的，不过它也会发布客户端版本。考虑到这些，我就不能直接使用现有的引擎了，因为它们大部分都是在NodeJS上运行的，而不能跑在浏览器上。我需要的是一个小巧的，纯粹以Javascript编写的东西，能够直接运行在浏览器上。当我某天偶然发现John Resig的这篇博客，我惊喜地发现，这不正是我苦苦寻找的东西嘛！我稍稍做了一些修改，代码行数差不多20行左右。其中的逻辑非常有意思。在这篇文章中我会一步一步重现编写这个引擎的过程，如果你能一路看下去的话，你就会明白J
razor生成html,MVC Razor模板引擎输出HTML或者生产HTML文件
weixin_29349579的博客
06-08 459
以前做CMS的时候都会根据模板来生成输出HTML或者生成HTML文件。 常用的引擎有VTemplate、NVelocity等等，这个我就布做介绍了。 这里我想说的是。当mvc出现Razor模板引擎的时候。我就在想怎么利用这个MVC自带的模板生产HTML文件。 想利用Razor模板引擎来生成以前做CMS的时候都会根据模板来生成输出HTML或者生成HTML文件。常用的引擎有VTemplate、NVel...
javascript编写模板
任何技能都是从模仿开始，逐步升华。
02-13 975
项目中页面js编写模板。 //闭包 (function() { var Template = function() { //初始化 this.init(); }; Template.prototype = { config : { //保存一些静态常量 如 : url ... }, cache : { //保存全局的变量 如 ：grid ... },
js实现简易版模板引擎
王兆镇的博客
08-26 409
js实现简易版模板引擎
实现简易的模板引擎
qq_56588657的博客
05-10 126
实现步骤： 定义 模板结构 预调用 模板引擎 封装 template 函数 导入并使用自定义的模板引擎 <!-- 定义模板结构 --> <script id="tpl-user" type="text/html"> <div>姓名： {{name}}</div> <div>年龄： {{age}}</div> <div>性别： {{gender}}</div> <div&g
实现一个简单的模板引擎
weixin_34232363的博客
05-02 539
对现在的前端来说，模板是非常熟悉的概念。毕竟现在三大框架那么火，不会用框架还能叫前端吗
怎么实现一个简单的模板引擎及其原理分析
Kaite_han的博客
08-18 454
怎么实现一个简单的模板引擎及其原理分析 首先最近读者在温顾模板引擎相关的知识点所以简单给写一些总结和分享一下自己写的一个极度简单的模板引擎，同时也是通过这个让大家理解模板引擎的实现原理。 模板引擎的作用 模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎的原理 模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替
简单的前端模板引擎能实现最基本的数据渲染
08-10
一段简单的JavaScript实现的前端模板引擎，可以实现简单的变量替代
myTpl.js:用Javascript编写的简单模板引擎
05-14
简单的模板引擎，用Java编写的逻辑有限。 在可以找到用PHP编写的版本。 用法 var tpl = myTpl ( 'tplDir' ) ; var data = { "name" : "John Doe" } ; tpl . load ( "test" , "myDiv" , data ) ; 模板文件 Hello! My...
探究Javascript模板引擎mustache.js使用方法
10-22
主要为大家介绍了Javascript模板引擎mustache.js使用方法，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用，感兴趣的小伙伴们可以参考...
boxwood:用JavaScript编写的逐步增强HTML模板引擎
05-12
用JavaScript编写的逐步增强HTML模板引擎 目录 背景 该库是旨在生成最佳渲染功能的编译器。 该函数应进行缓存和重用，以提供比其他模板语言更好的性能。 它也可以在各种上下文中使用，以呈现html页面，电子邮件...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 416
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 521
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 304
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 413
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
flask如何编写一个聊天室
09-06
### 回答1： 为了编写一个聊天室，首先需要了解 Flask 框架的基本使用方法。...以上是一个简单的基于Flask的聊天室实现。当然，这只是一个起点，具体的实现方式还需要根据实际需求进行设计和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值