老左的个人简历

姓名：左继权
性别：男
星座：射手座
职业：高级前端开发工程师
邮箱：laozuo957@aliyun.com
电话：-
一句话自述：“来杭12年，从事互联网工作12年的资深前端开发工程师。”
Github： https://github.com/minguman
Blog： http://zuojiquan.com
毕业院校： 江西科技学院

工作经历

睿珀智能科技有限公司杭州分公司（2023.4 - 至今）
杭州万郡绿建科技有限公司（2020.08 - 2023.3）
杭州悉点科技有限公司（2018.12 - 2020.6）
中国婚博会（2017.03 - 2018.11）
淘宝（中国）软件有限公司 (2014.04 — 2016.11)
杭州十九楼网络股份有限公司 (2012.03 — 2014.03)

  • 个人从业经验：

    熟悉互联网研发模式，熟悉跨部门沟通方式，深知业务、用户体验的重要性
    熟悉单页、多页、服务端、跨端技术架构，多年实战经历
    10年前端开发经验、10年用户体验从业经验
    5年前端小团队管理经验
    1年低代码研发经验
    多年的个人产品自研经验
    略懂产品\运营\自媒体 会用axure\墨刀\PS等工具

一大段自述

了解Seo有过不少实战经验
了解pwa、weex等技术，仅限于了解
了解actionScript3.0，有过项目经验
了解php，有过项目经验
了解linux，工作中经常用到
了解nuxtjs、eggjs，有过项目经验
了解git，工作中经常用到
了解Jenkins构建项目，有过项目经验
了解数据分析，有过实践
熟悉前端工程化、模块化、规范化开发方式
熟悉前端常见的性能优化，例如减少http请求、减少资源体积、减少算法时间复杂度O(x)等
熟悉react开发，有过项目经验，
熟悉gulp、webpack、grunt构建工具
熟悉nodeJs，web服务，SSR都有不少项目经验
熟悉vue2/3全家桶、熟悉jQuery框架，有不少项目经验
熟悉PC、H5、hybridApp开发，有不少项目经验
熟悉微信小程序开发，有不少项目经验
熟悉前端架构，有不少项目经验
熟悉前端团队建设、管理、发展；最多带过7人前端团队
熟悉跨部门、不同职业间（UI、产品、后端、运营、运维等）的沟通与合作
玩过NPM包，例如：https://www.npmjs.com/package/pxtorem2
翻译过一些组件 例如：http://browsersync.cn/ 日UV200+，目前已有30万人次访问，1个相关的QQ讨论群，已有600多人的
玩过产品(用Axure画过原型、写过PRD) 例如: http://lol.pifupai.com 日UV4000+，目前已有200万人次访问，1个相关微信公众号，近4万粉
1个单页小程序，2.3万访问用户
玩过自媒体 例如：今日头条、百家号、大鱼号、搜狐号、知乎专栏等等
目前工作中在使用Node，空时“玩”产品

睿珀智能科技有限公司杭州分公司（2023.4 - 至今）

工作职责
  • 1、负责政企数字业务部前端团队管理工作
  • 2、负责低代码项目管理工作
  • 3、负责低代码项目编辑器功能设计工作
  • 4、负责低代码工作台迭代规划工作
睿珀智能 - 智能化低代码平台

  • 产品介绍

    一款”真搭积木式的低代码平台”，一切功能都建立在一个一个的积木上（节点），用户可通过各种基础积木（节点），便可以搭出强大的WEB应用。
    该产品基于蓝图引擎并与AI结合的可视化低代码平台，用户可通过各种功能节点来创建复杂的WEB应用，提供手动和AI两种方式，并且可快速一键发布上线。

  • 产品亮点

    易用性、灵活性、扩展性非常高，简单易上手。
    蓝图引擎，可在画布中直接新增、托拽节点、关联节点的方式来编排WEB应用的界面和业务逻辑，直观可视，节点与节点之间的关系直接通过连线完成；
    可视化的状态控制，可通过 状态机 的方式来控制各节点的逻辑状态，并且节点的 状态流转 还可以直观、清晰看到（连线高亮），方便调试。
    强大的自定义组件能力，用户在编辑器中即可创建属于自己业务的功能组件，使用我们提供的基础节点即可编排出各种强大、复杂的功能组件，1次开发，可多次重复使用。
    强大预制组件功能，官方为用户提供了一套完整的UI组件，即开即用；该组件用户安装后还可以直接在线修改，想怎么改就怎么改。
    强大的第三方模块功能，支持用户安装本地模块开发包，开发各种更强大复杂的功能为自己项目使用；比如富文本编辑器。
    强大的调试工具，编排中的出现的错误会有直接提示信息，可定位到具体某个组件的某个节点。
    强大的分离功能，画布区和预览区可从编辑器中分离（多窗口模式），用户可以一个窗口做编排，一个窗口做预览，编排效果在预览窗口实时更新。
    强大的AI功能，通过AI对话，可直接生成WEB应用。
    AI识别设计图，通过设计图直接生成WEB应用。
    AI生成产品文档，可通过文档直接生成WEB应用。

  • 视频演示(部分功能)

  • 产品图片

