Web前端开发工程师 毕业于华南师范大学

  • 个人博客

精通前端,涉猎后端

编织有艺术感的代码

  • Javascript

    精通Javascript。编写过DOM与AJAX的类库、CMD模块加载器;以ES3实现过Promise;熟悉正则表达式;有Vue.js、微信小程序项目经验。

  • HTML & CSS

    有扎实的HTML和CSS功底,熟悉流式布局和弹性盒子布局,能处理PC和移动端各主流浏览器的兼容问题。

  • Node.js

    熟悉Node.js,开发过多个Web应用(基于Express)和命令行工具。

  • SQL

    掌握MySQL、SQLite等数据库的使用,能熟练设计中小规模应用的数据库。

  • Photoshop

    能使用Photoshop进行简单的图片处理和平面设计。

对Web充满热情

学生时代就踏上了开发之路

2001年9月至2004年6月在广州市第八十六中学就读,课余做的以黄埔军校为主题的网站「黄埔军魂」曾获以下奖项:

  • “第三届全国中小学生电脑制作活动”广州市初赛高中网页二等奖;
  • “广州市中学生历史科‘研究性学习’个案征集评比活动”一等奖。

2004年9月至2008年6月在华南师范大学修读软件工程专业,取得学士学位。期间:

  • 2005年4月,在院系的“班级网页制作大赛”中获一等奖;
  • 在社团「师大青年」任职,为其开发了网站,2007年6月被评为“年度优秀校园媒体工作者”。

年工作经验

曾在知名互联网企业任职

现在

广州市贝聊信息科技有限公司

前端经理

主要负责前端基础架构建设

  • 选定「Vue.js」作为主开发框架,编写和维护公共代码,建立项目模板;
  • 采用自研的「Back2Front」框架开发数据交互较为简单的项目(如官网、文章内容页)。

此外,还承担团队管理工作(3名下属),包括任务分配、人员培养、工作汇报等。

2018年2月获“二〇一七年度最佳员工奖”。

2016/12

广州绽放信息科技有限公司

高级前端开发工程师

前端技术负责人。使用Node.js搭建中间平台(「Back2Front」框架的雏形)实现前后端分离,并在此基础上开发美黛拉手机站和PC站;后期在部分数据交互较多的页面中使用了「Vue.js」。

因公司业务重心的调整而离职。

2015/4

广州市千钧网络科技有限公司

高级前端开发工程师

基于「JRaiser」对业务JS进行模块化重构,并负责视频上传、播放等核心业务。此外,还作为内部讲师分享了技术原理和开发经验,并组织团队成员轮流分享。

因公司被搜狐收购后,要长期应付对自身没有太大提升的整合对接工作而离职。

2012/9

广州奔步广告设计有限公司

前端开发工程师

主要负责外包网站的开发和维护,偶尔也为业务系统开发团队提供前端协助。

因平台小、工作技术含量低而离职。

2011/5

广州久邦数码科技有限公司

ASP.NET/前端开发工程师

前期作为ASP.NET工程师参与了内部流量统计系统和手机门户网站的开发;后期回到前端岗位,负责Hybrid App的开发。

因上班路程较远、加班太多而离职。

2010/11

广州网易信息科技有限公司

页面工程师

第一份正职工作,初期只负责专题页面的制作。后来转为负责JS开发,编写了基础库与UI组件,并负责网易跟贴和内部CMS等重要项目。

因网站部搬迁到北京而离职。

2008/5
2007/9

动网先锋网络科技有限公司

ASP技术员(实习)

大三暑假时的实习工作。前期负责动网论坛功能定制业务,后期参与了JScript版动网论坛的开发。

实习三个月后离职。

2007/7

丰富的项目经验

业余项目与公司项目相得益彰

Back2Front框架 (开源项目)

  • Node.js

2015/4 至今

基于「Express」框架和「XTemplate」模板引擎开发,起初只是一个实现前后端分离的中间平台,后来实现了更多特性:

  • 可通过特定语法把模块的HTML及其依赖的JS、CSS一并引入到页面中,而不是分别引入;
  • 支持对静态资源进行预处理
  • 支持前后端同构
  • 配备对应的构建工具「Back2Front-CLI」。

本框架先后应用于美黛拉Web端产品、贝聊Web端产品。

JRaiser & Bowljs (开源项目)

  • Javascript
  • Node.js

2008/2 至今

