东大官网开发记录


参与 东北大学官网 的开发工作,记录一下工作完成之后的一些收获。

采用HTML5 + CSS3技术

在项目初期,我们考虑到应该提升用户的浏览体验,团队经过调研、分析和讨论后决定采用一种名为“优雅降级”开发方式,即以现代浏览器为开发基准,后期再通过编写shim的方式对低版本浏览器进行兼容。这种做法一来为用户提供了更加良好的视觉和交互体验,二来也保证了广大用户即便使用低版本的浏览器,也能畅通无阻。

采用sea.js模块加载器方案

新版的网站采用了模块加载器的方式实现了JavaScript代码的模块化和规范化,弥补了前端代码全局污染的缺陷。该方案同时也为团队开发带来了便捷,提高了底层代码的复用性和业务逻辑的抽象能力。

屏幕适配良好

对于屏幕的适配,我们采用css3的media queries功能分别对市面各种常见的屏幕尺寸进行了响应式适配,实现了低分辨率、普通分辨率和高分辨率屏幕的伸缩适应,最大程度满足了用户的浏览体验。对于低版本浏览器,我们同样通过shim的方式对其进行了分辨率适配。

兼容性强

官网作为一个对外的信息平台,我们必须保证网页的兼容性。经过团队不断努力,我们实现了市面近乎所有浏览器的兼容性,包括 Chrome, Firefox, Safari, Opera, IE, 360浏览器, 搜狗浏览器,猎豹浏览器等。

RESTful API架构模式

网站的数据通信采用了近年非常流行的RESTful API架构,代替了旧版的模板与框架结构。这种架构方式降低了系统间的依赖,提高了接口的灵活性和扩展性,同时减少了客户端的请求次数,提高网页加载速度。

全站静态化方案

考虑到网站整体的安全性,我们沿用了旧版静态化的方案。这种做法极大地提高了安全性和服务器响应速度,实现更快的浏览器体验,并且也有利于搜索引擎的收录。

测试覆盖率全

为了保证网站良好的适配和兼容,我们进行了多次全面的测试。内容包括各类浏览器及其主流版本的兼容性测试,各类尺寸的屏幕响应式测试,组件的加载容错性测试以及代码review等。

规范化的开发流程

在开发期间我们进行了结构的设计,前端使用sea.js作为模块加载器,开发过程引入了grunt构建工具,采用sass预处理工具进行css编写,本地使用connect启动开发服务器,grunt-watch进行自动编译,最后使用include-replace工具对代码进行批量打包并同步到远程服务器。整个过程我们统一了开发工具链,降低团队之间协作的成本,提高了开发效率。

采用git协作开发,代码开源

此次项目一个亮点即采用了github开源社区进行代码托管,一方面为了团队协作,另一方面也希望有人能参与我们的开发给我们提供良好的建议。

一句话总结:经过这次项目,学到了不少兼容性的知识,有收获!