编程 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 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