AI生成产品文档生成项目

AI识别设计图生成项目

低代码编辑器开发PC端应用

低代码编辑器开发移动端端应用

  • 产品及技术方案设计

    整个编辑器包含4大块内容；
    1)、顶部工具栏（设置分辨率、路由切换、分屏等）
    2)、侧边工具栏（节点属性设置、页面设置等）
    3)、 节点编排器（画布、包含 UI 和逻辑等节点）
    4)、 预览区（节点编排效果预览）

该低代码项目中的重要部分“编辑器”是基于蓝图的交互方式进行开发，编辑器可通过选择节点、编排节点、连线节点的方式来完成界面和交互的编排，并且可实时预览编排效果；

  1. 画布区使用 canvas 实现，可在编排区/画布区新增节点、拖拽节点、连线节点；
  2. 预览区使用 Iframe 加载一个单页来实现，该页面由nodejs渲染；
  3. 画布区和预览区之间的消息通信有2种方案；一种是基于 websocket 或 postmessage 的方式，由于通信数据量比较大，上线版为postmessage方案。
  4. 打包部署由nodejs完成；在与服务端通信方案使用了Kafka
  5. AI对话，通过与AI对话生成已包含具体业务的逻辑节点与视图节点，AI使用了gpt4；

由于该项目存在多个package, 因此该项目使用了monorepo的代码管理方式来组织多个package之间的关系。

注：更多细节待完善

  • 技术栈

    react
    nodejs
    canvas
    webpack
    vite
    rollup

万郡绿建科技有限公司（2018.12 - 2020.02）

  • 1、负责商品业务线前端团队管理、需求开发工作
  • 2、负责订单业务线前端团队管理、需求开发工作
  • 3、负责询报价业务前端团队管理、需求开发工作
万郡绿建 - 商品业务线
  • 项目说明

    维护万郡商城(首页、商品聚合页、详情页)
    维护供\需方会员的SAAS平台
    维护运营管理后台商品相关业务功能

工作职责

