一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的
前端HTML
模板引擎。彻底实现前后端分离，让后端专注业务的处理。
传统MVC开发模式，V层
使用服务器端渲染。美工设计好静态HTML文件，交给后端工程师，需要转换成Jsp、
Freemarker、Velocity等动态模板文件。这种模式有几个缺点
1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果
2、动态效果和静态效果分别存在不同文件，美工和后端工程师需要分别维护各自页面文件，其中一方需要修改页面，都需要通知另一方进行修改
3、页面数据不能分块加载、获取跨域数据比较麻烦
dom
Template.js
模板引擎是通过在标签中添加自定义属性，实现动态模板功能，当没有引入dom
Template脚本，
则自定义标签属性不会被浏览器解析，不会破坏原有静态效果，当引入dom
Template脚本，
模板引擎回去解析这些标签属性，
并加载数据进行动态渲染。 下图：对比服务器页面渲染和
使用dom
Template前端引擎开发流程
服务器端模板解析
dom
Template前端解析
用法
导入jquery.js或者zepto.js和dom
Template.js
$(function () {
$.dom
Template.init(options);
//可以通过selector指定根节点，默认根节点是body,表示从body开始，渲染整个页面
});
或者解析某一个html片段。
$('selector').dom
Template(options);
//渲染数据是通过h-model 自动去获取数据，也可以通过data指定全局数据
if条件标签
<div>
<p h-if="{user.id==50}" h-text="用户ID等于50">xxx</p> <p>其他内容</p> <div>
switch条件标签
<p h-switch="{user.id}">
<input type="text" h-case="20" h-val="{user.email}"/>
<input type="text" h-case="60" h-val="拉拉"/>
<input type="text" h-case="*" h-val="丽丽"/>
</p>
each遍历标签
<p>遍历List例子</p> <ul>
<li h-each= "user,userStat : {users}" h-text="{userStat.index 1}-{user.email}">
李小璐</li>
</ul>
自定义标签
$.dom
Template.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称，用时要加上前缀，如定义'test'标签，用时h-test=""
标签：dom
Template
分享
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": [],
"bdPic": "",
"bdStyle": "1",
"bdSize": "24"
}, "share": {}
};
with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' ~(-new Date() / 36e5)];\r\n \r\n \r\n \r\n \r\n \u8f6f\u4ef6\u9996\u9875\r\n \u8f6f\u4ef6\u4e0b\u8f7d\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\nwindow.changyan.api.config({\r\nappid: 'cysXjLKDf',
conf: 'prod_33c27aefa42004c9b2c12a759c851039'
});
扫一扫
2098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
