在有赞共享前端实习了半年（18.7-19.1）总结下自我的收获和实习的体验。
首先是环境，用了 nvm 来控制 node 的版本，async/await 只有 node8+才能用，新的项目都统一用 8.x，旧的项目用的是 node6 的（node 端不过 babel 编译，直接运行）。第一次使用 mac 对命令行不是很熟，配了下 iterm2 和 ohmyzsh，发现 mac 下的命令行真好用…原本 IDEA 的深度用户的我在接触了 vscode+iterm2 后表示真香～后来就是日常 iterm2 分 4 屏然后开 3-4 个 vscode。。。
然后是各种账号权限，本地生成了 rsa 加到 keychain，然后 ssh 连服务器，服务器环境有开发、测试、预发、线上，一般情况下用专门的发布平台来部署到对应的机器，极端情况需要直接 ssh 连服务器调试代码。内部系统比较多，包括代码仓库、文档系统、bug 跟踪、发布系统、项目跟踪、线上监控等，刚接触的时候一脸懵逼，每个平台都深入使用过才了解。有些平台是内部开发维护的，有些是购买的比如 jira。每个系统都有自己的功能，不同系统用在开发的不同阶段，提高效率。
我在 PC 组，一开始主要是熟悉开发套路，所以就是改改文案改改样式，把整个收到 bug 到修复 bug 到上线的流程走一遍。PC 端用的 React 全家桶，在学校时我主要写 Angular，所以赶紧花时间把 React 官网过了一遍。接手的第一个项目是 UI 改写。有个单独的平台原本是前端凭感觉做的，现在设计给了稿子，就需要把整体 UI 按照设计给的稿子做一遍。因为使用了 style-components，所以顺便学习了一下 css in js 的套路，感觉对组件的抽象要求比较高，有些样式有多种方案的需要考虑组件复用性高的方案。通过这个项目，对 React 开发也算入了门。后面几个项目涉及到数据请求，以及逻辑处理，更加深了对 React 的理解，期间看了《深入浅出 React 和 Redux》是我受益匪浅。然而有赞 PC 是多页中的单页，由 node 渲染基础模版，然后留一个 div 给 react 渲染组件。所以每个单页应用不是很复杂，也没必要使用 Redux 了。最后前端代码打包完上传到 cdn，留一个 hash 塞入 node 层模版中，所以 node 层也可以直接塞一些数据在 global 下，可以节省一些异步请求。
因为按业务划分，我是做会员业务的，所以 h5 和小程序的个人中心后来也从移动组划到了我们这里（据说是因为人不够？？）于是我就开始写 Vue 了。。。（h5 是 Vue 全家桶）主要就是一个个人中心页面。UI 上还好，没有什么比较骚的操作，有意思的地方在整体页面样子要根据 PC 后台的配置来，整个就是店铺装修的套路。另外 PC 端还需要展示预览效果，所以需要把整个页面分拆成组件后打包发布，以便于 PC 端使用。h5 要根据 PC 的配置比如主题色、组件位置、插件显示模式等。所以整个使用了 Vue 的动态组件，从后端读取 PC 上修改的页面配置，根据配置渲染不同的组件，对于有些组件需要另外的参数控制显示效果也是从配置中读取的。读取完配置后初始化 Vuex 的 store，UI 组件再根据 Vuex 的 state 渲染不同的样式。打包给 PC 的那份组件在提供默认的 Store。另外 PC 端在 React 里渲染 Vue 的组件个人感觉也比较骚，然而遗憾的是米有机会看他的源码就离职了。。。
然后是个人中心页面的小程序版本，UI 上和 h5 一致，技术上也没啥难点，就是体验了下小程序开发，小程序整体开发体验上和 shadowDOM 比较相似，但是因为微信提供的小程序框架基本上是个黑盒子，有些 api 的错误也很难查找原因，只能跟微信的人咨询，这种感觉就很蛋疼。在开发中曾经出现过一个调用微信的 api 报没有权限的 error，搞了好久才弄好，真是令人心力憔悴。。。
业务部分讲完了，讲讲技术部分把，也站在上层回顾下有赞前端的技术架构。首先，后端是基于 dubbo 的微服务架构，然后内部用 go 实现了一个代理框架 Tether 暴露一个 http 服务，微服务相关的部分都由 Tether 来处理（服务发现服务调用负载均衡等），暴露的 http 服务是让 node 调用的，比如 node 发一个 POST www.demo.com:6666/i.am.a.long.package.name/iAmAServiceName.functionName 到 Tether，Tether 会解析这个请求，然后转发到对应包名类名方法名的 java 接口（参数视 java 借口而定）并把 java 返回的数据过一层解析和封装，变成{code:200,data:{k:666},message:'xxx'}的形式返回给 node。前端部分是 node + React/Vue 的结构，node 部分是基于 koa 分装的 Astroboy 框架，已开源。在 Astroboy 基础上包装了业务层框架 youzan-framework。加了底层把业务方法调用改成 http 调用的形式。比如上面的 POST www.demo.com:6666/i.am.a.long.package.name/iAmAServiceName.functionName，开发者只需要写 this.invoke('i.am.a.long.package.name.iAmAServiceName','functionName',[param1,param2])youzan-framework 除了做方法解析，还针对 http 调用做了一些设置比如超时或者一些特定请求头等。在 youzan-framework 之上又针对不同的业务线（toB、toC）封装了两个不同的上层业务框架。因为有赞的业务 toB 部分基本是 PC 后台，toC 部分就是 h5 相关，所以这两业务框架基本 PC 的一套 h5 的一套，里面封装了不同的登陆态获取方式等。当然也有 toB 的 h5 页面（我当时做过一个），所以就会出现一个仓库既有 React 又有 Vue 的尴尬…但是他们基本不相干，就加两份打包配置而已…这三个框架都属于 node 层底层框架，业务开发基于他们进行。前端页面部分整体不是一个 SPA 而是多页中的单页。node 会渲染页面模板给浏览器，同时预留一个类似<div id='app-root'></div>给 React/Vue 来挂载。然后对于 PC 端部分，整个一级导航的每个项都有一个代码仓库，用 nginx 针对不同 url 来转发。可以做到独立开发独立部署。一个代码仓库负责一个一级导航下的整个二级导航。基本上每个二级导航都对应了 node 层一个模板页面，对于有三级导航的大多是 SPA 了。三级导航的 router 就由前端来控制。前端页面开发完后，会把 webpack 打包结果上传到 cdn，并把 hash 值写入配置文件。node 层渲染模板的时候会去读取配置文件的 hash 值，拼接成 cdn 的完整 url，并加到模板的 script 标签上。当然这一切都有 cli 负责整个流程的自动化进行。
最后讲讲有赞的技术积累。它有 zan-proxy、zan-api 等提高开发效率的工具也有 zent、vant 等组件库，还有比较丰富的文档网站。可以说在积累上是比较富裕的。zan-proxy 主要用于代理某些请求到本地，之前提了有赞是多个仓库通过 nginx 代理的，所以不可能本地跑整站的代码，就可以把具体业务部分的页面代理到本地的 node 服务进行调试开发。当然直接只运行这部分页面在本地开发也是可以的，但是有些需要依赖 cookie 等，使用代理可以更好的贴近线上的模式。它的原理是通过配置正则，符合某个正则模式的请求就会代理到本地某个端口暴露的服务。具体点比如 www.baidu.com 的 GET 请求代理到 localhost:8080 的 node 服务，这样别的还是会走线上的，进入到符合正则匹配的 url 时就走本地的了。zan-api 主要用于前后端接口定义，配合 zan-proxy 可以实现前端通过接口测试后联调时几乎不用再改前端代码，当然具体的 mock 数据需要自己编写。具体原理是某个接口的请求就走到一个统一的 mock 服务上，返回 mock 数据，整个过程处理数据是 mock 的别的完全一致，所以等后端开发完后只需要把这个接口的转发关掉就走到了后端那里。这两个工具个人感觉都比较使用，整体原理上也不难理解。可以较大程度提高开发效率。