otmpl 是一个轻量级前端模版(仅有39行无压缩代码,支持缓存),所用指令仅需[#...#]和{#...#},前者包含需要输出html语句,后者包含js变量。 支持javascript完整语法,你可以写for或者while或者其他任一javascript的语法。这个模板参考了YaYaTemplate,但我对其进行优化和改良,并缩短整体代码,提供更好的支持。

jQuery.tmpl = function (str, data, helper)
  • str:一个 jQuery 对象或字符串
  • data:json对象。
  • helper:扩展对象,例如下面示例中自定义一个方法。
  • 注意:str的内部采用 this.XXX 来访问 data,如:this.id == data.id。
缓存:
缓存只针对 jQuery.tmpl 方法,并且 str 参数必须是一个 jQuery 对象,利用 $.data 对渲染函数进行存储缓存。如以下代码执行两次“jQuery.tmpl($('#demo'),{id:1})”,只会分析一次,若传入的是“jQuery.tmpl($('#demo').html(),{id:1})”则会分析两次。
 
Template:
 
Scripts:
 
Result1:
 
Result2:
示例+源码:
 
复杂示例:
<script id="addtmp" type="text/html">
var item = {};
var value = {};
if(this.id)
{
item.title = " 编辑 [ " + this.id + " ]";
item.icon = "icon-create";
item.url = "@Url.Action("AddData")";
item.success = function(data){
$.msg.alert('新建成功!新的编号为:' + data.value + '。');
$('#dataGrid').datagrid('reload');
$('#dlg').dialog('close');
};
var data = $.api('@Url.Action("GetDataByID")' + '/' + this.id)
if(data){
if(data.value != null) value = data.value;
else{
$.msg.error('错误 '+data.code,data.message);
$('#dlg').dialog('close');
}
}
else{
$.msg.error('数据访问发生了错误!');
$('#dlg').dialog('close');
}
}
else
{
item.title = " 新建";
item.icon = "icon-modify";
item.url = "@Url.Action("ModifyData")";
item.success = function(data){
$.msg.alert(data ? '保存成功!' : '保存失败,数据可能不存在!');
$('#dataGrid').datagrid('reload');
$('#dlg').dialog('close');
};
}
[#
<div id="dlg" class="easyui-dialog" title="{#item.title#}" style="width: 400px; height: 210px; padding: 10px"
data-options="
iconCls: '{#item.icon#}',
modal:true
">
<div class="filterArea onepcssgrid">
<form class="api-form" data-options="
url:'{#item.url#}',
success:{#item.success#}">
<div>
<div class="onerow">
<div class="col2 text-right">Address</div>
<div class="col9">
<input type="hidden" name="id" value="{#value.id#}" />
<input type="text" name="address" style="width: 100%" value="{#value.address#}" />
</div>
</div>
<div class="onerow">
<div class="col2 text-right">City</div>
<div class="col9">
<input type="text" name="city" style="width: 100%" value="{#value.city#}" />
</div>
</div>
<div class="onerow">
<div class="col2 text-right">Start</div>
<div class="col9">
<input type="text" name="start" style="width: 100%" value="{#value.start#}" />
</div>
</div>
<div class="onerow">
<div class="col2 text-right">End</div>
<div class="col9">
<input type="text" name="end" style="width: 100%" value="{#value.end#}" />
</div>
</div>
</div>
<div style="padding: 5px; width: 100%; margin-top: 5px; text-align: center; height: 22px;">
<input class="btn orange" type="submit" value="{#item.title#}" />
<input class="btn white" type="reset" value="清空" />
</div>
</form>
</div>
</div>
#]
</script>

39行代码实现JS HTML模板(轻量+高效+易用)的更多相关文章

  1. 一个只有99行代码的JS流程框架(二)

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架. 导语 前面写 ...

  2. 圣思源Java视频36节练习源码分享(自己的190+行代码对比老师的39行代码)

    题目: * 随机生成50个数字(整数),每个数字范围是[10,50],统计每个数字出现的次数 * 以及出现次数最多的数字与它的个数,最后将每个数字及其出现次数打印出来, * 如果某个数字出现次数为0, ...

  3. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  4. Day.js 是一个轻量的处理时间和日期的 JavaScript 库

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  5. 一个只有99行代码的JS流程框架

    张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架. 最近一直在想一个问题,如何能让js代码写起来更语义化和更具有可读性. 上周末的时候突发奇想,当代码在运 ...

  6. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  7. 【转】Vue.js:轻量高效的前端组件化方案

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  8. ES6躬行记(4)——模板字面量

    模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号.模板字面量包含特定形式的占位符(${expre ...

  9. 轻量高效的开源JavaScript插件和库 【转】

    图片 布局 轮播图 弹出层 音频视频 编辑器 字符串 表单 存储 动画 时间 其它 加载器 构建工具 测试 包管理器 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果 ...

随机推荐

  1. html text加提示语

    <input type="text" id="key" name="key" value=" 请输入关键词" on ...

  2. 《深入理解Nginx》阅读与实践(一):Nginx安装配置与HelloWorld

    最近在读陶辉的<深入理解Nginx:模块开发与架构解析>,一是想跟着大牛练练阅读和编写开源代码的能力,二是想学学Nginx优秀的架构设计,三是想找一个点深入下Linux下网络编程的细节.侯 ...

  3. bash脚本编程之二 条件判断and 逻辑运算

    1.条件测试结构 1) if/then结构: 判断命令列表的退出码是否为0,0为成功. 如果if和then在条件判断的同一行上的话, 必须使用分号来结束if表达式: if和then都是关键字. 关键字 ...

  4. HDU 5183 Negative and Positive (NP) ——(后缀和+手写hash表)

    根据奇偶开两个hash表来记录后缀和.注意set会被卡,要手写hash表. 具体见代码: #include <stdio.h> #include <algorithm> #in ...

  5. ubuntu搭建nfs网络文件系统

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...

  6. win8.1 vs2010 C++环境下 编译Android Adb.exe

    1 IntelliSense: cannot open source file "usb100.h"  adb 这是因为没有安装sdk造成的.win7下安装wdk,vs2010能够 ...

  7. adb通信原理分析

    关于这个问题,自己研究了一下,没有研究出来 在网络上搜罗了一下,基本上关于ADB的原理用了两张图表示:        我表示没有看懂这两个图, 又开始查阅一些一些资料: 首先知道adb的通信有Sock ...

  8. windows 2008 server ftp 无法访问解决办法

    安装一个WINDOWS自带的FTP服务器,整了接近一天的时间,按网上的教程,无论如何搭建.最终都是内部IP可以访问.外部IP无法访问. 1.防火墙全部关掉. 2.FTP所在目录给的是EVERYONE的 ...

  9. expdp小记

    一.10.2.0.5要求expdp导出a用户b表空间下的数据. expdp \'/ as sysdba\' directory=mydir dumpfile=1.dmp schemas=a exclu ...

  10. 一个自己用的代码备份工具,支持delphi,android,java,可以自己添加配置,灵活支持大部分编程语言

    下面就是这个软件的下载地址 http://files.cnblogs.com/files/stevenlaz/release.zip 绿色软件 MConfig.exe 进行安装,或者卸载 MBacku ...