主要负责【商品业务线】前端团队管理(3人工作安排/包含需求讨论/评审/估时/任务分配/排期等工作）和业务开发等工作。
由于公司业务比较多，人手不足，个人工作重心也是在一线开发工作上。

产品图片

  • 商城首页

  • 商城商品聚合页

  • 商城商品详情页

万郡绿建 - 报价业务

  • 项目说明

    需求方可通过商城或者需方SAAS发起询价单，供方可在供方SAAS上接收到询价信息，供方报名后可参与报价，3轮报价结束后，需要可自行选择一位供方的价格结束报价并去下单。

-工作职责

主要负责公司询价单业务功能的开发，商城询价业务，供方SAAS报价业务，以及需方询价业务。

产品图片

  • 商城询价表单

  • 商城询价详情页

  • 商城询价列表页

技术方案

nuxtjs(万郡商城的SEO方案)
vue2(供需方SAAS、运营平台)
webpack
git
nodejs
npm

杭州悉点科技有限公司（2018.12 - 2020.02）

  • 工作职责和范围

    负责公司网约房系列产品前端开发工作
    并参与部分产品的demo设计、UI设计（由于公司业务需要小步快跑、快速迭代、前端人员在早期产品设计时就介入讨论有助于明确产品功能和技术方案、提高工作效率）
    公司所有web前端业务都使用了nodejs搭建web服务的技术方案，除了数据接口的其他业务，尽可能在Node处理完成并返回给前端（用户）。
    PC端 vue + koa2(nodejs)的技术方案
    微信小程序 koa2(nodejs) + 小程序的技术方案

  • 其中参与团队设计、研发的产品包含（不分先后顺序）：

    网约房房源管理平台 (https://pms.seedien.com/)
    网约房房源审核平台 (https://checkin.seedien.com/)
    房源验真 (微信小程序)
    悉点旅宿（微信小程序）
    悉点智住（微信小程序）

悉点科技 - 网约房房源管理平台（Node + Vue）

  • 业务需求：

    前后端分离
    Web服务 + SPA

  • 技术方案

    基于Vue + Nodejs的技术方案
    使用koa2搭建的Web应用服务，主要用于数据接口转发、数据二次处理，部分服务端业务将在Node层处理并返给前端。大大降低了前后端沟通成本，以及协作成本。
    使用vue + vuex + vue-router + axios处理前端业务。

产品UI

  • 技术栈：

    视图层使用了Vue的SPA方案
    web服务（网关或代理）使用了Koa2框架
    web服务只用着数据接口的转发（代理）及文件上传、下载、Excel生成。
    用户登录也在web服务层处理，使用了jwt方案
    sass做css编译
    redis做数据缓存（地区数据、字典）
    pm2做Node应用管理、监控
    log4js做Node应用日志管理
    gitlab做项目代码管理
    sourceTree做管理、规范git分支
    jenkens做集成发布
    nginx做代理转发、负载均衡

其中遇到的问题，以及如何解决的？

  • 问题1：“多人协作下，出现代码风格不统一，读写困难”

    解决方案：制定代码规范，使用eslint来强行校验代码格式，确保代码风格统一

  • 问题2：“多人协作下，代码版本管理混乱，容易引发冲突、甚至分支被删除的情况”

    解决方案：制定代码版本规范，使用gitflow来规范管理，大大降低了代码冲突，分支管理混乱的情况

  • 问题3：“前后端并行开发，需要等待后端提供数据接口，会阻塞前端开发进度”

    解决方案：“使用mockjs模拟数据，无须等待便可继续完成前端业务”

  • 问题4：“后端提供的接口字段格式不统一，导致前端需要反复查看每一个接口的字段格式”

    解决方案：“由于后端业务不在自己的工作范围，逐向主管反馈该情况后，有所改善”

  • 项目中有待改进的：

  • 单元测试，由于项目采用快速迭代的开发方式，在单元测试上面没有过多投入，
  • 前端监控与报警，虽然使用了pm2和log4js，但这2个框架都是用于服务端监控的，前端监控该如何开展？
    线上地址：https://pms.seedien.com/
悉点科技 - 网约房房源审核平台（Node + Vue）
  • 业务需求：

前后端分离
Web服务 + SPA

  • 技术方案

    基于Vue + Nodejs的技术方案
    使用koa2搭建的Web应用服务，主要用于数据接口转发、数据二次处理，部分服务端业务将在Node层处理并返给前端。大大降低了前后端沟通成本，以及协作成本。
    使用vue + vuex + vue-router + axios处理前端业务。

  • 产品UI

  • 技术栈：

    视图层使用了Vue的SPA方案
    web服务（网关或代理）使用了Koa2框架
    web服务只用着数据接口的转发（代理）及文件上传、下载、Excel生成。
    用户登录也在web服务层处理，使用了jwt方案
    sass做css预编译
    redis做数据缓存（地区数据、字典）
    pm2做Node应用管理、监控
    log4js做Node应用日志管理
    gitlab做项目代码管理
    sourceTree做管理、规范git分支
    jenkens做集成发布
    nginx做代理转发、负载均衡

线上地址：https://checkin.seedien.com/

中国婚博会（2017.03 - 2018.11）

  • 工作职责和范围

    负责7人前端团队管理、建设、团队成员技术指导；项目技术架构/方案研究及推广
    前端规范化、模块化、工程化的开发方式的推行
    协助产品经理完成产品Demo，并对部分功能的可行性评估；协助UI童鞋规范产品设计，与后端、运维童鞋探讨前端技术方案可行性（调研）、并推动落地
    在项目中把控前端团队开发周期、开发进度；按时、保质完成各产品前端开发、自测等工作

  • 其中参与团队设计、研发的产品包含（不分先后顺序）：

    家芭莎PC (https://sh.jiabasha.com/ )
    家芭莎H5 （https://sh.jiabasha.com/m/）
    家芭莎个人中心 (https://sh.jiabasha.com/my/)
    家博会微信小程序 （微信搜索小程序《家芭莎家博会》）
    车芭莎PC （https://www.chebasha.com ）
    婚芭莎H5 (http://m.jiehun.com.cn/beijing/)
    婚芭莎商户中心 （https://shop.jiehun.com.cn/）
    婚芭莎商户广告中心（未上线）
    家芭莎展会索票页 (https://bj.expo.jiehun.com.cn/)

中国婚博会 - 婚芭莎H5（基于Vue的SSR应用）
  • 业务需求：

    1.兼容SEO (服务端渲染——尝试过prerender方案)
    2.前后端分离（降低前后端沟通、重复开发的高成本）
    3.使用Vue框架 （前端框架）
    基于以上3点，选择了基于VueSSR的技术方案

产品UI

  • 技术栈：

vue (Vuejs)
vuex (vue组件状态管理)
nuxtjs （VueSSR框架）
express（node框架）
webpack (构建工具)
gulp (构建工具)
axios （客户端和服务端异步请求）
mint-ui (第三方ui库)
log4js （日志管理，路由、业务）
redis (数据缓存，例如微信JSSDK AccessToken等)

  • 个人职责

    项目开发周期评估、项目进度监管、组织每日站立会（开发周期短）确保项目进度顺利推进
    VueSSR前端开发环境搭建、工程化配置
    SSR服务环境搭建、与运维完成QA环境部署发布

  • 个人业绩

    带领5人前端小伙伴在3个礼拜的时间完成冒烟测试，通过率为97%；
    除了我个人外其他人都没有Node开发经验，其中3人首次使用Vue；并且其中一人还学会了使用Jenkins来部署Node应用；
    这是在公司产品线中首次使用NodeJs在服务端渲染页面，内部反馈还不错。通过这次项目的开发，参与项目的前端小伙伴都有了Vue和Node的使用经历，虽然这对整个团队的整体技术能力和储备来说不值一提，但这是一个开始。
    项目完成后也及时的做了项目总结，这对于团队整体实力的提升很有帮助。

线上地址：http://m.jiehun.com.cn/shanghai/

中国婚博会 - 家芭莎H5（jQuery + flexible）
  • 业务需求：

    1.兼容SEO
    2.前后端不分离
    3.移动端

基于以上3点，选择了jQuery3.x + 手淘Flexible布局方案

  • 产品UI

  • 技术栈：

    jQuery3.x (前端框架)
    jade (页面模板)
    gulp （管道式构建工具）
    gulp-autoprefixer 添加浏览器前缀
    gulp-sass sass文件编译
    gulp-imagemin image压缩
    ….
    browsersync （Node服务，支持热更新）
    webpack (模块化封装)

  • 布局方案

移动端布局使用了手淘flexible布局方案，动态计算根节点的font-size
参考：https://github.com/amfe/lib-flexible
使用pxtorem2模块对px进行编译
参考：https://www.npmjs.com/package/pxtorem2

  • 工程化构建方案说明

由于未前后端分离，前端工程化配置方案需要构建出静态文件供后端童鞋使用，使用管道式构建工具Gulp构建静态文件（html,css,js,img）
html使用jade模板进行编译，使用jade可以实现页面模块化
css使用sass编译，autoprefixer自动添加浏览器兼容前缀
js使用webpack编译，使用js模块化
img使用了图片压缩

线上地址：https://sh.jiabasha.com/m/

中国婚博会 - 婚芭莎商户中心PC（基于Vue的SPA应用）
  • 产品说明 —— 该产品为商家店铺管理系统，包含模块有：

商品创建、管理；
订单查询、管理；
店铺管理；
营销工具；

  • 业务需求：

1.不需要兼容SEO
2.不需要兼容IE(9+)
3.前后端部分分离（后端提供接口）
4.后台管理系统

基于以上4点，选择了基于Vue的SPA技术方案

  • 产品UI

  • 技术栈：

    vue （前端渐进式框架）
    vue-router (路由管理)
    vuex （组件状态管理）
    webpack (工程化构建工具)
    axios (异步请求模块)
    element-ui (第三方ui库)
    vue-cli (基于webpack的vue脚手架)
    等等

  • 开发中遇到的问题列表

项目构建后的JS文件过大
公共组件（样式）该如何维护
组件状态该如何管理
路由权限如何设置及管理
如何有效进行前后端接口联调
数据埋点如何解决
首次加载白屏怎么解决
如何进行多人协作
如何规范化开发
如何兼容SEO

  • 个人职责

人员分工的安排
协助团队成员开发时间预估
技术指导
开发进度监管
项目总结等等

线上地址：https://shop.jiehun.com.cn/

淘宝(中国) (2014.04 — 2016.11)

淘宝(中国) - 淘宝音乐馆PC
  • 业务需求：

TMS模块化
接入淘宝搜索应用
接入淘宝登录

  • 产品描述

为用户介绍音乐相关商品，可以享受VIP专享价格（虾米音乐VIP用户）。

  • 开发相关

    技术选型： 模块开发，运营可以自己选择模块来生成页面。
    技术特点： 模块多功能， 可以让运营反复使用，不同页面不同需求的使用，一个模块，可以使用多次，可以使用不同数据， 以及模块的详细说明文档，方便运营学习使用。
    技术难点： 模块功能的扩展
    浏览器兼容：兼容IE8+、火狐、谷歌等；不兼容移动端
    开发语言： Javascript，HTML
    JS框架： KISSY
    CSS预处理： LESS
    开发工具： Sublime
    代码管理： Gitlab
    数据方面：SPM
    项目构建工具：Gulp
    抓包工具：Fiddler
    工作职责：整个音乐馆频道的前端开发、代码维护

线上地址：http://music.taobao.com

淘宝(中国) - 商家店铺音乐播放器

  • 业务需求

    淘宝旺铺音乐播放器（在页面右侧插入一个播放器模块）。

  • 产品描述

“希望通过在店铺里提供背景音乐的功能， 商家可以根据店铺风格来选择音乐， 借此来渲染店铺的氛围， 从而促进店铺交易量的提升…，目前淘宝卖家使用量已有100万+人次。

  • 开发相关

技术方案：考虑到要兼容IE系列， 播放器采用了JS+AS3结合开发， JS来控制播放行为，歌曲来自虾米音乐库。
技术特点：通过flash实现了不同页面相互通信，页面与本地的通信（本地存储）。
技术难点：不同店铺、不同页面播放记录的存取
浏览器兼容：兼容IE6+、火狐、谷歌等；不兼容移动端
开发语言： Javascript 、 Actionscript3.0、HTML
JS框架： KISSY、jQuery
CSS预处理：LESS
开发工具： Sublime、Flash CS6
代码管理： Git 项目
构建工具：Gulp
数据方面：SPM
抓包工具：Fiddler
工作职责： 播放器前端开发及维护， 卖家管理后台前端开发及维护（播放器管理后台）

线上地址：https://shop105990566.taobao.com

淘宝(中国) - 看演出H5

  • 产品描述

    为用户提供近期演唱会购票渠道（可以通过虾米音乐APP - 乐馆 - 看演出）

  • 开发方面

    技术选型：响应式布局、前后端分离
    开发语言：html、Javascript、 Nodejs
    技术特点：该项目使用到淘宝Node框架midway来进行服务器端的部署
    JS框架： KISSYmini xtemplate
    CSS预处理：SASS
    Node框架: midway
    开发工具： Sublime
    代码管理： Gitlab
    构建工具：Gulp
    抓包工具：Charles
    数据方面：SPM

  • 该产品在做开发前考虑了一些点：

1.前后端分离
2.响应式布局
3.页面加载速度（性能方面）

  • 前后端分离

这里我们尝试使用了Midway这个NODE框架，通过Midway这个中间件在服务端对数据进行处理、路由控制、模板解析来完成页面的渲染，在通过前端去对页面的进行二次更新或加载。

  • 响应式布局

    由于业务需求在各移动端上能够自适应（字体大小，图片宽高等），页面采用了REM来计算元素的宽高及字体大小（自动根据页面的宽度来调节HTML节点字体的大小），以适应不同终端及版本的情况。

  • 高性能

    降低页面体积：“压缩图片、JS、CSS，图片根据需求进行裁剪（拒绝加载原图），HTML减少多级嵌套；”
    减少页面请求：“合并CSS、JS、合并请求；图标使用font-face带替代”
    减少页面重绘：“定义图片的宽高，有多个DOM的操作，尽可能的在内存里完> 成业务逻辑”等~~

项目地址: http://alilive.taobao.com/m

杭州十九楼 (2012.03 — 2014.03) 时间较远，不在更新

赏
本文作者： 老左
本文链接： https://zuojiquan.com/resumes/index.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

    			  jsonContent:
				meta: false
				pages: false
				posts:
				  title: true
				  date: true
				  path: true
				  text: false
				  raw: false
				  content: false
				  slug: false
				  updated: false
				  comments: false
				  link: false
				  permalink: false
				  excerpt: false
				  categories: false
				  tags: true


多年互联网前端开发、团队管理经验，同时还是一名自由开发者。