通过shtml实现重构页面模块化构建—实现交付物模块化

模块化头脑已经不再是创新，延续的演酿成一种思想模式，在处理赏罚各类题目时城市思量模块化头脑

前端重构也已经有各类模块化的头脑呈现，布局模块化、样式模块化等等

本日和同事雷同视觉同一化的时辰，发明流程中在产出物方面存在一个题目
如下图所示：

各人凭证同一的思想进程在执行时 产出物在页面构建的环节，形成了一个聚合，从以UI组件为单元变为了以page为单元的产出物，而之后到了后端研发时，着实Template照旧必要再次分拆，因为这个题目，而发生了更大的雷同本钱，低落了整个团队的服从

基于这个题目 我提出了一个办理要领 还算不上办理方案，短暂的办理一下

在页面构建的情形 通过webserver的SSI Include指令 将静态页面也举办模块化，在交付产出物的时辰后端研发职员是很清楚的看到module的复用代码，也低落了重构页面时对付同一的ui而发生差异html和css代码的错误率

详细实现如下：

在开拓(测试情形)  成立webserver（nginx、apache均可） 然后通过设置文件开启SSI支持

Apache 开启SSI方法 http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html

要使处事器应承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 指令语法，我们首要用这个语法来挪用相干组件文件代码

<!–#include virtual=”文件路径” –>

在构建页面时 目次布局可所以

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交付物

先容：替代shtml中include内容为真实挪用内容 并在同级目次天生.html文件 给重构团队在构建页面时行使

行使要领：

Usage: python shtml2html.py path 支持文件和目次（递归处理赏罚）

这是我今朝的办理要领，正在试行中，小团队还没那么智能化，但愿能给各人提供一些思绪

假如你有更好的办理方案也请汇报我，多交换。

作者：刘钢 博文地点：http://www.iamued.com/qianduan/1998.html

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!