盒子

自己动手写一个简易版MVVM 的模版引擎

2016-04-12 | zyl | Javascript Nodejs Css Linux

用正则写一个简单的模版引擎

模版引擎在前端已经很普遍了，Angular,React,avalon等框架中模版引擎运用的非常成熟，但是一直不知道它们具体是如何实现的。下面自己动手写一个，只有简单的插入数据的功能，对于循环遍历等实现，功力尚浅，需再修炼。

1
2
3
4
5
6
7
8
9
10
var str = 'My name is {data.name},my age is {data.age},my girlfriend is very {data.dec},I live in {data.addr},I join in {data.group.name}';
var data = {
	name:"zyl",
	age:24,
	dec:'beautiful',
	addr:'BeiJing',
	group:{
		name:'Github'
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function template(str,data) {
	var strc = str.replace(/\{(\w+)((\.\w+)*)\}/g,function(m,n1,n2) {
		if(!n2){
			if(n1){
				if(typeof data == 'string'){
					return data;
				}else{
					return;
				}

			}else{
				return;
			}
		}else{
			var tmp = n2.split('.');
			tmp.shift();
			var result = resultF(tmp,data);
			if(result&&typeof(result)!=='Object'){
				return result;
			}else{
				return ;
			}
		}

	});
	return strc;
}

function resultF(arr,obj) {
	
	return arr.reduce(function(pre,next) {
		return pre[next]
	},obj)
}
1
2
3
template(str,data);

"My name is zyl,my age is 24,my girlfriend is very beatiful,I live in BeiJing,I join in Github"

其中resultF 函数的功能是：实现循环遍历出data对象的属性值,避免了在模版函数中写多次循环遍历，Array 的 reduce 函数十分强大，下一节总结一下下。

1
2
3
4
5
6
7
8
9
10
11
12
13
var data = {
	name : '苍老师',
	age : '18',
	dec : '苍老师永远18岁',
	role : '苍老湿的角色大家都懂得',
	coperate : {
		company: {
			name :'库里几哇什么什么的'
		}
	}
};
var companyName = resultF(['coperate','company','name'],data);
console.log(companyName);//库里几哇什么什么的