基于CMD规范的模块化类库,包含加载器和一些通用性强的基础模块(DOM、AJAX、Cookie、Promise等)、UI组件(拖动、分页条、月历等)。此外还有配套的CLI工具,可用于构建代码生成API文档

后来又把加载器拆分为「Bowl.js」项目,CLI工具也拆分为「Bowljs-CLI」。

本类库先后应用于56网、美黛拉Web端产品和贝聊Web端产品。

幼儿园招生帮手

  • WXML
  • WXSS
  • Javascript
  • Node.js

2018/1 至 2018/4

基于「Wepy」框架开发的微信小程序,主要功能包括:

  • 老师填写幼儿园资料(含图片上传组件)、分享招生卡片(通过canvas合成的图片)、审核报名信息;
  • 家长查看幼儿园资料、报名。

由于「Wepy」不够成熟,小程序的textarea组件也有一些bug,导致开发过程不太顺利。

幼儿园招生帮手

美黛拉手机站

  • HTML 5
  • CSS 3
  • Javascript
  • Node.js

2015/4 至 2016/11

兼容主流Webkit内核浏览器,使用REM单位适配不同尺寸的屏幕。核心页面包括:

  • 商品目录页:可通过各种过滤条件搜索商品。过滤条件通过HTML5历史记录接口记录在URL参数中,即使页面刷新也不会丢失。
  • 下单页:有多个可选的子步骤,且数据交互逻辑较多,因此使用「Vue.js」进行开发。
美黛拉H5站

LetsBlog (开源项目)

  • Node.js
  • MySQL

2015/1 至今

基于「Back2Front」框架开发的博客发布系统,在服务器上通过「PM2」运行。前端方面,应用了媒体查询字体图标等技术,能适配各种设备。

本系统前身是使用ASP.NET+SQLite开发的「TidyBlog」,因Node.js逐渐成熟且开发便捷而更换实现技术。

LetsBlog

56网HTML5视频上传

  • HTML 5
  • Javascript

2013/3 至 2015/2

通过XMLHttpRequest 2.0实现支持PC现代浏览器、移动浏览器的视频上传,且能实时显示上传进度和速度。

后来进一步改良为断点续传,通过File类的slice方法把文件分块上传,并把上传进度记录在localStorage中。一旦上传中断,短时间内再上传同一个文件可以续传。

56网HTML5视频上传

56网PC视频播放页

  • HTML
  • CSS
  • Javascript

2012/11 至 2015/2

用户观看视频的主页面。因为页面有CDN缓存,所以大部分内容模块都在前端加载数据后渲染。为了提高性能,采用了延迟加载延迟渲染事件代理等优化方式。

此外,还通过监听「window.onerror」对异常信息进行采集,以便及时发现和排查故障。

56网PC视频播放页

UA Detector (开源项目)

  • Node.js

2014/10 至今

分析浏览器user agent的程序包,能识别出浏览器、浏览器核心、操作系统和设备品牌,识别方式主要是正则表达式匹配。开发过程中通过56网流量统计系统收集到的大量日志不断提高匹配度。

用于56网内部user agent分析统计。

UADetector

网易可视化专题模版系统

  • Javascript

2010/1 至 2010/10

为网易门户网站常规专题制作而开发的辅助系统,可以在所见即所得的界面中,通过组合模块快速创建专题页面。

系统中的每个模块有两套模板:前端模板(Micro-Templating)与后端模板(Velocity)。前者用于在编辑界面中渲染HTML,实现所见即所得;后者才是真正生成的代码。

专题页面的布局与模块组合形式以JSON格式存储,并以模板注释的形式保存在最终生成的页面代码中,以便下次编辑时直接加载。

网易跟贴

  • XHTML
  • CSS
  • Javascript

2009/2 至 2010/9

为提高代码可维护性,重写网易跟贴的前端代码,实现前后端分离(前端渲染,模板引擎为「Micro-Templating」);完成重构后,也负责此项目的功能迭代。

网易跟贴

从程序员到讲师

分享是更好的提升

从56网离职后,为了延续技术分享氛围,开始组织技术沙龙,即「前端讲坛」。

2015年12月首次组织该活动,参与者均为熟人。

2016年4月组织第二期,参与者为熟人以及熟人的朋友。

2016年8月组织第三期,以分组讨论加强参与者和讲师之间的互动。

2017年4月组织第四期,参与人数达到40人以上。

2017年9月组织第五期,首次在「活动行」发布,开放报名当天就报满。