私信发送成功
Watch Star Fork

anlige / JazorJavaScriptMIT

Javascript模板引擎,模仿Razor语法,支持一些简单的语法检查,console可定位到语法错误行号。支持缓存,采用Crc32作缓存唯一性校验。通过扩展,支持Html元素快捷生成,模板无限级继承。不习惯Razor语法,可以通过扩展,使用hmtltag来定义模板。 http://jazor.net
克隆/下载
Anlige 最后提交于 2017-08-30 13:59 ajax增加X-Requested-With头;
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
2017-07-30 15:03
2017-08-20 17:05
2017-08-09 22:51
Loading...
README.md 4.92 KB

PithyJt

Razor语法的Javascript模板引擎。
支持一些简单的语法检查,可定位到语法错误行号。
支持缓存,采用Crc32作缓存唯一性校验。
通过扩展,支持Html元素快捷生成,模板无限级继承。
不习惯Razor语法,可以通过扩展,使用hmtltag来定义模板。

用法

引用Pjt:

<script src="pithy.teemplate.js"></script>

编译模板:

var codes = Pjt.compile('<h3>@title</h3><p>@description</p>');

渲染数据:

var text = Pjt.render(codes, {
	title : '标题Pjt', 
	description : '描述:一个Razor语法的Javscript模板引擎'
});

输出结果:

<h3>标题Pjt</h3><p>描述:一个Razor语法的Javscript模板引擎</p>

文件结构

resources	几个演示代码常用的方法
src	Pjt源码
	pithy.ajax.js	非Pjt必须,一个好用的ajax请求插件
	pithy.teemplate.js	Pjt核心,必须
	pithy.teemplate.helper.js	非Pjt必须,一些方便的快速操作封装
	pithy.teemplate.htmlhelper.js	非Pjt必须,快捷的Html表单元素生成,无需调用任何方法,引用后自动实现
	pithy.teemplate.extends.js	非Pjt必须,实现Pjt继承功能的扩展
	pithy.teemplate.htmltag.js	非Pjt必须,自动实现html标签模板功能的扩展,引用后自动实现,无需调用任何方法
	
demo	简单示例
	extends.html	Pjt继承功能的扩展示例
	htmlhelper.htmlhtml	Html表单元素生成示例
	index.htmlhtml	基本示例
	layouts.htmlhtml	用于extends示例的布局内容
	
index.html	在线编译渲染

src目录中的pithy.teemplate.js为核心文件,Pjt必须。
目录中的其他文件均为扩展。
其中pithy.ajax.js是一个简单的ajax请求库,内置了require,可以用来引用AMD规范的模块。

pithy.teemplate.*.js 四个扩展库,可扩展Pjt的功能。可以通过script标签直接引用,也可以用AJAX.require引用。

示例数据

{
	name : 'anlige',
	age : 23,
	list : [
		{date : '1986-9-1', text : 'birthday'},
		{date : '1998-9-1', text : 'schrool'},
		{date : '2009-6-21', text : 'work'}
	],
	basic : {
		sex : 'boy',
		works : 9
	}
}

JavaScript调用方法

不借助helper

///初始化实例

///模板编译
var code = Pjt.compile('<p>@name</p>');

///渲染数据
id('result2').innerHTML = Pjt.render(code, {name : 'Jazor'});

借助helper(链式写法)

PjtHelper
	.compile('<p>@name</p>')
	.render({name : 'Jazor'})
	.appendTo('result');

appendTo方法把渲染后的数据赋值给result标签。

借助helper(非链式写法)

///编译
var render = PjtHelper.compile('<p>@name</p>');

///渲染
var appender = render.render({name : 'Jazor'});

///赋值
id('result3').innerHTML = appender;

直接把appender赋值给result3标签。

bind方法

/*
	PjtHelper.bind(data, src, dest);
	data : 待渲染的数据
	src  : html元素,包含待编译的模板文本
	dest : 	1、html元素, 用来显示渲染结果
			2、回调函数, 第一个参数为渲染结果
*/

PjtHelper.bind({name : 'Jazor'}, '_template', 'result3');

///等效于
PjtHelper.bind({name : 'Jazor'}, '_template', function(res){
	document.getElementById('result3').innerHTML = res;
});

模板语法类似Razor语法,不过比较宽松

赋值

<div>name = @name</div>
<div>age = @age</div>
<div>4 years later = @(age + 4)</div>
<div>sex = @basic['sex']</div>
<div>works = @basic.works</div>

支持基本的表达式,必要情况下可以使用“()”来作为表达式界定符。 模板中输出@符号,请使用@@。

代码块

@{
	var r = 255, g = 0, b = 0;
}
<div style="color:rgb(@r, @g, @b)">color:rgb(@r, @g, @b)</div>

使用@紧跟{作为一个代码块,代码块需要}结束。

HTML块

@region 
<script>
var name = 'anlige';
</script>
@endregion

使用@region标识一个HTML代码块的开始,@endregion之前的所有代码仅仅被当做普通文本行,但参与变量渲染。 主要用来在模板中引用style或script标签,当然,不建议在模板中引用,模板中尽量只有html标签。

if语句

@if( age > 23){
	<p>大于23岁</p>
}else{
	<p>不大于23岁</p>
}

for语句(原生js)

<ul>
@for(var i = 0; i < list.length; i++){
	<li>@list[i].date</li>
}
</ul>

each语句(用于数组)

<ul>
@each list as value{
	<li>date =  @value.date</li>
}
</ul>
<ul>
@each list as key, value{
	<li>key = @key, date =  @value.date</li>
}
</ul>

foreach语句(用于普通js对象,这里就叫键值对对象吧)

<ul>
@foreach basic as key, value{
	<li>@key = @value</li>
}
</ul>

each和foreach是语法糖,最后是编译成原生js。

项目点评 ( 0 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close