编程 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 另一种图片滚动切换效果思路

Apr 20 Javascript

js中replace的用法总结

Dec 27 Javascript

javascript如何判断输入的url是否正确

Apr 11 Javascript

express的中间件basicAuth详解

Dec 04 Javascript

浅析jQuery Ajax通用js封装

Jun 22 Javascript

JavaScript暂停和继续定时器的实现方法

Jul 18 Javascript

jQuery DateTimePicker 日期和时间插件示例

Jan 22 Javascript

JavaScript中如何判断一个值的类型

Sep 15 Javascript

vue2.0 datepicker使用方法

Feb 04 Javascript

VsCode与Node.js知识点详解

Sep 05 Javascript

解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

Feb 09 Javascript

AngularJS实现多级下拉框

Mar 25 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

用session做客户验证时的注意事项

2006/10/09 PHP

用phpmyadmin更改mysql5.0登录密码

2008/03/25 PHP

防止用户利用PHP代码DOS造成用光网络带宽

2011/03/01 PHP

简单介绍PHP非阻塞模式

2016/03/03 PHP

关于PHP文件的自动运行方法分析

2016/05/13 PHP

PHP mkdir创建文件夹实现方法解析

2020/11/13 PHP

ajax更新数据后，jquery、jq失效问题

2011/03/16 Javascript

优化javascript的执行效率一些方法总结

2013/12/25 Javascript

jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

2015/03/25 Javascript

举例说明如何为JavaScript的方法参数设置默认值

2015/11/17 Javascript

jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

2016/08/17 Javascript

Bootstrap中定制LESS-颜色及导航条(推荐)

2016/11/21 Javascript

微信小程序底部导航栏目开发资料

2016/12/05 Javascript

jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承

2016/12/06 Javascript

js实现图片轮播效果学习笔记

2017/07/26 Javascript

详解Vue底部导航栏组件

2019/05/02 Javascript

ES6 Proxy实现Vue的变化检测问题

2019/06/11 Javascript

JavaScript设计模式--简单工厂模式定义与应用案例详解

2020/05/23 Javascript

python发送arp欺骗攻击代码分析

2014/01/16 Python

Python Tkinter简单布局实例教程

2014/09/03 Python

python根据出生年份简单计算生肖的方法

2015/03/27 Python

浅谈Python用QQ邮箱发送邮件时授权码的问题

2018/01/29 Python

推荐10款最受Python开发者欢迎的Python IDE

2018/09/16 Python

Tensorflow加载Vgg预训练模型操作

2020/05/26 Python

css3 盒模型以及box-sizing属性全面了解

2016/09/20 HTML / CSS

HTML页面中添加Canvas标签示例

2015/01/01 HTML / CSS

关于h5中的fetch方法解读(小结)

2017/11/15 HTML / CSS

个人评价范文分享

2014/01/11 职场文书

社区安全检查制度

2014/02/03 职场文书

模具专业求职信

2014/06/26 职场文书

一份教室追逐打闹的检讨书

2014/09/27 职场文书

抗洪救灾标语

2014/10/08 职场文书

乡镇三严三实学习心得体会

2014/10/13 职场文书

党员公开承诺书2015

2015/01/21 职场文书

ORM模型框架操作mysql数据库的方法

2021/07/25 MySQL

剑指Offer之Java算法习题精讲二叉树的构造和遍历

2022/03/21 Java/Android