xuwenmin/template

`$template`, 一个简单高效的字符串模板引擎

$template 字符串模板库

$template是一个简单高效的字符串模板引擎,有关解析表达式的部分参考了ng里的$parse服务.

字符串替换

$template提供了es6里的字符串模板功能,用法如下

  $template.template('hello {{name}}', { name: 'feenan'}); // => hello feenan

支持四则运算

//  + - *  /

$template.template('(1+2)*age = {{ (1+2)*age}}', {age: 18}); // => (1+2)*age = 54

支持各种比较操作符

// > < >= <= == === !== !=
$template.template('1>2', {}); // => false

$template.template('age > 18', {age: 20}); // => true

支持三元运算符

$template.template('{{ 2 > 1 ? name : ""}}', {name: 'feenan'}); // => feenan

条件判断if

$template支持if语句来判断是否显示字符串的某部分,这里采用<% %>来显示程序语法

	<p>check if statment</p>
	<% if(showFn()) { %>
		<h1>hello1 {{ user.name }}</h1>
		<% if(user.age == 1) { %>
			<h2>hello2 {{ user.action | substr:1}}</h2>
		<% } %>
		<% if(user.age == 1) { %>
			<h3>hello3 {{ user.action }}</h3>
			<% for(user in users) {%>
				<h1>hello {{user.name}}</h1>
			<% } %>
			<% if(user.age == 1) { %>
				<h4> hello4 {{ user.name}}</h4>
			<% } %>
		<% } %>
	<% } %>	

var fn = $template.template(html);
var data = {
	showFn: function(){
		return true;
	},
	showh1: true,
	user: {
		name: 'feenan',
		info: 'haha',
		action: 'start',
		age: 2
	},
	users:[
		{name: 'feenan', info: 'haha'},
		{name: 'feenan1', info: 'haha1'}
	]
}
fn(data);

注意: 假如$template.template只传递字符串的话会返回一个编译函数,下次传递数据才会生成最后的字符串.

目前if语句支持无限嵌套if语句,支持嵌套for语句.

	<% if(user.age > 1) {%>
		<% for(user in users) {%>
			<h1>hello {{user.name}}</h1>
		<% } %>
		<% for(user in users) {%>
			<h2>hello {{user.name}}</h2>
		<% } %>
	<% }%>

循环语句for

目前for语句支持无限嵌套if语句,支持嵌套for本身.

	<% for(user in users) {%>
		<h1>hello {{user.name}}</h1>
		<% if(user.name) { %>
			<h2>hello2 {{ user.info}}</h2>
		<% } %>
		<% for(action in user.actions) {%>
			<h3>hello 3 {{action.name}}</h3>
		<% }%>
	<% } %>

过滤函数

目前支持以管道符号|来执行过滤函数,对外提供扩展属性的方式来增加自定义过滤函数.扩展属性通过$template.methods数组来实现.

$template.methods.push(['int', function(src, len){
	var str  = String(src).substr(0, len);
	return Number(str);
}]);

$template.template('your age is {{ age | int:5 }}', { age: '50'}); // => 50

过滤函数支持传递参数,方法名后面传递:后跟值就可以.

待改进的地方

• if语句增加else功能
• 增加字符串安全过滤功能

总结

现在模板引擎非常多,希望这个小小的js库大家会喜欢,有问题可以提github上.