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

js跟随滚动条滚动浮动代码

Dec 31 Javascript

浅析onsubmit校验表单时利用ajax的return false无效问题

Jul 10 Javascript

js拖动div 当鼠标移动时整个div也相应的移动

Nov 21 Javascript

jQuery的text()方法用法分析

Dec 20 Javascript

jQuery的animate函数实现图文切换动画效果

May 03 Javascript

Layui数据表格之获取表格中所有的数据方法

Aug 20 Javascript

elementUI select组件默认选中效果实现的方法

Mar 25 Javascript

JavaScript中的一些实用小技巧总结

Apr 07 Javascript

微信小程序缓存过期时间的使用详情

May 12 Javascript

ElementUI Tag组件实现多标签生成的方法示例

Jul 08 Javascript

Js跳出两级循环方法代码实例

Sep 22 Javascript

JavaScript 中判断变量是否为数字的示例代码

Oct 22 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高级编程-函数-郑阿奇

2011/07/04 PHP

PHP中Session引起的脚本阻塞问题解决办法

2014/04/08 PHP

php中print(),print_r(),echo()的区别详解

2014/12/01 PHP

PHP实现自动发送邮件功能代码(qq 邮箱)

2017/08/18 PHP

PHP使用PDO调用mssql存储过程的方法示例

2017/10/07 PHP

javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

2013/01/09 Javascript

js函数名与form表单元素同名冲突的问题

2014/03/07 Javascript

关于onchange事件在IE和FF下的表现及解决方法

2014/03/08 Javascript

浅析Node在构建超媒体API中的作用

2014/07/30 Javascript

Javascript快速排序算法详解

2014/12/03 Javascript

JavaScript使用setTimeout实现延迟弹出警告框的方法

2015/04/07 Javascript

JavaScript DOM 学习总结(五)

2015/11/24 Javascript

JavaScript导航脚本判断当前导航

2016/07/12 Javascript

微信小程序开发(一) 微信登录流程详解

2017/01/11 Javascript

原生JS京东轮播图代码

2017/03/22 Javascript

微信小程序实现的一键复制功能示例

2019/04/24 Javascript

详解Vue demo实现商品列表的展示

2019/05/07 Javascript

基于jquery ajax的多文件上传进度条过程解析

2019/09/11 jQuery

python之文件的读写和文件目录以及文件夹的操作实现代码

2016/08/28 Python

python链接oracle数据库以及数据库的增删改查实例

2018/01/30 Python

python保存文件方法小结

2018/07/27 Python

python利用pandas将excel文件转换为txt文件的方法

2018/10/23 Python

Python 支持向量机分类器的实现

2020/01/15 Python

python中slice参数过长的处理方法及实例

2020/12/15 Python

CSS3 3D立方体效果示例－transform也不过如此

2016/12/05 HTML / CSS

澳大利高级泳装品牌：Bondi Born

2018/05/23 全球购物

新西兰廉价汽车租赁：Snap Rentals

2018/09/14 全球购物

ORACLE十问

2015/04/20 面试题

手术室护士自我鉴定

2013/10/14 职场文书

北京奥运会主题口号

2014/06/13 职场文书

农民工工资保障承诺书

2015/05/04 职场文书

python获取淘宝服务器时间的代码示例

2021/04/22 Python

浅析Python实现DFA算法

2021/06/26 Python

TV动画《史上最强大魔王转生为村民A》番宣CM公布

2022/04/01 日漫

python实现一个简单的贪吃蛇游戏附代码

2022/06/28 Python

输入框跟随文字内容适配宽实现示例

2022/08/14 Javascript