前端练级闲话

小z2016年1月1日，来成都找实习工作。但是发现啥也不会，虽然是软件工程专业的，但是用java连接数据库都跑不起来。但是要想拿到三方证明就需要找到实习工作啊。要想找到实习工作就得通过面试，选择什么岗位呢？前端吧，入门简单，先搞定工作再说，心里还想着以后转后端什么的。

兴致勃勃的准备好比脸还干净的简历一波海投。还真收到了好几个面试邀请，一面试

• 怎么样实现水平垂直居中？
• 怎么实现等比1：2的图片展示？
• 清楚浮动有哪些方法？
• css有哪些选择器，权重是多少？
• 什么是内联元素，块元素？
• 什么是盒模型？
• 怎么用js创建dom并且挂在指定id的标签上？
• 什么是ajax？
• em和px的区别
• 什么是事件委托？
• 怎么实现动画效果？（那时候还没css3，都是jquery）

初级问题很简单，但是对于当时的我来说一脸懵逼。出了门备受打击，但是我很快的恢复过来，重新进去找到面试官，要了那套面试题，然后回到出租屋里面，一个一个的百度。很多问题的答案我当时看了也是一知半解，但是我都背下了。而且又重新找了类似的问题又看了一遍，然后又信心满满的去参加另一次面试。上面的过程我经历了n次，都没通过，快过春节了，我还是像上班族一样的时间回家，不过工作还没落实下来，时时刻刻惴惴不安。

年后又回到成都，继续年前的投简历、面试、记录问题、回来针对性的学习、投简历。终于在2016年3月17我面试通过连击科技，整个过程很紧张，但是问题确实回答得很轻松，有几个没答上来的面试官当场就告诉我答案了，实习薪资转正薪资都不高，但是面试官的行为让我觉得是个可以学习的机会，3月21日我入职LIANJI科技（我内心觉得这公司叫“练级科技”）。开启了整整一年多的纯html+css修炼历程，几乎没碰js相关的内容。长达1年多的纯css，熟能生巧，我可以像素级别还原任何设计图，合理组织css可复用块儿，业务强相关的css块儿分离管理互不冲突，形成一个符合当时业务的reset.css base.css common.css business.css。但是我没放弃任何一个向同事请教jQuery，js方面的内容的机会，项目中遇到交互场景我会把html+css写完，然后cope一份开始写js交互，下班的后，找到其中一个后端请教这些问题，怎么动态创建DOM，怎么处理Ajax接口数据返回，怎么写拖拽表格，正则校验金额，js控制弹窗。偶尔讲讲编程心得，不过当时他们聊的东西都更加倾向于应用实战，很多东西他们可以做出来也不一定能讲明白，就算讲了也不一定讲到本质原理，但是我确实是通过他们js正式入门的。linwen的一句话感悟很深

编程就是数据的增删查改

虽然这话，现在看来不完全对，但是这话让我重新思考js的问题，所谓的动画，dom，各项操作，其实都是拿到不同的数据（dom，data，json），然后对这些数据进行操作。

后面第二年的时候，我的各项技能十分熟练，处理工作十分轻松了，设计师坐我旁边，他绘图，微信的活动页面，微信的其他H5功能，他一边绘图，我一边写html+css，基本上他画完，我也就写完了。然后拿到psd文件吸管取色，切图标，替换就可以转交给后端同事了。这段时间幸福感挺高，虽然工资不高，但是会有剩余，时间比较多，我基本上吃遍成都我看到的想吃的东西，遇到喜欢的还会多吃几次，想去玩儿的地方也没落下，不管多远。

2017年年后，老板给了我一个半成品项目，vue开发的，我从来没接触过，然后就开始学，我也慢慢一步一步摸索将这个项目做出来了，但是我不会发布，而后端同事也不知道怎么打包上线，然后我们就重新按以前mvc模式写了一套。但是当时我意识到这个vue是一个趋势，掌握这个框架可以拿到更高的offer，然后我就开始写学习vue框架，都只做些小组件，我当时照着有道云笔记app的样子，用vue做出来了一套没有数据的静态组件，而且还照猫画虎的把交互都做了很逼真以至于后面面试“YF网络”的时候面试官以为我是用哪个第三方库，但我说我还不会使用第三方库，这个是纯手写的，然后直接面试通过。

坐标成都，1-3年的工程师能封装vue组件找个工作不算太难

面试过程中“YF网络”对我最大的吸引是他们将做的项目使用vue框架，我正好缺少这方面的项目经验。薪资依然不高，比以前稍微多1k，但是我确信跟着把一个项目做下来我的技术水平会有一个大飞跃。试用期我就到一个考验，一来就是vuex做一个视频，回放，切换播放时间的一个项目。压力很大，我vue用得都不太熟，vuex更觉得无比艰难。那几个星期我LOL都没打了，无论做什么事情都在想着vuex和视频怎么联系起来的问题，我很多时候都在看vuex的文档，但是还不太会看文档，但是我就一遍一遍的看，看了很多遍，也没太看懂，有一些概念，但是没法实操。技术总监一直说那个不难，现在我看来那也不难，但是当时就是不会，我在想会不会被fire，因为我第一次找工作时候确实经历过很长时间的煎熬，这一关如果没法突破的话可能以后都只会找更没有机会的工作，而且还不一定能找得到。好在那个视频项目是个半成品，里面本身就有一些vuex的内容，const.js actions.js state.js getters.js mutations.js mapGetters mapMutations,一堆东西目不暇接。有一次照猫画虎，实现了全局定义视频url，action中获取视频，选择不同精彩回放的图片块儿时候传不同的时间参数范围请求同一个视频的不同播放点。现在看来思路还算清晰，但当时做这个时候做完我都不知道怎么实现的。就这样我成功提前转正，开始从零做另一个大型项目。从头开始，每一个环节都有参与，技术经验确实提升很快，而且我以前写HTML+CSS很注意合理性和可读性的优秀习惯很快帮我更好的去封装整个团队都依赖的基础业务组件，一个项目下来封装40多个业务组件。而且都是经常用到的，过程中我对vue的使用更加熟练了。而且自己尝试了nodejs，express，对打包部署方面也可以独立处理。反而vuex在这项目中没怎么用到，我也没继续学习。业务需要我误打误撞实现了单点登录，但当时我不知道这个名词，多个系统，同一套token验证体系，一个系统登录后，其他系统可以直接访问无需登录。

管理后台鉴权

• 路由配置权限meta
• 路由拦截（跳转）
• axios拦截器
• 部分按钮结合vuex计算是否显示

单点登录

• 业务系统B访问如果token过期会先询问中心系统，拿到token跳转业务系统B
• 中心系统如果未登录会先访问业务系统B获取localstorage token，返回中心系统
• 如果中心系统登录失败，则标记不再跳转，返回中心系统登陆界面

组件封装心得

• 一个组件代码量过大（200行，400行，看团队情况）考虑拆小
• 一个组件在2个或以上地方使用到，需要提取成组件

• 考虑参数和参数类型以及返回事件

  • 预设初始值
  • 组件可选值
  • emit change
  • 表单组件考虑实现modal
• 一个组件包含多个字段
• 自定义组件类似于里面有多个值的表单怎么进行校验
• 业务模块中组合的子组件过多或者出现嵌套考虑上vuex，统一数据源，小心对象getter值修改