我的前端转行之路-我在硬件公司做前端2019/07

一是学会了使用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去实现类似的功能,在这种反复的比较中慢慢的理解了他们设计思想上的差异:

  1. react是面向对象的写法,对后端程序员十分友好,也容易与ts整合进行静态编译,vue是声明式写法,外层又封装了vue模板语法,小项目易于理解,开发效率很高,对初学和转行者非常友好.但当项目变得庞大,我反而觉得react容易理解,vue看不懂,最近看的gui项目代码有5万行,前端是用react写的,虽然有各种container套component,compose套HOC,而且props嵌套极深,有时候想追踪一个props的值是哪来的都要一上午,文件各种花式嵌套,但是前端架构逻辑非常清晰,而今年三四月份的时候我看功能类似的vue渲染层代码,就很难读懂了.而且react的面向对象写法一大优势是可以通过闭包来实现高阶组件(HOC),把组件分成渲染层的纯组件和负责逻辑层的外壳,这样能更方便维护.相比之下,vue的mixin功能简直弱爆了

  2. 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也能被赋值

  3. 刚开始写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连网写代码,自己也有很大的成长进步

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容

  • 1.RN简介 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架...
    smart_yang阅读 19,402评论 0 8
  • 一,vue是什么? Vue.js(读音 /vjuː/, 类似于view) 是一套构建用户界面的渐进式框架。与其他重...
    不成才的IT狗阅读 3,145评论 0 31
  • Vue对比其他框架 这个页面无疑是最难编写的,但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框...
    伊滴墨阅读 1,805评论 0 15
  • 昨天圣诞节,今天周六,早起,上海,一个久违的大太阳,明媚耀眼,一扫一周工作处事的烦扰。做了一个决定:守着太阳,晒被...
    木荷月阅读 304评论 0 0
  • 《调调调》 起床起得好早 周围都是草 有些胡操 睡得不是很好 这样是不是不太好 心情有些浮躁 空气有些干燥 时间被...
    叔于田阅读 168评论 0 1