浅析JavaScript页面模板化方式

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

分类：网站建设 | 2012-06-24 2:01:37 | 浏览(13,113)

21条评论

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

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

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

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

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

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

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

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

看我的index.html代码

看我的js代码

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

总结

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

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

文章来源：川山甲的博客

固定链接：https://www.poorren.com/javascript-push-jtsl-html
文章标签：JavaScript，js模板，页面模板
扫二维码：浅析JavaScript页面模板化方式

浅析JavaScript页面模板化方式

微信打赏
支付宝打赏

已有21条评论

康妮妃
真精神！！！！！！

2016-01-01 12:42 回复
藏章博客
这个说的还是很详细的呢啊

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 回复
穷小子
其实js很好的，所谓网页中的汇编语言嘛。

2012-07-12 04:59 回复
穷小子
其实js很好的，所谓网页中的汇编语言嘛。

2012-07-12 04:59 回复
汽修学校
好，技术贴，学习一下

2012-06-26 22:12 回复
韩版女装
确实看到jS我就烦啊

2012-06-25 21:21 回复
小云子
过来支持一下

2012-06-25 19:07 回复
珠宝网
太技术了，看不懂

2012-06-25 12:07 回复
游客 331
来看看博主，一直关注着。

2012-06-24 23:51 回复
不亦乐乎
只看插图漫画的路过。。。

2012-06-24 19:59 回复
- 穷小子
  好吧。以后常插图，你也常来看。哈哈
  
  2012-06-24 20:29 回复
  - 不亦乐乎
    我经常来，只是大部分时间插不上话灰溜溜的就走了。
    
    2012-06-24 20:31 回复
    - 穷小子
      怪不得我博客没人留言呢。我滴错啊。。
      
      2012-06-24 21:08 回复
- Always.Life
  同上，只看图
  
  2012-06-25 11:50 回复
  - 穷小子
    好吧。欢迎看图。
    
    2012-06-25 12:14 回复
P57减肥药
博主的文章不错

2012-06-24 17:34 回复
蘑菇街包包
学习一下回去给我的网站 http://www.52diu.com/ 试一试

2012-06-24 16:31 回复

朴人博客