编程 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中对表单的基本操作代码

Jul 29 Javascript

jQuery中调用WebService方法小结

Mar 28 Javascript

jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍

Oct 21 Javascript

JavaScript常用小技巧小结

Dec 29 Javascript

jQuery如何防止这种冒泡事件发生

Feb 27 Javascript

支持移动端原生js轮播图

Feb 16 Javascript

angular4中关于表单的校验示例

Oct 16 Javascript

jQuery zTree 异步加载添加子节点重复问题

Nov 29 jQuery

Angular数据绑定机制原理

Apr 17 Javascript

JavaScript生成指定范围随机数和随机序列的方法

May 05 Javascript

JavaScript实现的联动菜单特效示例

Jul 08 Javascript

简单实现节流函数和防抖函数过程解析

Oct 08 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中is_null,empty,isset,unset 的区别详细介绍

2013/04/28 PHP

php ci框架中加载css和js文件失败的原因及解决方法

2014/07/29 PHP

PHP管理依赖(dependency)关系工具 Composer 安装与使用

2014/08/18 PHP

php中Session的生成机制、回收机制和存储机制探究

2014/08/19 PHP

Thinkphp微信公众号支付接口

2016/08/04 PHP

PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门

2020/09/13 PHP

JavaScript实现动态增加文件域表单

2009/02/12 Javascript

jquery ajax提交表单数据的两种实现方法

2010/04/29 Javascript

读jQuery之十三添加事件和删除事件的核心方法

2011/08/23 Javascript

基于jquery实现等比缩放图片

2014/12/03 Javascript

IE中document.createElement的iframe无法设置属性name的解决方法

2015/09/14 Javascript

JavaScript程序设计之JS调试

2015/12/09 Javascript

js友好的时间返回函数

2016/08/24 Javascript

JS实现页面进入和返回定位到具体位置

2016/12/08 Javascript

input输入密码变黑点密文的实现方法

2017/01/09 Javascript

JavaScript实现类似淘宝的购物车效果

2017/03/16 Javascript

微信小程序数据统计和错误统计的实现方法

2019/06/26 Javascript

详解vue3.0 diff算法的使用(超详细)

2020/07/01 Javascript

js实现限定区域范围拖拉拽效果

2020/11/20 Javascript

[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭

2014/07/09 DOTA

简介Django框架中可使用的各类缓存

2015/07/23 Python

jupyter安装小结

2016/03/13 Python

windows上彻底删除jupyter notebook的实现

2020/04/13 Python

python 数据类型强制转换的总结

2021/01/25 Python

AmazeUI 缩略图的实现示例

2020/08/18 HTML / CSS

编写一个 C 函数，该函数在一个字符串中找到可能的最长的子字符串，且该字符串是由同一字符组成的

2015/07/23 面试题

超市营业员岗位职责

2013/12/20 职场文书

自我介绍演讲稿

2014/01/15 职场文书

物业保安员岗位职责

2014/03/14 职场文书

品德评语大全

2014/05/05 职场文书

大学自主招生推荐信

2014/05/10 职场文书

篮球比赛口号

2014/06/10 职场文书

市委常委会班子党的群众路线教育实践活动整改方案

2014/10/25 职场文书

golang判断key是否在map中的代码

2021/04/24 Golang

MySql如何将查询的出来的字段进行转换

2022/06/14 MySQL

SqlServer常用函数及时间处理小结

2023/05/08 SQL Server