前端开发,技术培训,动效研究,求职信息

点击打开：

http://blog.258754.cn/2021/test_water/test_water.html

 试着用网上的一个vite2的脚手架做了个移动端的尝试。vite最大的好处就是--真的快！也可能是我页面比较少，但是每次热更新，基本就是一存盘，浏览器就完成了变更，体验太好了。

换新脚手架，要把所有常用配置都验证一下，并且把原来webpack中的选项都做到在vite中等价实现。

包括：

* px2rem的解决方案，在postcss.config.js中配置，转化为vw单位，比rem方式要先进点。

* vant基础样式定义，在theme.less中。

* lodash及moment全局引入，在/index.html中直接用<script>标签引入的，在vue文件中和.js中直接可用，但是在.ts文件中，如果不做import，会有红色的错误波浪线出现，但不影响使用。

* import后缀为vue的组件时，必须带上vue后缀，但js/ts不用带后缀。

* 有时候大的变化要CTRL+F5强制刷新页面，热更新才会生效。

* 图片引入方式：

<img :src="require('@img/aaa.png')" />

background-image: url("@img/aaa.png");

* 静态资源在/public目录下，在页面中用/images这样的路径引入即可。

* webpack允许的require在此都不能用，要改为import。写法方面，@import "~@/assets/less/_variable.less" vite中要去掉~写成：@import "@/assets/less/_variable.less";

* 控制台过滤。vite会出现一些控制台输出，暂时没有配置方法屏蔽，折中办法，在控制台搜索框输入-vite,可以过滤掉这些输出。

* 运行命令与环境变量。跟webpack略有不同。运行方式看package.json就知道了。环境变量可放在.env.development这样的文件中，跟webpack一致。在所有代码中输出import.meta.env，可以看到环境变量的所有。具体看文档。

 

我本人对于vue3和ts不是很熟悉（学不动了），所以宁愿工作在vue2+js的环境中。在vite脚手架中，这两种方式是可以混用的。所以按自己合适的模式使用就行了。

 

放心去享受vite带来的快速体验吧！

今年4月1号开始在YT公司参与一个商业管理系统的开发，担任前端开发，跟十几个同事一起工作了二个月时间。

 moment('2021-1')这种格式定义一个日期时，安卓机可以通过，苹果机不行，显示NaN,

演示在此： http://258754.cn/2020/ehs/canvas_and_svg.html

技术要点：

- 异形边框，自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px，也可以使用rem。

- 边框SVG+MASK+路径动画，底部CANVAS动画。

- flexible.js，每个块的宽、高，会根据整个页面的宽度自适应变化 。

查看更多...

演示地址：

http://blog.258754.cn/2021/vue_svg_tweenmax_demo/index.html

- 根据窗体的width/height参数，自动计算生成SVG的path路径

- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画，tweenmax的CSS动画生成右下角的色彩变化

- VUE组件化，方便复用

查看更多...

 涂鸦智能（杭州）外协工作小记

 

查看案例请点击此处：

 顺便提一下，这种连线可以跟动画相结合，参见我的另一个小例子：

http://blog.258754.cn/2016/svg/test_svg_2019.html

VUE+TWEENMAX+SVG动画，用来模拟流程控制

我打算在含浦、洋湖、后湖这个3公里圈子里找份前端工作。上周通过BOSS直聘联系到后湖的一家公司，基本条件和待遇双方都符合，于是约定面谈。

Tags: 面试面试

这次赴北京，参与中科院某院组织项目，历时近一个半月。整个项目组由8个不同的单位派员组成，前端人员十多人。
项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。

我担任前端工作：
1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。
2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。
3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）
4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。
5、对全局scss的定义：使用了内置的element-variables变量文件，统一颜色及组件外观。
6、使用vuex进行跨组件通讯。
7、大量的api请求和前后端联调工作。（后文详细阐述）

三个组件的功能描述：
1、树组件：
这个树组件我们内部命名为gtree（类似脑图），节点上要通过拖拽行为增加子节点。树图与数据双向交互，节点可增、删、改。
我们使用了go.js（破解版）构建。
这个树的核心代码由黄工写的，外部事件由我进行定义和调试。

2、甘特图：
这个组件先后开发了两版。之前版本由赵工写的，性能方面有些问题。后面这一版由黄工写，外部接口由小周进行调试。
这一版避免了数据条数较多时的卡顿问题，在上下连续拖拽和展开时做了逐步加载，这是一个重大的升级。
“时间条”从头开始就是黄工写的，可以拖动移动，也可以拖动改变大小。

3、圆形导航：
这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码，已经基本掌握。
环状实现用的SVG的原生PATH对象，这部分体现出黄工的算法功底。

以下谈谈我的收获：
1、前后端联调涉及大量的数据处理，要熟练地使用ES6语法和lodash库。对我本人来说，以前这方面实战得较少，这次跟小周、小任学了不少语法和技巧。
2、图形算法方面，黄工表现出非常高的开发效率。他对算法很熟，比如将四个数组转化成四个同心圆，并进行均分切割，再得到PATH对象。他对DOM模型很熟，比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强，他读了gojs的英文版的官方文档，才完成了gtree的所有功能。我除了学习他的构建思路，还跟他学到了算法、控制台debugger的一些技巧。
3、对于VUE工程化、同步协作方面，有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。
4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。


接下来的研发想法：
1、重点研发一下SVG图形写法（简单的用原生，复杂的用框架）。争取能自如地实现SVG图形化。
2、总结一下lodash的各种用法，尤其是跟日常工作相关的技法。
3、建议使用postman用到开发中，后端测试完样例，再交给前端，可较大提升前后端协同能力。

查看更多...

某大屏展示项目中，要实现“点击乡级区划，显示出相应的数据”，

最终效果，链接：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提供的工具，对区划进行了合并，完美解决了问题。   合并操作及控制台语法花了点时间。	工具：mapshaper.org   解析贴： https://segmentfault.com/q/1010000013001601
同一页面展示多个图表	vue组件将地图封装了一下	查看本文源码

 

解决了以上主要问题，绘制类似地图，就只剩一些细节问题了。

 

 

本文同时发布到两处：

本人博客：http://blog.258754.cn

知乎专栏《低水平前端》：https://zhuanlan.zhihu.com/c_1040198727197237248

Tags: echartechart geojsongeojson

 我刚咨询了阿里云客服：

一个阿里云帐号，只能对应一个备案主体。

可以用邮箱做为主ID来注册阿里云帐号。也就是说，对于那种一个管理员管理多个备案的情况，可以用一个手机、多个邮箱组合，来注册多个阿里云帐号，进而达到管理多个备案主体的目标。