面试前端岗位的一次经历（长沙）
作者:admin 日期:2020-10-15我与天智公司的短期合作（劳务合同）告一段落。因为从含浦到天智所在的中电软件园这边，每天路上都至少要1小时，有时候堵车就更长时间了。我还是打算出来上班，在含浦、洋湖、后湖这个3公里圈子里找份前端工作。上周通过BOSS直聘联系到后湖的一家公司，基本条件和待遇双方都符合，于是约定面谈。
那天我提前10分钟到了，公司在后湖的创业区，环境不错，就这一点来说，心理加分。但是他们公司并没有挂牌，公司也没人值守，我没找到是具体哪一间房。我在前台坐了一会儿，L经理一行三个人才到公司，说是刚下火车，刚从外地回来。
寒喧两句，一位黑色西装的W经理跟我交流技术细节。可能是我的工作年限比较长，简历上列的项目太多，W经理都没怎么问我技术细节。W经理直接跟我说了一个需求，让我描述下实现思路。我没听懂他要的是什么，另外我想，组件的功能实现，难道不是产品经理的活儿么？我可是面前端岗位呀。
W经理重复了两次，我还是没搞清他到底要实现什么。是要我做功能分析？还是UI设计？还是前端技术架构？要说这几门我倒是都会，就是真没听懂他的思路。
老鸟跟新人的区别，就是我碰到不会或是不理解的东西，会接受现实，并从容地应对。没听懂就是没听懂，可能是你表达不好，也可能是我没有这个经历，“只要你给我时间，我一定能搞懂。这世界上没有听不懂的需求。”
W经理最后放弃了描述，他有点不服气。向L经理示意可以直接谈待遇了。我说：“不考核下我的技术了？”W可能感觉有点被动（被应聘者反将），于是他说也行，那就考核几个点吧。问了几个问题，我记得的有：
VUE-CLI路由类型--我说分为hash和history，他又问我两者区别，我坦承不了解，工作中没用过，但我觉得百度一下就行了。
组件传数据的几种方式--我说了最典型的三种，他说还有更多的没有。我说我查过文档，应该还有更多，但工作中没用到就暂时没去了解。
es6跟组件功能有什么联系？（仿佛如此）----我说es6是一种技术手段，跟功能设计没啥联系。不过我补充了一下我使用es6与lodash库的一些经历。
最后W经理让我看了他们的后台界面，问我，如果只给一个功能描述，是否能实现从“功能设计-UI交互设计-前端编码”这一系列工作，我说我可以，但是我觉得这应该由团队来实现，而不是我一个人。
最终还是没有谈拢，原因如下：
团队感觉太小太新，人手不齐。从办公室的布置（只放了几张桌子和刚组装完的电脑）看得出来。虽然L经理说他们张家界还有几十人的团队，但长沙这边确实看不到人。
L经理说他们并不缺钱，但我觉得如果属实，公司应该布置得更正式一些。然后招人进度也不会象目前这样，如果引入一个有力的HR来专门做招聘工作，长沙各种类型的员工还是招得到的。如果连招人这一点都无法保障的话，我只能说这个团队还是缺乏执行力。
虽然承诺了他们招聘事宜上的顶薪，但是要9-8-6的工作制，晚上到8点，每周6天。如果有团队支持，我觉得还勉强可以，但是把几个岗位都堆给我，我觉得我可能承受不了这个工作量。
我还在等更好的机会出现。
北京50天项目收获
作者:admin 日期:2020-09-17这次赴北京，参与中科院某院组织的某军事类项目，历时近一个半月。整个项目组由8个不同的单位派员组成，前端人员十多人。
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。
我担任前端统筹组组长（共4人），统筹组工作职责：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。
我担任前端统筹组组长（共4人），统筹组工作职责：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
使用echarts地图，大屏实现“县乡级行政区划”数据展示的几个难点汇总
作者:admin 日期:2020-06-12某大屏展示项目中，要实现“点击乡级区划，显示出相应的数据”，
最终效果，链接：http://258754.cn/2020/guidong/demo.html
经过几天的学习，解决了一些疑难问题，特汇总如下以供参考：
| 难点 | 解决方法 | 参考文章或链接 |
| echarts地理图的基础实现-基于geojson | 参考了百度官方示例-香港地图 | https://echarts.apache.org/examples/zh/editor.html?c=map-HK |
| 外框发光效果实现 | geo--itemStyle | |
| 得到县一级的geojson数据 | 很多方法得到，本处给出一个很方便的工具 | https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe |
| 网上公开的geojson数据，免费只到县一级，没有乡镇一级地图 |
1、自己手工绘制，比较粗糙，边界不准 2、找到了精确边界数据的购买渠道，很便宜 |
geojson.io这个网站可以手工绘制区块 |
| 买到的 geojson数据比较旧，今年度新的区划已经发生了合并。 |
使用mapshaper.org提供的工具，对区划进行了合并，完美解决了问题。
合并操作及控制台语法花了点时间。 |
解析贴： |
| 同一页面展示多个图表 | vue组件将地图封装了一下 | 查看本文源码 |
解决了以上主要问题，绘制类似地图，就只剩一些细节问题了。
本文同时发布到两处：
知乎专栏《低水平前端》：https://zhuanlan.zhihu.com/c_1040198727197237248
一个阿里云帐号，只能对应一个备案主体
作者:admin 日期:2020-05-06SVG制作不规则链接热点的最简版演示
作者:admin 日期:2019-02-28一朋友要做一个“战国地图”，不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的，很粗略。响应用的是vue.js，其实用jquery也是一样的。
这就是个最简演示，其它常用技术就不解释了。
演示地址 ：
http://www.contactu.cn/2016/svg/qg.html
这就是个最简演示，其它常用技术就不解释了。
演示地址 ：
http://www.contactu.cn/2016/svg/qg.html
VUE+TWEENMAX+SVG动画，用来模拟流程控制
作者:admin 日期:2019-02-18那种工厂中很多个管道、流水线、控制阀门的控制体系，如果用软件来控制的话，会要操作很多的动画。用普通的HTML+IMAGE方式，很难表现一些复杂的控制。早几年的FLASH，是这方面的强手，但现在适用的方案，应该只好用SVG了。
我一直想了解一下SVG的组织结构及动画控制，这次终于实践了一个小demo。
这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax，状态控制用了vue.js。
绘制方面，用了一个ps插件，我用自己熟悉的ps直接导出了svg矢量图形。
演示地址 ：
在Scss中直接使用px单位，通过gulp，自动转为rem单位
作者:admin 日期:2018-10-27使用了https://www.npmjs.com/package/gulp-px2rem-plugin
使用这个gulp插件，可以在Scss中直接使用px单位，然后通过gulp的转换，自动转为rem单位，与我常用的ydui.flexible.js配合，最终完成px2rem的转换。
gulp语法如下：
.pipe(sass().on('error', sass.logError))
.pipe(px2rem({'width_design':640,'pieces':6.4,'ignore_px':[1,2]}))
.pipe(gulp.dest(dir+"/css"));
注意width_design与pieces都要与ydui.flexible.js中的设定配合。
试着用css animation实现的逐帧动画
作者:admin 日期:2018-10-20我的试验： 258754.cn/2018/tyfp/test.html
模仿对象是：http://www.101.com
我一个学生成功找到前端对口工作
作者:admin 日期:2018-10-20开始学写微信小程序
作者:admin 日期:2018-09-23早就有朋友跟我建议：“你应该开始写小程序，很简单，跟VUE的路子很象”。九月份，有一段时间手头没有新单子，于是开始学习。机会不错，从我一个业务关系那里买到了一个慕课的视频，《纯正商业级应用-微信小程序开发实战》。课程不错，我想听的都讲了。我不想听的，基本都没有。
花二天时间听完课程，自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样，但是小程序4个文件分开写，几个页面一起弄的话，感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
另外，组件的写法跟页面文件，两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中，而页面又不需要。感觉小程序好粗糙。
第三方库，我找了有赞出品的vant-weapp，跟vant for vue一脉相承。
js工具库，小程序
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow，还真好用。
编辑器这块儿，在Sublime中直接找了个小程序语法插件，配合原来使用的emmet，还挺好用。
总体来说，确实难度不大。熟悉VUE体系的不妨多学这一项技能。
http-vue-loader插件让你无需使用webpack也能尝鲜.vue单文件组件
作者:admin 日期:2018-03-25目前利用<script>方式，不使用webpack的开发人员还很多，我之前一直不知道，可以绕过webpack，直接尝鲜.vue的单文件组件方式，直到发现了这个组件。目前我已经在多个项目中使用。
这个插件的用法在百度上基本搜不到。具体使用方式可以看这个中文文档：
https://kuro.tw/posts/2017/07/11/%E4%B8%8D%E9%9C%80%E7%B7%A8%E8%AD%AF%E4%B9%9F%E8%83%BD%E8%BC%89%E5%85%A5-vue-%E5%85%83%E4%BB%B6%E6%AA%94-%E4%BD%BF%E7%94%A8-http-vue-loader/
也可以直接看github官网文档：
https://github.com/FranckFreiburger/http-vue-loader
2017年总结--写于2018年初
作者:admin 日期:2018-02-19经历：
今年主要做的都是移动端项目，仅有的三个PC端项目中，也都包含了移动端部分。
有两个项目做得苦，一个是项目不由自主，自己的事做完了，但是同伴没有时间推动，我做为主导人又不能辜负客户，这种情绪很折磨人。还有一个IRH项目，是一团乱麻，前后端沟通成本太高，虽努力推动，但始终无法着力，最终不得不放弃。放弃之后，如释重负。
也碰到了几个解决起来很吃力的技术问题，当然最终还是解决了。越过大山之后再回望，刚经历的也不过就是个小山包。真正的难题，是那些未知的迷雾，不声不响的让自己绕圈。
技术：
2017年所有移动端项目都使用了vue2.0，到下半年组件化程度更深。年底的最后一个项目中，甚至在非SPA架构中，直接使用了.vue的单文件组件。组件化的积累已经很多，明年肯定会过渡到webpack方式进行开发。
另外扫平了协作体系中一系列问题。比如mock测试、与后端的合作。这不光体现有技术上，很大程度也体现在与真正的后端人员、后端团队的协作与沟通。今年的IRH项目中，我思考不足，接下这种需要升级，需要兼容老接口的项目，又没有对后端提出明确的限制条件，结果导致前后端磨合出现大问题。开始的几天，光是跨域、列表格式、出错形式，都花了几个整工作日磨合。接下来，要去猜解他的技术文档，要一层层的去剥离页面逻辑。事实证明，这种类似行业ERP的项目，逻辑复杂，时间紧迫，因此最好是在一起工作，而不宜采用外包形式。
当然，IRH项目，催生了我对于组件化的认识，尽可能的组件化。感谢老白，提供了ajax过程中的promise思路。在我后几个项目中，利用axios主导的ajax体系，利用单例定义、拦截器、promise，对ajax请求进行了较完整的封装，彻底解决了请求方向的问题。在原型阶段引入easy mock，可以在后端未就位的情况下，模拟较复杂的接口情况，让前端提前进入角色。
另外一个项目，远在甘肃的嘉优购电商项目，则与之有不同的走向。这个项目，从原型开始，就由我在主导需求与接口。后端程序员按照我的要求在写接口。当然，此项目总体逻辑比IRH要简单。通过这个项目，我把一些知识点，提升到了实战程度。比如APIcloud打包、高德地图的各种应用、postman的测试技巧。apicloud将嘉优购商家端打包成APP这个过程中，让我接触到一个新的知识领域。实战中理解了从JS到APP，到底发生了哪些事情。对apicloud stodio工具和打包过程、原生API、驱动硬件，有了一定理解。也让自己成长为一个“产品开发者”，而不仅是一个前端程序员。毕竟，只有能够完全打通“需求-原型-设计-前端-后端-打包”的全过程，才算走完一个完整的产品历程。这一天，对我来说，来得太迟。在大分工的前提下，个人英雄出现的机率更低了。在后端这一块，我仍然是外行，只是通过前后端分离的模式，我可以对后端提出要求，也算是“打通了后端”。
对于地图应用这一块。从年初的云端湖项目的行车路线，到嘉优购项目的高德地图定位、云图、地图控件，把要用到的知识点，都经历了一下。
API接口规范方面，在年终的金圣达项目中，仍由我来设计接口。这时我终于可以收拾起前两个项目的血汗经验，进行比较规范的接口定义，与后端的合作也比较友好。
对于很多人关心的VUE第三方UI框架这块儿。今年我还是以使用YDUI和element-ui为主，年后打算在电商项目中引入一个“有赞vant”组件库。VUE的生态已经足够丰富，该有的都有了。---在组件方面，我已经脱离了心理依赖。
学习方面，入手了两个VUE相关的慕课网课程，争取早日看完。
2018愿景：
VUE提升到webpack开发方式。
继续实战APP开发。可尝试小程序。
做1-2个自己的小产品。
跨域时遇到的一个顽症总结
作者:admin 日期:2018-02-01在进行post跨域数据请求时（所有请求均header中带token），碰到一个奇怪的现象，postman测试可以通过，但是用页面进行调用时，总是报错。前后端忙活了大半天时间，最后找出问题。以下是程序员 “灰色头像”写的总结：
总结下今天出现的问题，主要是在跨域CORS的时候出现这个问题
首先需要知道一些容易忽略的知识点，浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
具体看
http://www.ruanyifeng.com/blog/2016/04/cors.html
还有一点需要注意，头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的，比如我们头部传的token这个自定义头部会出现下面2种情况
1、axios对于跨域CORS正常会发送2次请求，第一次“预检”，我们这边有token自定义头部字段，虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有，但只限制于上面所说的支持的，自定义的不会支持，所以就导致预检就失败，不会发送第二次请求
2、普通的ajax却可以支持，应该是没有做预检处理（这个还没详细了解）
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />，增加自定义的token，不能使用*这样的配置。这样对于做预检的，有什么自定义头部字段，这里就要额外增加。
常用前后端协作说明
作者:admin 日期:2018-02-011、对于要带权限访问的页面，首先调用全局接口/login获取返回的token和过期时间expire（单位：秒），token请自行保存客户端，过期时间expire默认30天过期，请提前比如10分钟进行过期，以免过期导致业务异常。
2、步骤1获取的token，每次请求调用鉴权页面时，都需要把token附带在头部Header中（由于token会存在特殊字符，不在url中传递）如：token:"步骤1获取的token串"
3、post格式前后端约定：前端请求头部参数格式需要设置Content-Type：application/json，后端post：$json_info = $HTTP_RAW_DATA
4、一般的查询request格式: /aaa?type=1&age=16 分页请求：/bbb?page=3
5、response总原则：1）body 直接就是数据，不要做多余的层次包装。2）错误/正确是两种不同的结构，出错时的返回数据式统一为
{
"code":401,
"msg":"相应的出错信息，方便前端提示"
}
code具体对应说明详见全局返回码说明。
6、正确时的“列表”返回结构：
{
"total": 9, //总条数
"page":***, //当前页码，第1页序号为1，不为0
"pagesize":5, //每页条数
"items": [
{ "pid": 82, "tit": "医学知识", "dDate": "2016-09-02 23:04:34"},
{ "pid": 83, "tit": "医学知识", "dDate": "2016-09-02 23:04:34"},
.............
]
}
7、“详情页”返回结构：
{
"tit": "标题",
"sub_tit":"副标题",
"article":"正文正文正文正文正文正文",
.............
]
}
8、时间格式：凡与时间(控件)相关的值，请使用以下三种之一，能保证控件直接兼容。
date--(yyyy-MM-dd)
time-(HH:mm)
datetime-(yyyy-MM-dd HH:mm)
------------------------------------
9、附返回码取值，仅供参考：
200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
201 CreateD - [POST/PUT/PATCH]：用户新建或修改数据成功。
202 Accepted - []：表示一个请求已经进入后台排队（异步任务）
204 NO CONTENT - [Delete]：用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
401 Unauthorized - []：表示用户没有权限（令牌、用户名、密码错误）。
403 Forbidden - [] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
404 NOT FOUND - []：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。
