Javascript 页面模板化很多人没有使用过的方法

 更新时间:2012年06月05日 22:35:32   作者:  
今天遇到一个问题,这个问题也是我以前遇到的问题,以前的方式,也是大多数人使用的方式。大家可以看看我的文章
从前的方式——我估计也是大多数人使用的方式

比如以下的代码——摘自新浪首页的一段js代码,这种方式也是大多数人使用的方式。



上面的代码,你看完有什么反应?你也许会把+=这种形式改成数组的push形式,有人说push比这种字符链接要快,但是也快不了多少。

如果这种嵌入的html代码很多,你也要这样处理吗?如果修改(添加或者删除)某个html,那么你就要不断的翻代码,找对应的标签,然后在找结束标签,你不觉得麻烦吗?也许有人会这样写(这个是我早期写的,也是我最惯于使用的方式)。

上面的代码,我维护起来也是非常费劲的,很多时候如果ui那边添加了个标签,或者修改了下html结构,那我就头疼了。

页面模板化——全新的方式

这是我最近看了facebook的js代码,偶然间发现以下的方式看起来不错,希望与大家分享。

看我的index.html代码

看我的js代码

维护上面的html代码我们是很容易的,下次无论html代码结构有什么变动,改起来都很方便。

总结

上面的代码有很多问题,大家不要见怪,这个只是我的简易版。

当前的模板只支持简单的变量替换,有很多功能未开发出来,比如if标签,for标签,如果大家有兴趣,可以试着做一下,如果做的比较成功,告知一下。如果能做个类似smarty的开源框架,呵呵,咱们也可以为开源事业做点贡献不是。

作者:穿山甲

相关文章

  • javascript实现链接单选效果的方法

    javascript实现链接单选效果的方法

    这篇文章主要介绍了javascript实现链接单选效果的方法,可实现点击链接改变其背景色的功能,同时可禁用对应链接的跳转,需要的朋友可以参考下
    2015-05-05
  • canvas实现爱心和彩虹雨效果

    canvas实现爱心和彩虹雨效果

    本文主要介绍了canvas实现爱心和彩虹雨效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 原生JS实现动态添加新元素、删除元素方法

    原生JS实现动态添加新元素、删除元素方法

    这篇文章主要介绍了原生js实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 轻松实现jquery手风琴效果

    轻松实现jquery手风琴效果

    这篇文章主要为大家介绍了实现jquery手风琴效果的详细代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 详解JavaScript闭包的优缺点和作用

    详解JavaScript闭包的优缺点和作用

    闭包是指在 JavaScript 中,内部函数可以访问其外部函数作用域中的变量,即使外部函数已经执行完毕,这种特性被称为闭包,本文将给大家介绍一下JavaScript闭包的优缺点和作用,需要的朋友可以参考下
    2023-09-09
  • Bootstrap输入框组件简单实现代码

    Bootstrap输入框组件简单实现代码

    这篇文章主要为大家详细介绍了Bootstrap输入框组件的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 微信小程序实现图片放大预览功能

    微信小程序实现图片放大预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片放大预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 第八篇Bootstrap下拉菜单实例代码

    第八篇Bootstrap下拉菜单实例代码

    这篇文章主要介绍了Bootstrap下拉菜单实例代码的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • LayUi使用switch开关,动态的去控制它是否被启用的方法

    LayUi使用switch开关,动态的去控制它是否被启用的方法

    今天小编就为大家分享一篇LayUi使用switch开关,动态的去控制它是否被启用的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • UniApp使用manifest.json应用配置的超详细教学

    UniApp使用manifest.json应用配置的超详细教学

    这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是应用的配置文件,用于指定应用的名称、图标、权限等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01

最新评论