Javascript 页面模板化很多人没有使用过的方法


Posted in Javascript onJune 05, 2012

从前的方式——我估计也是大多数人使用的方式

比如以下的代码——摘自新浪首页的一段js代码,这种方式也是大多数人使用的方式。

Javascript 页面模板化很多人没有使用过的方法

上面的代码,你看完有什么反应?你也许会把+=这种形式改成数组的push形式,有人说push比这种字符链接要快,但是也快不了多少。

如果这种嵌入的html代码很多,你也要这样处理吗?如果修改(添加或者删除)某个html,那么你就要不断的翻代码,找对应的标签,然后在找结束标签,你不觉得麻烦吗?也许有人会这样写(这个是我早期写的,也是我最惯于使用的方式)。

Javascript 页面模板化很多人没有使用过的方法

上面的代码,我维护起来也是非常费劲的,很多时候如果ui那边添加了个标签,或者修改了下html结构,那我就头疼了。
Javascript 页面模板化很多人没有使用过的方法

页面模板化——全新的方式

这是我最近看了facebook的js代码,偶然间发现以下的方式看起来不错,希望与大家分享。

看我的index.html代码

Javascript 页面模板化很多人没有使用过的方法

看我的js代码

Javascript 页面模板化很多人没有使用过的方法

维护上面的html代码我们是很容易的,下次无论html代码结构有什么变动,改起来都很方便。

Javascript 页面模板化很多人没有使用过的方法

总结

上面的代码有很多问题,大家不要见怪,这个只是我的简易版。

当前的模板只支持简单的变量替换,有很多功能未开发出来,比如if标签,for标签,如果大家有兴趣,可以试着做一下,如果做的比较成功,告知一下。如果能做个类似smarty的开源框架,呵呵,咱们也可以为开源事业做点贡献不是。

作者:穿山甲

Javascript 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JS制作简单的三级联动
Mar 18 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
了解ESlint和其相关操作小结
May 21 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 #Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 #Javascript
javascript中获取下个月一号,是星期几
Jun 01 #Javascript
一行代码告别document.getElementById
Jun 01 #Javascript
javascript的console.log()用法小结
May 31 #Javascript
jQuery 联动日历实现代码
May 31 #Javascript
从阶乘函数对比Javascript和C#的异同
May 31 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
PHP4实际应用经验篇(3)
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript模拟push
2016/03/06 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
django 信号调度机制详解
2019/07/19 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python使用re模块验证危险字符
2020/05/21 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
任命书模板
2014/06/04 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript