您好,欢迎来到大连远拓信息技术有限公司官网!主要业务:大连网站建设,大连网络推广,大连网站推广,短视频代运营。

大连网站推广
您当前的位置 : 首 页 > 新闻中心 > 行业资讯

联系我们

大连网站建设,大连网络推广,大连网站推广,大连远拓信息技术有限公司

全国统一服务热线

4000-6969-11

联系人:练先生

电    话:15840844863

邮    箱:1933889542@qq.com

网    址:www.dlyuantuo.cn

地    址:辽宁省大连市甘井子区华南红星美凯龙5号25-15

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

2024-07-04

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


前端重构也现已有各种模块化的思维呈现,结构模块化、样式模块化等等


今天和伙伴交流视觉共同化的时分,发现流程中在产出物方面存在一个问题

1592209601114885.jpg


咱们依照共同的思维进程在执行时 产出物在页面构建的环节,构成了一个聚合,从以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交给物


标签

最近浏览:

联系我们

tel.png公司服务热线

15840844863

address.png 公司地址

辽宁省大连市甘井子区红星国际广场5号楼2515