深圳网站制作专业品牌! 联灿科技-深圳企业网站专业服务商 加入收藏
用户名: 密码: 注册
深圳市联灿科技有限公司深圳做网站,找联灿! 深圳网站设计热线 深圳网页设计在线咨询
技术交流
网站设计
网站优化
行业动态
 
深圳做网站,找联灿!
深圳市联灿科技有限公司成立于二零零四年,是家专业提供深圳网站制作深圳网页设计深圳网页制作深圳网站设计深圳网站开发、域名注册、虚拟主机、企业邮箱等服务的正规深圳做网站的公司,迄今已累积客户逾千家,在业界具有相当的知名度,在深圳网站建设市场上树立了良好的口碑。
业精于专,值得您的信赖!
销售热线:0755-26955674
查看更多联系方式
网站优化
通过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 指令语法,我们主要用这个语法来调用相关组件文件代码

<!–#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交付物


上一篇:提高网络爬虫访问频率的几个要点
下一篇:如何能实现网站内容的快速收录?

技术交流 最新上线
网站制作中关于图片优化的15个原则
网站进行改版时应该注意哪些方面?
多方面入手有效提升网站的用户体验
谷歌网站管理员博客:五个常见的SEO错误
揭示黑客在社交网站上的五大攻击手法
Foshan Green Pipe Technology 网站制作完成
色源实业有限公司深圳网站制作完成
Dongguan Yicheng Innovation 网站设计完成
鸿翼能科技有限公司深圳网站制作完成
AGS technology limited 深圳网站制作完成
 
网站首页 | 公司简介 | 新闻动态 | 超值套餐 | 经典案例 | 常见问答 | 技术支持 | 联系方式 | 留言反馈
Copyright © 2004-2017 LINKCHANT TECHNOLOGY LTD, All Rights Reserved. 粤ICP备05037094号
联系电话: 0755-26955674  电子邮箱: sales@linkchant.com
联灿科技: 深圳网站制作公司 | 深圳网页设计公司 | 深圳网页制作公司 | 深圳网站设计公司 | 深圳网站建设公司 | 深圳网站开发公司 | 深圳做网站的公司