编程 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.ui.progressbar 中文文档

Nov 26 Javascript

JS中的数组的sort方法使用示例

Jan 22 Javascript

为jquery的ajaxfileupload增加附加参数的方法

Mar 04 Javascript

深入探讨JavaScript String对象

Mar 09 Javascript

jQuery+slidereveal实现的面板滑动侧边展出效果

Mar 14 Javascript

JS检测页面中哪个HTML标签触发点击事件的方法

Jun 17 Javascript

详解Jquery Easyui的验证扩展

Jan 09 Javascript

bootstrap配合Masonry插件实现瀑布式布局

Jan 18 Javascript

VUE中使用Vue-resource完成交互

Jul 21 Javascript

layui table 多行删除(id获取)的方法

Sep 12 Javascript

vue2.0实现列表数据增加和删除

Jun 17 Javascript

vue实现简单计算商品价格

Sep 14 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实现的简单日志写入函数

2015/03/31 PHP

smarty中改进truncate使其支持中文的方法

2016/05/30 PHP

Thinkphp实现短信验证注册功能

2016/10/18 PHP

基于jquery的不规则矩形的排列实现代码

2012/04/16 Javascript

JavaScript调用客户端的可执行文件(示例代码)

2013/11/28 Javascript

node.js中的http.response.setHeader方法使用说明

2014/12/14 Javascript

JavaScript中的getTimezoneOffset()方法使用详解

2015/06/10 Javascript

JS中使用DOM来控制HTML元素

2016/07/31 Javascript

AngularJS指令用法详解

2016/11/02 Javascript

AngularJS学习第一篇 AngularJS基础知识

2017/02/13 Javascript

jQuery实现贪吃蛇小游戏（附源码下载）

2017/03/04 Javascript

vue-cli入门之项目结构分析

2017/04/20 Javascript

浅谈angular.js跨域post解决方案

2017/08/30 Javascript

Angular4编程之表单响应功能示例

2017/12/13 Javascript

vue中改变选中当前项的显示隐藏或者状态的实现方法

2018/02/08 Javascript

JavaScript EventEmitter 背后的秘密完整版

2018/03/29 Javascript

vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

2018/09/19 Javascript

python fabric实现远程操作和部署示例

2014/03/25 Python

Django模板报TemplateDoesNotExist异常(亲测可行)

2020/12/18 Python

python单例模式的应用场景实例讲解

2021/02/24 Python

浏览器实现移动端高性能css3动画(开启gpu加速)

2013/12/23 HTML / CSS

JACK & JONES英国官方网站：欧洲领先的男装生产商

2017/09/27 全球购物

英国领先的男装设计师服装购物网站：Mainline Menswear

2018/02/04 全球购物

ghd官网：英国ghd直发器品牌

2018/05/04 全球购物

Wedgwood英国官方网站：英式精致骨瓷餐具、礼品与生活精品，源于1759年

2019/09/02 全球购物

精美的手工家居和生活用品：Nkuku

2019/11/01 全球购物

数据员岗位职责

2013/11/19 职场文书

秋季婚礼证婚词

2014/01/11 职场文书

趣味体育活动方案

2014/02/08 职场文书

爱国口号

2014/06/19 职场文书

实习生矿工检讨书

2014/10/13 职场文书

教师学期末个人总结

2015/02/13 职场文书

财务稽核岗位职责

2015/04/13 职场文书

涨价通知怎么写

2015/04/23 职场文书

2016年度员工工作表现评语

2015/12/02 职场文书

Python获取江苏疫情实时数据及爬虫分析

2021/08/02 Python