一是学会了使用vs code
这是我用过最好用的IDE ,以后会继续使用,分享一些好用的插件:
-版本控制
* CheckPoint 比较保存前后文件的异同 cmd+opt+s 然后右键比较
* Git History 图形化的git log工具 cmd+shift+p 然后搜索git view
* vscode-fileheader 顶部注释模板，可定义作者、时间等信息 Ctrl+Alt+i
* Bookmarks 书签 cmd+opt+k/l/j 添加/后一个/前一个书签
-开发效率
* Auto Close Tag /Auto Rename Tag /Auto compelete Tag 自动补全修改html标签
* HTML Snippets / Vue 2 Snippets / Vetur vue 语法提示
* npm Intellisense 自动补全require包名
-调试兼容
* Beauty 代码格式化 cmd+shift+b
* px to rem 把px转化成rem alt+z
* Code Runner 在vscode显示运行结果,点击右上角运行按钮
* Color Info 悬停自动转rgb,cmyk
二是学会了使用mac电脑
mac的配色 , 鼠标操作和多桌面切换真的非常惊艳 , 有机会我还愿意继续使用Mac电脑, 一些常用命令
* cd /usr/local/bin 进入系统全局变量路径
* fn + f11 返回桌面
* f3 切多桌面
* ctrl + shift + ^ 休眠
* cmd + shift + 4 截屏
* cmd + opt+i 调试台
* cmd + r 刷新
三是理解了vue与react设计思想的差异
以前只会用vue,现在必须要用react开发,所以开发的时候经常会想怎么用vue去实现类似的功能,在这种反复的比较中慢慢的理解了他们设计思想上的差异:
-
react是面向对象的写法,对后端程序员十分友好,也容易与ts整合进行静态编译,vue是声明式写法,外层又封装了vue模板语法,小项目易于理解,开发效率很高,对初学和转行者非常友好.但当项目变得庞大,我反而觉得react容易理解,vue看不懂,最近看的gui项目代码有5万行,前端是用react写的,虽然有各种container套component,compose套HOC,而且props嵌套极深,有时候想追踪一个props的值是哪来的都要一上午,文件各种花式嵌套,但是前端架构逻辑非常清晰,而今年三四月份的时候我看功能类似的vue渲染层代码,就很难读懂了.而且react的面向对象写法一大优势是可以通过闭包来实现高阶组件(HOC),把组件分成渲染层的纯组件和负责逻辑层的外壳,这样能更方便维护.相比之下,vue的mixin功能简直弱爆了
-
react的思想是可控和可回溯,可控就是框架足够简单,功能都通过插件扩展,这样不容易出现奇奇怪怪的问题,可回溯就是数据不可变,react中的所有状态都是以副本的形式出现的,他一是在model层拥有immuable这货,定义的变量是不可变的,想给变量赋值必须建副本,我想用react开发悔棋程序肯定特别方便,二是redux中的reducer必须返回一个新的state,所有存在过的state都不能被覆盖,三是在jsx中即使是在this.setState改变数据的时候react也会为setState维护一个prevState状态,以保证数据的可回溯性,所以既然用react,那就充分发挥它的思想,我建议以后赋值都用这种写法:this.setState((prevState)=>({...prevState , newStateItem]});而vue的思想是简洁高效,一切都可变,双向绑定,数据随时在变,甚至连组件都可以通过操作符来实现双向绑定,vuex中的state可以直接在前端通过commit改变,早先的版本甚至连props也能被赋值
-
刚开始写react的时候并不理解react可控和可回溯思想,产生了诸多怨念,比如style为什么没有命名空间,class名为什么不能用数组设置多个变量或是表达式,html嵌套进js干什么,写个列表为什么还要写个map函数里面再套一堆html,redux为啥不能修改state等等,但是最近我想通了,react要使用最简单的结构完成数据的可控和可回溯,其他的所有功能全部交给第三方插件来做,比如用'classNames'解决多个class名问题,用'babel-plugin-react-html-attrs'来解决react中class,for等关键字冲突问题,依赖webpack来解决;相反的,vue则使用全家桶的方式提供了一切功能.在两个框架的比较之下,现在让我来做抉择,我想我会选vue
四是理解了前端虚拟机
虚拟机用来屏蔽底层硬件差异和dom渲染差异,使得程序可以跨端移植, react本质上就是虚拟机,虚拟dom屏蔽设备渲染差异( 因为dom只有pc浏览器能识别 , viewPort只有手机能识别 , 但虚拟dom是js对象, 他可以被react解析成dom或者viewPort,这就实现了ui层跨端 ,而native屏蔽底层硬件差异 ,来实现跨端, 通过条件编译使得程序可以在Android和ios都可以运行,底层跨端实现的原理是通过虚拟IO:比如鼠标的点击事件,触摸屏的touch事件,都会在虚拟机中统一映射成一个虚拟机能识别的key, key都是框架自己定义的,比如ON_TOUCH, 每个key对应一个动作 ,然后通过条件编译推送给硬件,就可以跨端了)
五是学会了如何用react配合electron开发跨pc平台项目
在开发之余还通读了vue技术栈下的一个electron-vue大项目的源码,彻底理解了用electron开发跨pc平台项目的逻辑
六是学会了如何用js与硬件通信
包括如何进行编码 , 如何封装校验和发送指令 , 如何轮询硬件以及如何写软件看门狗保证硬件的健壮性,还学会了写简单的arduino程序,这期间深刻理解了node溢出的危害, 溢出是代码不规范造成的 ,本质上是能力不足,但是软件做出来了有溢出,是很难调试的,就只能打补丁加看门狗了,一个软件功能中我最多写过七个看门狗 , 狗与狗之间互相监视互相调用 ,死循环套死循环再套死循环,开发体验简直不能再差 ,我没用node写过高并发 ,听说在高并发里面的溢出更可怕 , 真是让人瑟瑟发抖
七是对console.log是异步函数留下了深刻印象 , 掌握了js同步debugger的方法
虚拟机中用路由模式定义了大量的异步渲染，由于js中的micro队列机制，这些异步渲染会先于console.log执行，所以看起来console.log调试是正确的，但是在引用渲染的时候却有各种奇奇怪怪的问题，正确的方式是用debugger进行单步调试，来感受一下坑爹的console.log输出
let obj={};
console.log(obj) // {a:'abc'}
obj.a='abc'
一些题外话:
这段时间的工作经历,通过一些科普文章和所见所闻,自己也从一个机器人行业的外行变成了半个内行,也了解了这个行业的一些特色.这期间了解了公司双周迭代,敏捷开发流程,学会了用Shadowsock连网写代码,自己也有很大的成长进步
网友评论