编程 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中动态添加事件(绑定事件)的代码

Jan 09 Javascript

Raphael带文本标签可拖动的图形实现代码

Feb 20 Javascript

jquery更换文章内容与改变字体大小代码

Sep 30 Javascript

Jquery 切换不同图片示例代码

Dec 05 Javascript

JS图片自动轮换效果实现思路附截图

Apr 30 Javascript

node.js中的fs.readFileSync方法使用说明

Dec 15 Javascript

javascript中this的四种用法

May 11 Javascript

JQuery和PHP结合实现动态进度条上传显示

Nov 23 Javascript

js继承实现方法详解

Dec 16 Javascript

jquery点赞功能实现代码点个赞吧!

May 29 jQuery

vue: WebStorm设置快速编译运行的方法

Oct 18 Javascript

用Cordova打包Vue项目的方法步骤

Feb 02 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文章采集URL补全函数(FormatUrl)

2012/08/02 PHP

你可能不知道PHP get_meta_tags()函数

2014/05/12 PHP

分享一段PHP制作的中文拼音首字母工具类

2014/12/11 PHP

Yii2数据库操作常用方法小结

2017/05/04 PHP

PHP面向对象类型约束用法分析

2019/06/12 PHP

JavaScript语言中的Literal Syntax特性分析

2007/03/08 Javascript

javascript事件问题

2009/09/05 Javascript

图片动画横条广告带上下滚动可自定义图片、链接等等

2013/10/20 Javascript

JS+CSS3实现超炫的散列画廊特效

2016/07/16 Javascript

浅谈jQuery添加的HTML,JS失效的问题

2016/10/05 Javascript

jQuery实现导航回弹效果

2017/02/27 Javascript

jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

2017/04/04 jQuery

ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

2017/05/24 Javascript

浅谈super-vuex使用体验

2018/06/25 Javascript

详解nuxt路由鉴权(express模板)

2018/11/21 Javascript

微信小程序实现圆形进度条动画

2020/11/18 Javascript

vue通过过滤器实现数据格式化

2020/07/20 Javascript

Vue使用CDN引用项目组件，减少项目体积的步骤

2020/10/30 Javascript

[01:36:17]DOTA2-DPC中国联赛正赛 Ehome vs iG BO3 第一场 1月31日

2021/03/11 DOTA

启动targetcli时遇到错误解决办法

2017/10/26 Python

python+selenium实现QQ邮箱自动发送功能

2019/01/23 Python

使用Flask-Cache缓存实现给Flask提速的方法详解

2019/06/11 Python

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

2020/01/15 Python

python实现图像随机裁剪的示例代码

2020/12/10 Python

HTML5 WebGL 实现民航客机飞行监控系统

2019/07/25 HTML / CSS

DJI全球：DJI Global

2021/03/15 全球购物

2014年公司迎新年活动方案

2014/02/24 职场文书

终止劳动合同协议书

2014/04/14 职场文书

《大禹治水》教学反思

2014/04/27 职场文书

校园演讲稿汇总

2014/05/21 职场文书

抵押贷款承诺书

2014/05/30 职场文书

社保转移委托书范本

2014/10/08 职场文书

党的群众路线批评与自我批评发言稿

2014/10/16 职场文书

2014年科技工作总结

2014/11/26 职场文书

办公经费申请报告

2015/05/15 职场文书

实例详解Python的进程,线程和协程

2022/03/13 Python