编程 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调用wcf并展示出数据的方法

Jul 07 Javascript

巧用jquery解决下拉菜单被Div遮挡的相关问题

Feb 13 Javascript

jquery中map函数与each函数的区别实例介绍

Jun 23 Javascript

JS 实现列表与多选框选择附预览动画

Oct 29 Javascript

几种经典排序算法的JS实现方法

Mar 25 Javascript

移动端横屏的JS代码(beta)

May 16 Javascript

js实现5秒倒计时重新发送短信功能

Feb 05 Javascript

Node.js利用debug模块打印出调试日志的方法

Apr 25 Javascript

Vue之Watcher源码解析（2）

Jul 19 Javascript

vue设置导航栏、侧边栏为公共页面的例子

Nov 01 Javascript

jquery轮播图插件使用方法详解

Jul 31 jQuery

ant design vue嵌套表格及表格内部编辑的用法说明

Oct 28 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.ini 中文版

2006/10/28 PHP

关于PHP堆栈与列队的学习

2013/06/21 PHP

php根据日期判断星座的函数分享

2014/02/13 PHP

在laravel框架中使用model层的方法

2019/10/08 PHP

根据邮箱的域名跳转到相应的登录页面的代码

2012/02/27 Javascript

使用Math.floor与Math.random取随机整数的方法详解

2013/05/07 Javascript

js 控制图片大小核心讲解

2013/10/09 Javascript

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

2013/10/11 Javascript

巧用局部变量提升javascript性能

2014/02/24 Javascript

jQuery如何获取同一个类标签的所有值(默认无法获取)

2014/09/25 Javascript

JavaScript中的变量定义与储存介绍

2014/12/31 Javascript

Angular异步变同步处理方法

2018/08/13 Javascript

vue左侧菜单,树形图递归实现代码

2018/08/24 Javascript

vue.js实现简单购物车功能

2020/05/30 Javascript

vue使用nprogress加载路由进度条的方法

2020/06/04 Javascript

node使用async_hooks模块进行请求追踪

2021/01/28 Javascript

[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25

2020/11/26 DOTA

linux系统使用python监测系统负载脚本分享

2014/01/15 Python

进一步探究Python的装饰器的运用

2015/05/05 Python

Django视图之ORM数据库查询操作API的实例

2017/10/27 Python

python 简单备份文件脚本v1.0的实例

2017/11/06 Python

详解Python字典小结

2018/10/20 Python

使用python打印十行杨辉三角过程详解

2019/07/10 Python

python修改FTP服务器上的文件名

2019/09/11 Python

使用python实现kNN分类算法

2019/10/16 Python

python selenium循环登陆网站的实现

2019/11/04 Python

python 项目目录结构设置

2020/02/14 Python

Willer台湾：日本高速巴士/夜行巴士预约

2017/07/09 全球购物

小米乌克兰网上商店：Xiaomi.UA

2019/10/29 全球购物

艺术专业大学生自我评价

2013/09/22 职场文书

咖啡店自主创业商业计划书

2014/01/22 职场文书

执行力心得体会范文

2016/01/11 职场文书

python 三边测量定位的实现代码

2021/04/22 Python

CSS完成视差滚动效果

2021/04/27 HTML / CSS

background-position百分比原理详解

2021/05/08 HTML / CSS

分享Python异步爬取知乎热榜

2022/04/12 Python