从前的方式——我估计也是大多数人使用的方式 比如以下的代码——摘自新浪首页的一段js代码,这种方式也是大多数人使用的方式。 上面的代码,你看完有什么反应?你也许会把+=这种形式改成数组的push形式,有人说push比这种字符链接要快,但是也快不了多少。 如果这种嵌入的html代码很多,你也要这样处理吗?如果修改(添加或者删除)某个html,那么你就要不断的翻代码,找对应的标签,然后在找结束标签,你不觉得麻烦吗?也许有人...
比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中。无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的——无论哪种方法都是一样。 这个拼接过程放在JavaScript文件中,显得非常不优雅。如果还把style也放在JavaScript中,那数据、结构还有样式整个就是一锅粥了,要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端,a...
Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能。 无论你写一段小的js代码,还是写一个大型的HTML5应用,underscore都能帮上忙。目前,underscore已经被广泛使用,例如,backbone.js唯一强依赖的库就是underscore.js。 今天主要讨论Underscore 的前端模板功能。它的模板功能和前一篇介绍的javascript前端模板是一样的。对数据的处理更加...
概述 我们在使用JS渲染DOM时,一般使用字符串创建DOM然后附加到父元素上,如果附加的DOM是动态易变的,那需要在函数中写大量逻辑。如果在控件实现过程中,这带来的问题更为严重。 解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离。具体的实现方法有以下方法:字符串替换,使用正则匹配将数据替换进字符串中。 渲染函数,函数返回字符串。 模板引擎,可以将执行字符串中的函数(内置或者自定义...
JSON可谓是JavaScript的亮点,它能用优雅简练的代码实现Object和Array的初始化。同样是基于文本的数据定义,它比符号分隔更有语义,比XML更简洁。因此越来越多的JS开发中,使用它作为数据的传输和储存。 JS数组内置了不少有用的方法,方便我们对数据的查询和筛选。例如我们有一堆数据: 代码如下:var heros = [ // 名============攻=====防=======力量====敏捷=====智力==== {name:冰室女巫, DP:38, AP:1.3, Str:16,...
1 绑定后台数据到指定模板(无嵌套,内容均为后台数据原始信息,前台绑定)以通话记录页为例:首先指定目标容器: 代码如下: 被叫号码 主叫号码 起始时间 金额($) 时长 区域 CDR ID 其次指定模板数据: 代码如下:${CalledStationId}${CallingStationId.substr(CallingStationId.indexOf("*") + 1)}${StartTime}${CSSCommonJS.ChangeDecimal(Revenue,3)}${CSSCommonJS.GetTimeFormatString(...
代码如下: 天地盟主 QQ:467713292 姓名: {{= name }} 手机号: {{= phone }} //引用两个js 代码如下: var contacts = [ {name:"天地盟主", phone:"467713292"}, {name:"与狼共舞", phone: "206-555-7878" }, {name:"程序员中的菜鸟", phone: "415-555-8888" } ]; //只需要这样一句话就可以将上面定义好的json数据填充到模板里 呈现出来 代码如下: $("#contactTemplate").render(contacts).appendTo("#contactConta...
使用方法 编译模板并根据数据立即渲染出结果juicer(tpl, data);仅编译模板暂不渲染,返回一个可重用的编译后的函数根据给定的数据对之前编译好的模板进行渲染注册/注销自定义函数(对象)juicer.register(‘function_name', function); juicer.unregister(‘function_name');默认参数配置修改默认配置,逐条修改修改默认配置,批量修改Juicer 默认会对编译后的模板进行缓存,从而避免同一模板多次数据渲染时候重复编译所耗的时间,...
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能。所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人。如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 ?性能...
在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很“烂”的插件:难以维护、难以扩展、使用繁琐、性能不佳...当我们在不断的实践中,慢慢积累下来时,有些问题得到了有效的避免,但也带来了新的问题:在众多纷杂的jquery插件开发模式中,究竟哪一种模式才是最好的呢?如果能提供一个模板,通过一定的约束和规范为开发者解...
本文实例讲述了Thinkphp模板没有解析直接原样输出的解决方法。分享给大家供大家参考。具体如下: 一、问题: 最近在学习thinkphp模板了,但是发现模板页原样出来了,经过一番艰苦搜索终于找到解决方案。 二、解决方法: 很多人都碰到相同问题,在变量中赋值的字符串中包含的__ROOT__、__PUBLIC__、__APP__,这种字符的, 在模板中display出来的时候都被替换成了真实路径。话说是在写Timi文件管理系统的时候发现的这个问题。 从文件...
我使用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, {}, defaults, options);return this.each(function() {var elem = thi...
网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦。一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单。不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok。 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件。一个网站要不了几个这种效果,先实现了再说吧。最后的效...
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。 本文将用最简单的示例代码描述现有的 javascr...
模板地址:https://github.com/zhangshaolong/simplite欢迎各位提出宝贵意见及贡献代码。特点: 1:代码量少,学习成本低; 2:默认jsp语法标签方式,熟悉jsp的朋友可以直接按照jsp的语法书写模板; 3:使用原生js语法进行逻辑处理,只要熟悉js语法即可直接上手,没有学习成本。 4:支持原生js的所有语法作为代码逻辑片段,支持宽泛的书写格式。 5:支持重定义模板语言的标签符,默认的逻辑标签为,默认的属性标签为。 6:支持嵌套...