JavaScript 模板存放方法小结

Web开发时常常需要在页面种存放JavaScript需要使用到的html模板片段,这里是我使用过的三种方式,欢迎补充。

1.使用隐藏的div存放
如放一段{{ mustache }}的模板:

{{#items}} {{#first}}
  • {{name}}
  • {{/first}} {{#link}}
  • {{name}}
  • {{/link}} {{/items}}

    刚做web开发那会常使用这种方法来放html模板片段,但这种情况下里面的内容会被页面解析,特别是当img标签在里面的时候,由于src还没有被赋具体的URL,浏览器就会向服务器发一条无意义的请求,导致服务器产生不必要的404日志。

    2.使用隐藏的textarea存放
    后来想了个办法,既然textarea里的内容不会被解析,那可以把模板内容放到隐藏的textarea里。

    
    

    3.使用script标签指定浏览器不认识的type来存放
    再后来,了解到浏览器当遇到不认识的script类型时就不会解析里面的内容,就慢慢习惯将模板内容放在script标签里,赋上一个浏览器不认识的类型(如: text/tpl),这样连display:none的也省了。

    
    

    当然,还有把模板压缩成JS字符串,使用一个js常量的来保存html模板。这种情况下一般需要借助外部工具来压缩成字符串,直接手工处理费时且容易出错。
    -EOF-