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

javascript 动态调整图片尺寸实现代码

Dec 28 Javascript

JQuery入门—JQuery程序的代码风格详细介绍

Jan 03 Javascript

JavaScript极简入门教程（一）：基础篇

Oct 25 Javascript

浅谈jQuery中height与width

Jul 06 Javascript

ionic隐藏tabs的方法

Aug 29 Javascript

bootstrap响应式表格实例详解

May 15 Javascript

老生常谈Bootstrap媒体对象

Jul 06 Javascript

微信小程序表单弹窗实例

Jul 19 Javascript

React 项目迁移 Webpack Babel7的实现

Sep 12 Javascript

vue计算属性computed、事件、监听器watch的使用讲解

Jan 21 Javascript

vue的$http的get请求要加上params操作

Nov 12 Javascript

如何用JS实现简单的数据监听

May 06 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 GD绘制24小时柱状图

2008/06/28 PHP

PHP脚本中include文件出错解决方法

2008/11/20 PHP

深入extjs与php参数交互的详解

2013/06/25 PHP

Smarty foreach控制循环次数的一些方法

2015/07/01 PHP

Aster vs Newbee BO5 第三场2.19

2021/03/10 DOTA

深入认识JavaScript中的函数

2007/01/22 Javascript

ModelDialog JavaScript模态对话框类代码

2011/04/17 Javascript

用javascript作一个通用向导说明

2011/08/30 Javascript

基于jquery实现的定时显示与隐藏div广告的实现代码

2013/08/22 Javascript

js/jQuery简单实现选项卡功能

2014/01/02 Javascript

jquery清空表单数据示例分享

2014/02/13 Javascript

JavaScript监听和禁用浏览器回车事件实例

2015/01/31 Javascript

使用pjax实现无刷新更改页面url

2015/02/05 Javascript

JS实现同一个网页布局滑动门和TAB选项卡实例

2015/09/23 Javascript

JavaScript设计模式经典之命令模式

2016/02/24 Javascript

JavaScript中的Array 对象（数组对象）

2016/06/02 Javascript

5分钟打造简易高效的webpack常用配置

2017/07/04 Javascript

vue 弹窗时监听手机返回键关闭弹窗功能(页面不跳转)

2019/05/10 Javascript

Vue中避免滥用this去读取data中数据

2021/03/02 Vue.js

python抓取网页中的图片示例

2014/02/28 Python

仅用50行Python代码实现一个简单的代理服务器

2015/04/08 Python

Python编写电话薄实现增删改查功能

2016/05/07 Python

python 每天如何定时启动爬虫任务(实现方法分享)

2018/05/21 Python

Python中asyncio与aiohttp入门教程

2018/10/16 Python

Python 模拟动态产生字母验证码图片功能

2019/12/24 Python

使用keras实现孪生网络中的权值共享教程

2020/06/11 Python

树莓派4B安装Tensorflow的方法步骤

2020/07/16 Python

英国家喻户晓的高街品牌：River Island

2017/11/28 全球购物

Java的接口和C++的虚类的相同和不同处

2014/03/27 面试题

机械设计制造专业个人求职信

2013/09/25 职场文书

大学生个人学习总结

2015/02/15 职场文书

宣传稿格式范文

2015/07/23 职场文书

银行求职信范文

2019/05/13 职场文书

个人落户申请书怎么写?

2019/06/28 职场文书

Redis 哨兵集群的实现

2021/06/18 Redis

小喇叭开始广播了! 四十多年前珍贵老照片

2022/05/09 无线电