随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。 本文将用最简单的示例代码描述现有的 javascr...
网站首页没有一点动画怎么可以，我以前用过Flash As3做过图片切换，效果非常不错，可是麻烦，改变起来麻烦。一直都想自己做个图片切换效果，总认为比较麻烦，今天自己实践了一下，其实还比较简单。不过有个小问题，IE8不兼容模式下 设置有透明效果的div 样式添加失效了，但是我用谷歌，IE8兼容测试都ok。 反正是给自己记录的，也不多话了，js没有与页面分离，也没有做出插件。一个网站要不了几个这种效果，先实现了再说吧。最后的效...
我使用jQuery已经有相当长的时间了，并且我会常常为它写一些插件（plugin）。我尝试过用不同的方式去写，现在这个模板是我最喜欢的：代码如下: ;(function($) { // multiple plugins can go here (function(pluginName) { var defaults = { color: black, testFor: function(div) { return true; } }; $.fn[pluginName] = function(options) { options = $.extend(true, {}, defa...
在初次进行jquery插件开发时，我们往往无从下手，当然我们可以按照jquery官方提供的格式进行简单的插件开发，但是很多时候往往不尽完美，一不小心，就造出一个很“烂”的插件：难以维护、难以扩展、使用繁琐、性能不佳...当我们在不断的实践中，慢慢积累下来时，有些问题得到了有效的避免，但也带来了新的问题：在众多纷杂的jquery插件开发模式中，究竟哪一种模式才是最好的呢？如果能提供一个模板，通过一定的约束和规范为开发者解...
laytpl是一款颠覆性的JavaScript模板引擎，它用巧妙的实现方式，将自身的体积变得小巧玲珑，不仅性能接近极致，并且还具备传统前端引擎的几乎所有功能。所有的变身魔法都由不到1KB的代码创造，这仿佛是一场革命，又或者不是，但毋庸置疑的是，laytpl的确在用最轻量的方式呈现给世人。如果你从未接触这方面的应用，没关系，下面的讲述将会让你迫不及待地选择laytpl，从此更好地把握页面的数据渲染，走上人生巅峰！laytpl优势 ?性能卓...
使用方法 编译模板并根据数据立即渲染出结果 juicer(tpl, data);仅编译模板暂不渲染，返回一个可重用的编译后的函数var compiled_tpl = juicer(tpl);根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl);var html = complied_tpl.render(data);注册/注销自定义函数（对象） juicer.register(‘function_name, function); juicer.unregister(‘function_name); 默认参数配置{cache: true [false];script: tru...
代码如下:<body> <h1>天地盟主 QQ：467713292</h1> <!-- 将模版放置的位置标签 --> <div id="contactContainer"></div> <!-- 定义模板的内容布局 和定义显示的字段 --> <script id="contactTemplate" type="text/html"> <div> 姓名: {{= name }} <br /> 手机号: {{= phone }} </div> </script> //引用两个js 代码如下:<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script> <script src="Scripts/jquery.tmpl...
1 绑定后台数据到指定模板（无嵌套，内容均为后台数据原始信息，前台绑定）以通话记录页为例：首先指定目标容器： 代码如下: <dl class="box_pannel_content_filled_border none" id="gvRecCalls"> <dd class="bg_blue"> <p class="width_level_half_2 fl nopitch"></p> <p class="width_level_half_5 bold fl">被叫号码</p> <p class="width_level_half_5 bold fl">主叫号码</p> <p class="width_level_half_6 bold...
概述 我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。 解决这个问题的常见解决方案是是使用模板，作为配置项传入控件，实现数据和渲染的分离。具体的实现方法有以下方法：字符串替换，使用正则匹配将数据替换进字符串中。 渲染函数，函数返回字符串。 模板引擎，可以将执行字符串中的函数（内置或者自定义...
Underscore是一个非常实用的JavaScript库，提供许多编程时需要的功能的支持，他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。 无论你写一段小的js代码，还是写一个大型的HTML5应用，underscore都能帮上忙。目前，underscore已经被广泛使用，例如，backbone.js唯一强依赖的库就是underscore.js。 今天主要讨论Underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加...
比如要在一个列表中利用ajax插入一个li的时候，我会直接把数据跟html标签拼接成一句完整的html，然后插入到ul中。无论数据是从服务器端拿回的，或者是从用户的input输入中拿到的——无论哪种方法都是一样。 这个拼接过程放在JavaScript文件中，显得非常不优雅。如果还把style也放在JavaScript中，那数据、结构还有样式整个就是一锅粥了，要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端，a...
从前的方式——我估计也是大多数人使用的方式 比如以下的代码——摘自新浪首页的一段js代码，这种方式也是大多数人使用的方式。 上面的代码，你看完有什么反应？你也许会把+=这种形式改成数组的push形式，有人说push比这种字符链接要快，但是也快不了多少。 如果这种嵌入的html代码很多，你也要这样处理吗？如果修改（添加或者删除）某个html，那么你就要不断的翻代码，找对应的标签，然后在找结束标签，你不觉得麻烦吗？也许有人...
本版本就是改回v6的形态，后端数据还是带@前端才方便查看与调试。昨天也与一TX前端工程师讨论过这个必要性。取得模板中的需要填写的变量，再与后端传过来的JSON进行比较，尽早进行数据验证。这种技术，可以看一看PHP的变量命名就知了，带是带$前缀。 在之前的版本中，如果输出语句带分号或逗号是会报错的 代码如下:<script type="tmpl" id="table_tmpl"> <table> <& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &> <& tr = @trs[...
用过Prototype的人都知道，里面有个类叫做Template，用法示例如下： 代码如下:var str = #{what} may have gone, but there is a time of #{how}; var object = { what : Swallows, how : return } var template_1 = new Template(str); var result = template_1.evaluate(object); console.log(result:,result); //输出：'Swallows may have gone, but there is a time of return' 这么挺方便的，所以下面就简单的分析一下实现原...
代码如下:$("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTemplate(data) : 绑定数据对象到模板的操作方法 source : json 格式的数据源 template : null 不提供模板,InnerHtml输出 $(“#template”) 利用页面上定义好的html结构作为模板 “<div>{{...}}</div>” 直接定义模板 dateFormat : 时间的...