今天遇到一个问题,这个问题也是我以前遇到的问题,以前的方式,也是大多数人使用的方式。大家可以看看我的文章。
从前的方式——我估计也是大多数人使用的方式
比如以下的代码——摘自新浪首页的一段js代码,这种方式也是大多数人使用的方式。
上面的代码,你看完有什么反应?你也许会把+=这种形式改成数组的push形式,有人说push比这种字符链接要快,但是也快不了多少。
如果这种嵌入的html代码很多,你也要这样处理吗?如果修改(添加或者删除)某个html,那么你就要不断的翻代码,找对应的标签,然后在找结束标签,你不觉得麻烦吗?也许有人会这样写(这个是我早期写的,也是我最惯于使用的方式)。
上面的代码,我维护起来也是非常费劲的,很多时候如果ui那边添加了个标签,或者修改了下html结构,那我就头疼了。
页面模板化——全新的方式
这是我最近看了facebook的js代码,偶然间发现以下的方式看起来不错,希望与大家分享。
看我的index.html代码
看我的js代码
今天偶然间发现这种方式更加合理,因为那个for循环看着太闹心了
维护上面的html代码我们是很容易的,下次无论html代码结构有什么变动,改起来都很方便。
昨天我项目中需要条件筛选功能,所以我又做了一个if语法解析的功能。
亮代码:
对应方法
首先很感谢大家的宝贵意见,现在就一些评论而发,大家勿见怪,没有对大家评论不满的意思。
1、很多人都说已经有这种代码框架了,但是我觉得为了几个简单功能用这么庞大的框架。而且我们现有的代码外层已经有框架了,也许是jquery,也许是prototype.js,而且又把这种框架拿过来,这是何等的代码量!
2、我希望大家平时最好不要有复制代码的习惯,最好是重新code一遍,即便是自己的代码。——所以我一直用图片方式的原因。
3、我的代码没有必要整个都拿过去,你可以把上面的两个方法拿过去放在自己的代码中,就能用了。——你也可以自己修复一下代码。
上面的代码有很多问题,大家不要见怪,这个只是我的简易版。
当前的模板只支持简单的变量替换,if标签。如果大家有兴趣,可以试着运行一下,如果做的比较成功,告知一下。
分享到:
相关推荐
后端不再负责模板渲染、输出页面工作,后端API通用化,即同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端。 -单页面缺点: -首次加载耗时比较多。 解决办法:可以采用基于HTTP Chunk 的首...
退休后,自由开发和照顾孩子占用了他大部分的时光。Peter是AngularJS社区的名人。他最近加入了Google的AngularJS团队。他还是Angular UI项目的创始成员。他曾在Devoxx UK和其他活动中发表过有关AngularJS的演讲,并...
如何在Asp.Net1.1中实现页面模板(所谓的MasterPage技术) Tool Tip 示例(FILTER版) Tool Tip示例 (htc版) 一个.net发送HTTP数据实体的类 按键跳转以及按Enter以不同参数提交,及其他感应事件 动态控制Page页的...
对大部分使用asp.net技术开发两年左右的开发人员来说,本书75%以上的内容可能没有接触过,本书将通过笔者精心准备的一些生动的例子来阐述这些内容。. 本书适合从事asp.net技术多年想往深度理解asp.net工作机制的...
1.14 页面模板系统 148 1.15 不用 XML 的响应数据 149 1.16 JavaScript 对象标注 150 1.17 比较序列化技术 153 第 14部分:面向 Java 开发人员的 Ajax 结合 Direct Web Remoting 使用 Ajax 154 1.1 DWR 是什么...
注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。part2在本人的资源里可以找到:http://download.csdn.net/user/lxm0918 第1章 服务器控件概述及开发...
注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。part2在本人的资源里可以找到:http://download.csdn.net/user/lxm0918 第1章 服务器控件概述及开发...
全书压缩打包成2部分,这是第1部分。 注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介 《PHP开发实战1200例》分为...
全书压缩打包成2部分,这是第2部分。 注:本系列图书的第I、II卷再版时均相应改名为《xxx开发实例大全》(基础卷)及(提高卷),但内容基本无变化,需要的童鞋可自由匹配查找。 内容简介 《PHP开发实战1200例》分为...
4.6.1 使用get方法和exists方法进行基本查询 4.6.2 列举(listing),70排序(sorting)以及合计(counting) 4.6.3 用动态查找器(finder)查询 4.6.4 使用hql进行查询 4.6.5 按样本...
6.1.4 编写JavaScript调用远程方法 172 6.2 为Ext.Direct自定义远程方法 173 6.3 Ext.Direct中的高级应用 178 6.3.1 批量请求和批量响应 178 6.3.2 在tree中使用Ext.Direct 181 6.3.3 为grid设置DirectStore 183 ...
它并没有使用任何新的技术,只是由两名架构师将asp.net开发中常用的一些工具整合到了一起,并且部分实现了DDD的概念。是一个开箱即用的框架,可以作为asp.net分布式应用的一个良好起点。 它的功能包括: 服务器端...
Angular 会把你的模板转换成代码,针对现代 JavaScript 虚拟机进行高度优化,轻松获得框架提供的高生产率,同时又能保留所有手写代码的优点。 统一 在服务端渲染应用的首屏,像只有 HTML ...
《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...
全书主要分为两大部分。在“构建应用程序”部分中,读者将看到一个完整的“在线购书网站”示例。在随后的“Rails框架“部分中,作者深入介绍了Rails框架的各个组件。 除了上述两部分外,对Rails缺乏了解的读者应该...
“小红书”——给你安利几个小程序的“坑”微信小程序写在前面 小程序发布至今已有一年多时间,很多人都已经在小程序道路上狂奔。最近我也开始了学习小程序,学了一段时间后,想看看这段时间的学习效果,于是边学习...
2、能够跨平台:JSP支持绝大部分平台,包括现在非常流行的LINUX系统,应用非常广泛的Apache服务器也提供了支持JSP的服务; 3、组件的开发和使用很方便:如ASP的组件是由C++,VB等语言开发的,并需要注册才能使用;...
Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器,使用方法: 可直接输入文件名或网络地址,但必需事先连入网络。 Java编写的山寨QQ,多人聊天+用户在线 21个目标文件 摘要:JAVA源码,...
Java编写的HTML浏览器源代码,一个很简单甚至不算是浏览器的HTML浏览器,使用方法: 可直接输入文件名或网络地址,但必需事先连入网络。 Java编写的山寨QQ,多人聊天+用户在线 21个目标文件 摘要:JAVA源码,...