编程 Javascript

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

Posted in Javascript onJune 05, 2012

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

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

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

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

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

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

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

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

看我的index.html代码

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

看我的js代码

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

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

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

总结

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

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

作者：穿山甲

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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

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