通过shtml实现重构网站页面模块化构建

模块化思想现已不再是立异，连续的演变成一种思想模式，在处理各种问题时都会考虑模块化思想

前端重构也现已有各种模块化的思想呈现，结构模块化、款式模块化等等

今天和搭档交流视觉统一化的时分，发现流程中在产出物方面存在一个问题

如下图所示：

大家按照统一的思想过程在执行时 产出物在页面构建的环节，构成了一个聚合，从以UI组件为单位变为了以page为单位的产出物，而之后到了后端研制时，其实Template仍是需求再次分拆，由于这个问题，而产生了更大的交流本钱，降低了整个团队的效率

根据这个问题 我提出了一个处理方法 还算不上处理方案，时间短的处理一下

在页面构建的环境 通过webserver的SSI Include指令 将静态页面也进行模块化，在交给产出物的时分后端研制人员是很清晰的看到module的复用代码，也降低了重构页面时对于统一的ui而产生不同html和css代码的错误率

详细完成如下：

在开发(测试环境)  建立webserver（nginx、apache均可） 然后通过装备文件开启SSI支撑

Apache 开启SSI方式

要使服务器答应SSI，有必要在httpd.conf文件或.htaccess文件中有如下装备：

Options +Includes

告知服务器以答应解析文件中的SSI指令。注意，在大都装备中，多个Options指令会互相覆盖，所以，可能有必要对需求SSI的特定目录运用Options，以确保位于最终并起作用。

并不是一切文件中的SSI指令都会被解析，所以，有必要告知Apache应该解析哪些文件。有两种方法，使Apache解析带有特定文件后缀的任何文件，比如.shtml, 装备如下：

AddType text/html .shtml

AddOutputFilter INCLUDES .shtml

在 Nginx 开启 SSI ，参加以下3行就OK了，可以放在 http, server, 和 location 段都行：

ssi on;

ssi_silent_errors on;

ssi_types text/shtml;

SSI Include 指令语法，咱们主要用这个语法来调用相关组件文件代码

在构建页面时 目录结构可以是

demoproject/ 项目文件夹

|-- aboutus.shtml  综合性页面 包括module调用

|-- index.shtml    综合性页面 包括module调用

|-- other_page.shtml 综合性页面 包括module调用

|-- module  组件文件夹

|   |-- footer.html  组件文件

|   |-- header.html  组件文件

|   `-- other_module.html 组件文件

|-- images 其他静态文件

|-- js 其他静态文件

`-- style 其他静态文件

这样 咱们构成的综合性页面的代码中会包括module调用，在咱们每次对通用组建修改时，只需求修改组建文件即可

如下图，因为咱们之前在webserver装备了SSI支撑，所以咱们可以实时预览作用

这样，除了在开发时便利了咱们自己，咱们的交给物也可以表现模块化思想，便利后端人员处理templates

一起我也用python写了一个开源项目，便利运用shtml这种方式构建页面的搭档 产出传统html交给物