您好,欢迎来到大连远拓信息技术有限公司官网!主要业务:大连网站建设,大连网络推广,大连网站推广,短视频代运营。
模块化思维现已不再是立异,接连的演变成一种思维方式,在处理各种问题时都会考虑模块化思维
前端重构也现已有各种模块化的思维呈现,结构模块化、样式模块化等等
今天和伙伴交流视觉共同化的时分,发现流程中在产出物方面存在一个问题
咱们依照共同的思维进程在执行时 产出物在页面构建的环节,构成了一个聚合,从以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交给物
公司服务热线
15840844863
公司地址
辽宁省大连市甘井子区红星国际广场5号楼2515