野狗科技官网项目(https://www.wilddog.com/)
工作职责: 负责前端项目页面开发,项目维护、迭代升级。和设计产品商定页面动画效果、视觉展示和后端工程师联调接口。
项目描述: 野狗官网项目经历了一个大的迭代升级。
1.0 版本:之前由我开发前端页面,写 css 和 JQuery 后交由后端工程师用 jsp 套页面上线。
2.0 版本: 前后端进行了分离,前端采用了 Express 应用开发框架,hbs 作为渲染引擎、
gulp 作为构建工具,我负责了前端的几乎全部的重构工作,其中自己写了 gulp 前端构建任务和写了上到测试机环境的 shell 脚本,用 Travis ci 工具执行脚本自动把 gitlab 上的代码部署到预发布环境。另外采用了多域名分发技术,大大减少了 http 的请求时间,加快了页面的加载速度。
Gulp 主要执行的任务有:
1、压缩图片,加快页面加载速度。
2、用 scss 模块将修改保存后的 scss 文件转为 css 文件,加快开发速度。
3、用 font 模块将特殊字体进行裁剪,加快页面加载速度。
4、合并 css 和 js 文件,减少 http 请求
5、给静态文件生成 hash 戳,解决改动的静态文件缓存的问题
6、用 Browsersync 模块让浏览器实时、快速响应文件更改。
7、cheerio 模块抓取页面元素,动态插入官网页面。
2015.10 - 2016.3 野狗科技文档项目(https://docs.wilddog.com/)
工作职责: 负责文档项目的搭建,更新维护,功能升级。
项目描述: 野狗的文档项目也经历了 1.0 和 2.0 的版本,1.0 版本为
Raneto+express+markdown 架构,后来因为产品设计前期规划不合理,导致后面的开发积重难返,所以 2.0 重构版本是用了 hexo+markdown+gulp 的架构方案。
我主要的工作内容是:
1. hexo 选用主题后,对项目进行 UI 修改。
2. 实现用野狗 sdk 对下载地址进行版本控制的逻辑。
3. 模板文件中间件开发(左侧导航、底部翻页)等。
4. 全局搜索逻辑的开发。
5. 用 sessionStorage 本地存储技术实现记住用户点击过的页面。
2016.6 - 2016.10 野狗科技控制台项目(https://www.wilddog.com/console/)
工作职责: 负责野狗控制台项目的重构、迭代升级工作。
项目描述: 控制台项目是野狗科技给用户使用和配置的,里面涉及大量的数据展示和操作的 步骤,目前的前端架构还是和官网一样的架构。里面所涉及的技术选项有 echarts 做图表展示, laydate 作为日期选择的控件,ace 作为代码编辑的控件,clipboard 控件实现用户直接点击 复制等等。
我主要的工作内容是:
1. 作为项目负责人负责前端项目的搭建,所用的架构还是 Express 作为应用开发框架。
2. 因为当时控制台项目和官网不是一个域名,要验证用户的身份服务端是不能取到 cookie 的, 所以当时我就和服务端配合使用 iframe+postMessage 的方式,取到用户的 cookie 再用
ajax 向服务端请求用户的基本信息。
3. 实现页面 jstree 的功能,此功能主要是实时监听 websockets 返回到页面的数据变化,然后页面实时更新。
4. 实现日历控件。日历控件是我用原生 js 实现的,主要配合用 ajax 向服务端获取数据后,展示野狗科技公司的活动消息的。
5. 因为用户需要大量查询数据列表,我在实现了数据列表的基础上,配合 laydate 等控件给用户选择日期后,重新获取数据渲染到页面中。
6. 全栈用了 dns-prefetch,对常用网站进行 dns 预获取,加快页面打开速度。
7. 配合设计师用 svg 图片,将 svg 代码分组,配合 css3 实现的炫酷的 svg 动画效果。
8. 全栈进行面向对象化开发,一个页面作为一个对象,一个 tab 作为这个对象的一个属性,这样便于组织维护代码。
9. 到了后期,官网和控制台统一了域名,express 使用 post 模块,从服务端向后端发送请求, 获取用户的基本信息,结合模板解析,渲染到页面中。
10.
2017.4 - 2017.5 短信分销后台
工作职责: 前期项目研讨,整个项目的搭建,开发,上线和维护。项目描述:该项目为野狗科技给用户做得外包项目。
我主要的工作内容是:
1. 采用 scss 作为 cs