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 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
document.forms用法示例介绍
Jun 26 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js闭包的用途详解
Nov 09 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
node.js博客项目开发手记
Mar 16 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 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
PHP生成静态页
2006/11/25 PHP
php计算十二星座的函数代码
2012/08/21 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
提高php编程效率技巧
2015/08/13 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
超级强大的表单验证
2006/06/26 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
微信小程序常用简易小函数总结
2019/02/01 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
深入学习Python中的装饰器使用
2016/06/20 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
python else语句在循环中的运用详解
2020/07/06 Python
主治医师岗位职责
2013/12/10 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
《乞巧》教学反思
2014/02/27 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
个人合作协议范本
2015/08/06 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers