很多个页面共享页面模板,如何存放和引用模板文件比较好呢?
发布于 9 年前 作者 chapgaga 3852 次浏览 最后一次编辑是 8 年前 来自 问答

1.不想在每个页面中放一份模板,这样有些太乱了,修改也麻烦.

  1. 模板存成3个文件, 每个页面使用 <script template=“template1” src="…/template1.txt"> ,好像这样也是挺麻烦的,而且要发送三个http请求,如果模板数量有10个,这种方案好像也挺难接受的

如果不使用SSI,对服务器端不可控,怎么组织代码比较好呢? 不考虑连接数,只考虑之后代码的可维护性,该如何组织模板文件呢?

有什么比较好的实现方式呢?

<script type="template1">

xxx
</script>
<script type="template2">

xxx2
</script>
<script type="template3">

xxx3
</script>
9 回复

楼主考虑一下用SSI? 一个include搞定。 npm install connect-ssi

@zlbbq 如果只是用http服务器呢?该如何组织文件呢?

@zlbbq 这个项目好像总的下载数还不到200,亲是怎么发现这个包的?

@chapgaga 这个包只是在我们开发和测试时使用，真正上线时前端顶的是Nginx，系统会转而使用nginx的ssi。就include指令来说，connect-ssi和Nginx SSI是兼容的，其他指令未测试。 如果你将Express直接作为HTTP服务器暴露给浏览器，请注意务必使用.shtml作为ssi文件后缀，将它与纯静态html区分开，因为我发现connect-ssi这家伙对可能有ssi指令的文件只会响应200，不会响应304。当然如果前面还有Nginx，Nginx会根据文件是否被修改过而响应200或304.

@zlbbq nginx是将多个文件通过一个连接发送么? 如果Http服务器不支持这种高级功能,该如何组织模板呢?

@chapgaga 楼主的问题通过SSI include可以解决， 在你的HTML的模板区(通常在body最底部)，可以这么定义： <!--# include file="/templates/template_collection_a.html" --> 然后在/templates/template_collection_a中定义页面模板： <textarea id='_xxxTemplate' style='display:none'> </textarea> <textarea id='_xxxTemplate' style='display:none'> </textarea> <textarea id='_xxxTemplate' style='display:none'> </textarea> 这样你的模板文件只有一份，不需要到处修改，而且不会有网页上的多余HTTP请求问题，因为SSI页面只有一次HTTP请求。 关于楼主提到的合并请求，通常应用于js和css的模块化，这些功能多数HTTP服务器不是原生支持的，需要自己写模块，相关资料请百度搜索 "nginx_concat_module”，这个模块是淘宝开源的nginx合并HTTP请求的模块。前端引用的时候，可以将多个js或css合并成一个请求下载： <script src="a.js,b.js,c.js,d.js"></script>，这样一个请求可以同时下载这四个js，css同理。 绝大多数HTTP服务器都支持SSI，可放心使用。

不会用markdown，快来吐槽我的排版。

@zlbbq 把模板放在textarea中比放在script标签中要好些么?

如果你想要做的是前后分离， 我觉得可以考虑将开发阶段使用的服务器和真实环境服务器分开来。 我们目前的做法是：在开发阶段使用支持这种动态合并的服务器，在发布上线之前，将开发阶段完成的页面结果批量生成合并后的文件，然后发布这些结果片段。 只对源代码做版本管理， f2e-server: 现在在用的开发服务器。

回到顶部