通过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交给物