浅析JavaScript页面模板化方式打赏

今天遇到一个问题,这个问题也是我以前遇到的问题,以前的方式,也是大多数人使用的方式。大家可以看看我的文章。

从前的方式——我估计也是大多数人使用的方式

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

浅析JavaScript页面模板化方式

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

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

浅析JavaScript页面模板化方式

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

浅析JavaScript页面模板化方式
页面模板化——全新的方式

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

看我的index.html代码

浅析JavaScript页面模板化方式

看我的js代码

浅析JavaScript页面模板化方式

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

浅析JavaScript页面模板化方式

总结

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

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

文章来源:川山甲的博客

浅析JavaScript页面模板化方式
文章《浅析JavaScript页面模板化方式》二维码
  • 微信打赏
  • 支付宝打赏

已有21条评论

  1. 康妮妃

    真精神!!!!!!

    2016-01-01 12:42 回复
  2. 藏章博客

    这个说的还是很详细的呢啊

    2012-08-11 13:59 回复
    • 朴人博客

      这是在cnblogs转的

      2012-08-11 16:42 回复
      • 藏章博客

        呵呵 ,已经做了你的链接,交换一下,好访问你的站

        2012-08-11 17:53 回复
        • 朴人博客

          不好意思,最近权重降的厉害,暂时真不做了

          2012-08-11 18:48 回复
          • 藏章博客

            呵呵,没关系,我帮你做就行了,我不在乎这个,主要喜欢编程交流的

            2012-08-12 09:39 回复
  3. 穷小子

    其实js很好的,所谓网页中的汇编语言嘛。

    2012-07-12 04:59 回复
  4. 穷小子

    其实js很好的,所谓网页中的汇编语言嘛。

    2012-07-12 04:59 回复
  5. 汽修学校

    好,技术贴,学习一下

    2012-06-26 22:12 回复
  6. 韩版女装

    确实看到jS我就烦啊

    2012-06-25 21:21 回复
  7. 小云子

    过来支持一下

    2012-06-25 19:07 回复
  8. 珠宝网

    太技术了,看不懂

    2012-06-25 12:07 回复
  9. 游客 331

    来看看博主,一直关注着。

    2012-06-24 23:51 回复
  10. 不亦乐乎

    只看插图漫画的路过。。。

    2012-06-24 19:59 回复
    • 穷小子

      :neutral: 好吧。以后常插图,你也常来看。哈哈

      2012-06-24 20:29 回复
      • 不亦乐乎

        我经常来,只是大部分时间插不上话灰溜溜的就走了。

        2012-06-24 20:31 回复
        • 穷小子

          怪不得我博客没人留言呢。我滴错啊。。

          2012-06-24 21:08 回复
    • Always.Life

      同上,只看图

      2012-06-25 11:50 回复
  11. P57减肥药

    博主的文章不错

    2012-06-24 17:34 回复
  12. 蘑菇街包包

    学习一下 回去给我的网站 http://www.52diu.com/ 试一试

    2012-06-24 16:31 回复

(必填)

(必填)

(可选)