 项目名称：本地管理平台（ESS）  开发框架：React.js+AntDesign  开发语言：JavaScript  担任角色：独立负责前端  开发时间：2019.04—2019.12 一、 一、项目背景： 新能源储能产品为每个电站服务，用户可以通过储能云平台了解到储能电站的信息。本地管理平台 （ESS）能及时发现本地的告警和保护事件，无法对储能电站进行运行情况的预测，分析和事件追朔。 二、 二、实现细节： 后台： 1. Netty作为网络框架，创建TCP和UDP服务，创建线程池处理并发问题 2. 对不同协议情况选择TCP或者UDP服务，根据国家电网和南方电网相关协议，进行组帧和解帧 3. 将解好的报文，通过Hibernate放入mysql，出数据库通过DAO的方式给前端提供服务 前端： 1. Html样式和CSS结构布局创建一个整体BFC，采用双飞翼布局骨架 1. 使用react-router-dom中的BrowserRouter和Route配置相应的路由 2. 状态管理使用适当的redux，解决react组件间通信和组件间状态共享问题 3. 使用axios异步请求，setTimeout和setInterval组合形式请求后台数据 4. 将WebPack作为打包工具，处理好loader和label，build整个工程进行发布 三、性能优化： 后台： 1. 使用mysq+redis或mysq+MonogoDB组合可以缓解数据入库的堵塞和前端请求数据较慢的情况 2. 进一步优化数据库设计，按设备号细分表格区，使用一对多Entity形式，据不同业务进行数据库访问 前端： 1. 类组件中绑定this或类中使用箭头函数，避免在嵌套组件中绑定bind,否则每次render执行该函数 2. 浅比较时，使用React.PureComponent代替自己在shouldComponentUpdate书写比较 3. 属性值量大需要比较，使用seamless-immutable（Immutable大）管理数据，持久化数据结构 4. 组件属性传参尽可能减少参数数量，嵌套组件中设置的key和value应当在render（return外）里面 定义好，避免每次render一次创建一个新的对象。

 项目名称：海信智慧园区  开发框架：React.js+Dva+AntDesign  开发语言：Javascript  担任角色：前端模块开发  开发时间：2020.04-2020.10 一、 一、项目背景： 海信集团公司的制造工厂（海信空调，电冰箱），园区几万人，每天的人流和物流极其庞杂，需要有一个 系统来高效的管理园区的物流和人流，减少后勤部门的工作压力。项目上线后，减少了40%的后勤工作量. 二、项目难点： 园区车辆复杂，有员工车辆，固定司机车辆，黑名单车辆，白名单车辆，VIP车辆，车辆所涉及的审批 流程人员又是极其复杂。 三、实现细节： 1. React构建UI层，Dva作为Model层和Control层 2. 由于使用的人员角色复杂，所以设置角色权限和菜单权限 3. 设置通用组件，提高开发效率 四、性能优化： 3. 属性值量大需要比较，使用seamless-immutable（Immutable大）管理数据，持久化数据结构 4. 设置react的key元素时，对于纯展示受控组件可用index，其余的非受控组件最好用唯一的id值 5. 组件属性传参尽可能减少参数数量，嵌套组件中设置的 key和value应当在render（return外） 里面定义好，避免每次render一次创建一个新的对象。

 项目名称：深圳通大数据平台  开发框架：Vue  开发语言：Javascript  担任角色：前端架构搭建和开发  开发时间：2020.10—2021.03 一、 一、项目背景： 利用深圳通平台的大数据，对城市地铁和公交进行数据分析。统计出行客流量，交易金额量，OD换乘线 路。进而对于线路设置是否合理，商业网点是否科学布局进行分析。 二、 二、实现细节： 1. 使用VUE搭建前端框架，做好路由管理和权限管理 2. 分模块开发，降低模块之间的耦合度 3. 规定代码规范，提高开发效率和项目整洁性 4. 配置好conf文件，部署到不同的环境中去 三、 三、性能优化： 1. 单文件组件预编译模板，自动构建把预编译处理好，构建的代码包含渲染好的函数而不是模板字符串 2. 提取组件CSS到文件，组件内CSS会以标签方式通过JavaScript动态注入，会有运行开销 3. 合理使用computed和watch，利用数据的缓存，减少后台负担和增加前端反应速度