编程 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 相关文章推荐

Jquery知识点一 Jquery的ready和Dom的onload的区别

Jan 15 Javascript

SeaJS入门教程系列之完整示例（三）

Mar 03 Javascript

JQuery中DOM实现事件移除的方法

Jun 13 Javascript

静态页面html中跳转传值的JS处理技巧

Jun 22 Javascript

JavaScript中对象的不同创建方法

Aug 12 Javascript

jQuery EasyUI 获取tabs的实例解析

Dec 06 Javascript

JavaScript实现图像模糊化的方法实例

Jan 15 Javascript

微信小程序实战之运维小项目

Jan 17 Javascript

JavaScript获取中英文混合字符串长度的方法示例

Feb 04 Javascript

vue2.0基于vue-cli+element-ui制作树形treeTable

Apr 30 Javascript

vue页面切换项目实现转场动画的方法

Nov 12 Javascript

js实现随机点名器精简版

Jun 29 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

Zend studio for eclipse中使php可以调用mysql相关函数的设置方法

2008/10/13 PHP

有关PHP性能优化的介绍

2013/06/20 PHP

php教程之魔术方法的使用示例(php魔术函数)

2014/02/12 PHP

用Div仿showModalDialog模式菜单的效果的代码

2007/03/05 Javascript

document.open() 与 document.write()的区别

2007/08/13 Javascript

jQuery技巧总结

2011/01/01 Javascript

jQuery制作仿Mac Lion OS滚动条效果

2015/02/10 Javascript

javascript中substring()、substr()、slice()的区别

2015/08/30 Javascript

基于JavaScript实现动态创建表格和增加表格行数

2015/12/20 Javascript

快速使用node.js进行web开发详解

2017/04/26 Javascript

基于Bootstrap下拉框插件bootstrap-select使用方法详解

2018/08/07 Javascript

新手必须知的Node.js 4个JavaScript基本概念

2018/09/16 Javascript

layui动态绑定事件的方法

2019/09/20 Javascript

Javascript前端下载后台传来的文件流代码实例

2020/08/18 Javascript

[01:10]DOTA2次级职业联赛 - U5战队宣传片

2014/12/01 DOTA

[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29

2020/12/02 DOTA

Python采用raw_input读取输入值的方法

2014/08/18 Python

Python实现查找系统盘中需要找的字符

2015/07/14 Python

Python爬虫常用小技巧之设置代理IP

2018/09/13 Python

python实现图片筛选程序

2018/10/24 Python

Python将字符串常量转化为变量方法总结

2019/03/17 Python

python中的global关键字的使用方法

2019/08/20 Python

Python GUI库PyQt5图形和特效样式QSS介绍

2020/02/25 Python

如何利用python web框架做文件流下载的实现示例

2020/06/02 Python

django创建css文件夹的具体方法

2020/07/31 Python

HTML5 embed 标签使用方法介绍

2013/08/13 HTML / CSS

社区党总支书记先进事迹材料

2014/01/24 职场文书

建筑安全责任书范本

2014/07/24 职场文书

自我管理的活动方案

2014/08/25 职场文书

财务工作疏忽检讨书

2014/09/11 职场文书

交心谈心活动总结

2015/05/11 职场文书

检察院起诉意见书

2015/05/20 职场文书

故意杀人案辩护词

2015/05/21 职场文书

tensorflow学习笔记之tfrecord文件的生成与读取

2021/03/31 Python

教你使用RustDesk 搭建一个自己的远程桌面中继服务器

2022/08/14 Servers

Python 操作pdf pdfplumber读取PDF写入Exce

2022/08/14 Python