编程 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入门教程(2) JS基础知识

Jan 31 Javascript

学习ExtJS 访问容器对象

Oct 07 Javascript

JS input文本框禁用右键和复制粘贴功能的代码

Apr 15 Javascript

js编码、解码函数介绍及其使用示例

Sep 05 Javascript

JQuery对id中含有特殊字符的转义处理示例

Sep 06 Javascript

浅谈JavaScript中的作用域和闭包问题

Jul 07 Javascript

基于jquery实现下拉框美化特效

Feb 02 Javascript

基于JavaScript实现表单密码的隐藏和显示出来

Mar 02 Javascript

json数据格式常见操作示例

Jun 13 Javascript

使用Vue.set()方法实现响应式修改数组数据步骤

Nov 09 Javascript

JS函数参数的传递与同名参数实例分析

Mar 16 Javascript

利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

Apr 13 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 登录完成后如何跳转上一访问页面

2014/01/14 PHP

ajax+php控制所有后台函数调用

2015/07/15 PHP

PHP实现数组转JSon和JSon转数组的方法示例

2018/06/14 PHP

js自定义事件代码说明

2011/01/31 Javascript

2012年开发人员的16款新鲜的jquery插件体验分享

2012/12/28 Javascript

Jquery post传递数组方法实现思路及代码

2013/04/28 Javascript

javascript屏蔽右键代码

2014/05/15 Javascript

javascript的函数作用域

2014/11/12 Javascript

jquery实现焦点图片随机切换效果的方法

2015/03/12 Javascript

jQuery实现带有上下控制按钮的简单多行滚屏效果代码

2015/09/04 Javascript

JavaScript使用DeviceOne开发实战（一) 配置和起步

2015/12/01 Javascript

深入浅析JavaScript中with语句的理解

2016/05/12 Javascript

JS敏感词过滤代码

2016/12/23 Javascript

vue2滚动条加载更多数据实现代码

2017/01/10 Javascript

聊聊Vue.js的template编译的问题

2017/10/09 Javascript

Javascript实现购物车功能的详细代码

2018/05/08 Javascript

微信小程序实现拍照画布指定区域生成图片

2019/07/18 Javascript

介绍Python中的__future__模块

2015/04/27 Python

Python中文字符串截取问题

2015/06/15 Python

Python写的一个简单监控系统

2015/06/19 Python

python实现多线程的方式及多条命令并发执行

2016/06/07 Python

Python编程实现及时获取新邮件的方法示例

2017/08/10 Python

详解Python if-elif-else知识点

2018/06/11 Python

python flask实现分页的示例代码

2018/08/02 Python

python反编译学习之字节码详解

2019/05/19 Python

Pycharm连接远程服务器过程图解

2020/04/30 Python

Cinque网上商店：德国服装品牌

2019/03/17 全球购物

荷兰最大的多品牌男装连锁店：Adam Brandstore

2019/12/31 全球购物

应届生新闻编辑求职信

2013/11/19 职场文书