小记-我的前端开发工作经历 - 好文

大家好，我叫海瑞菌，从事web前端开发工作4年，期间在外包公司，签约咪咕数媒旗下开发咪咕项目，以咪咕阅读为主。一个手机阅读软件。

咪咕阅读APP界面，app采取webview开发模式（前端H5页面+app功能壳（B+C））。部分页面及功能采用原生开发，内容展示采用前端页面

前2年项目使用的是freemarker+css+es5+zepto(jquery)的开发模式开发的。freemarker是一种jsp模板引擎，使用碎片化开发思维，用于输出服务器响应数据转化成html，本地写好的freemarker代码复制到UES编辑系统中运行，拖入碎片进行搭建页面。页面渲染采用css+es5+zepto开发模式。

编写碎片代码，采用freemarker模板引擎+html

管理线上页面、碎片、样式、脚本、风格，采用编辑管理系统

开发样式脚本采用本地开发完传入编辑系统，并预览

本地调试线上页面采用fiddler代理调试工具

直至开发调试完成，测试通过，运营通知上线。

后2年项目采用react(es5版)+sass+webpack+gulp进行重构和新需求开发，多页开发模式，页面首屏数据是放在全局变量pageData中的json，一个页面中有多个组件，组件初始化时从props中获取到当前组件的首屏数据。前端渲染数据为视图。更新的地方使用ajax请求后台微服务接口拿到json，使用setState方式更新视图。经常使用的react生命周期：getInitialState（组件初始化）、componentWillMount（组件渲染前）、componentDidMount（组件第一次渲染后）、componentWillReceiveProps（组件接收到新属性时）、render（渲染），其他较少使用。

页面间跳转使用a链接或使用客户端打开新webview，之所以多页面是为了老架构向新架构过度，不影响原先页面。

项目react本地开发环境

tomcat+gulp本地服务器

react（es5）开发模式

sass预处理样式

cmrsdk为jsBridge对象。可调取app原生方法，进行app交互

使用假数据在本地开发调试组件。本地服务器编译查看本地效果

组件通过svn上传至测试或线上服务器，由服务器编译后，通过编辑系统管理线上页面。以及测试线上页面。完成发布。

使用fiddler抓包工具进行页面代理，调试线上页面。

个人感觉公司技术使用上比较低端，业务却比较繁重。没太多时间学习，主要还是遇上了瓶颈，没有了成长空间，想跳出去却很难，已掌握的技术低端，高端技术的项目经验又不足。

热门工具换一换