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

在html页面上拖放移动标签

Jan 08 Javascript

基于jquery的一个浮动框(扩展性比较好 )

Aug 27 Javascript

JavaScript中的正则表达式简明总结

Apr 04 Javascript

JavaScript 数组some()和filter()的用法及区别

May 20 Javascript

JavaScript和jQuery获取input框的绝对位置实现方法

Oct 13 Javascript

JS实现搜索关键词的智能提示功能

Jul 07 Javascript

JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

Aug 10 Javascript

angular中ui calendar的一些使用心得(推荐)

Nov 03 Javascript

微信小程序Page中data数据操作和函数调用方法

May 08 Javascript

JS前端知识点运算符优先级，URL编码与解码，String，Math，arguments操作整理总结

Jun 27 Javascript

微信小程序判断页面是否从其他页面返回的实例代码

Jul 03 Javascript

ElementUI中el-tree节点的操作的实现

Feb 27 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 4.2书写安全的脚本

2006/10/09 PHP

PHP5 安装方法

2007/01/15 PHP

浅析十款PHP开发框架的对比

2013/07/05 PHP

is_uploaded_file函数引发的不能上传文件问题

2013/10/29 PHP

Laravel框架实现定时Task Scheduling例子

2019/10/22 PHP

[HTML/CSS/Javascript]WWTJS

2007/09/25 Javascript

基于PHP+Jquery制作的可编辑的表格的代码

2011/04/10 Javascript

基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）

2012/07/31 Javascript

JS保留两位小数四舍五入函数的小例子

2013/11/20 Javascript

javascript轻松实现当鼠标移开时已弹出子菜单自动消失

2013/12/29 Javascript

jQuery选择器全面总结

2014/01/06 Javascript

jquery网页回到顶部效果(图标渐隐,自写)

2014/06/16 Javascript

JavaScript简单修改窗口大小的方法

2015/08/03 Javascript

js验证真实姓名与身份证号是否匹配

2015/10/13 Javascript

JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

2016/01/26 Javascript

jQuery插件扩展测试实例

2016/06/21 Javascript

Angular外部使用js调用Angular控制器中的函数方法或变量用法示例

2016/08/05 Javascript

原生js实现放大镜特效

2017/03/08 Javascript

微信小程序 request接口的封装实例代码

2017/04/26 Javascript

浅谈VUE中演示v-for为什么要加key

2020/01/16 Javascript

解决vue项目中出现Invalid Host header的问题

2020/11/17 Javascript

python中mechanize库的简单使用示例

2014/01/10 Python

Python之eval()函数危险性浅析

2014/07/03 Python

浅析AST抽象语法树及Python代码实现

2016/06/06 Python

python一键升级所有pip package的方法

2017/01/16 Python

python 使用 requests 模块发送http请求的方法

2018/12/09 Python

Python中利用LSTM模型进行时间序列预测分析的实现

2019/07/26 Python

Python自带的IDE在哪里

2020/07/01 Python

python 使用xlsxwriter循环向excel中插入数据和图片的操作

2021/01/01 Python

jupyter notebook指定启动目录的方法

2021/03/02 Python

Dockers鞋官网：Dockers Shoes

2018/11/13 全球购物

法制宣传月活动总结

2014/04/29 职场文书

2015年幼师工作总结

2015/04/28 职场文书

关于实现中国梦的心得体会

2016/01/05 职场文书

Python实现智慧校园自动评教全新版

2021/06/18 Python

python自动化测试通过日志3分钟定位bug

2021/11/20 Python