一是學(xué)會(huì)了使用vs code
這是我用過(guò)最好用的IDE ,以后會(huì)繼續(xù)使用,分享一些好用的插件:
-版本控制
* CheckPoint 比較保存前后文件的異同 cmd+opt+s 然后右鍵比較
* Git History 圖形化的git log工具 cmd+shift+p 然后搜索git view
* vscode-fileheader 頂部注釋模板，可定義作者、時(shí)間等信息 Ctrl+Alt+i
* Bookmarks 書(shū)簽 cmd+opt+k/l/j 添加/后一個(gè)/前一個(gè)書(shū)簽
-開(kāi)發(fā)效率
* Auto Close Tag /Auto Rename Tag /Auto compelete Tag 自動(dòng)補(bǔ)全修改html標(biāo)簽
* HTML Snippets / Vue 2 Snippets / Vetur vue 語(yǔ)法提示
* npm Intellisense 自動(dòng)補(bǔ)全require包名
-調(diào)試兼容
* Beauty 代碼格式化 cmd+shift+b
* px to rem 把px轉(zhuǎn)化成rem alt+z
* Code Runner 在vscode顯示運(yùn)行結(jié)果,點(diǎn)擊右上角運(yùn)行按鈕
* Color Info 懸停自動(dòng)轉(zhuǎn)rgb,cmyk
二是學(xué)會(huì)了使用mac電腦
mac的配色 , 鼠標(biāo)操作和多桌面切換真的非常驚艷 , 有機(jī)會(huì)我還愿意繼續(xù)使用Mac電腦, 一些常用命令
* cd /usr/local/bin 進(jìn)入系統(tǒng)全局變量路徑
* fn + f11 返回桌面
* f3 切多桌面
* ctrl + shift + ^ 休眠
* cmd + shift + 4 截屏
* cmd + opt+i 調(diào)試臺(tái)
* cmd + r 刷新
三是理解了vue與react設(shè)計(jì)思想的差異
以前只會(huì)用vue,現(xiàn)在必須要用react開(kāi)發(fā),所以開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)想怎么用vue去實(shí)現(xiàn)類似的功能,在這種反復(fù)的比較中慢慢的理解了他們?cè)O(shè)計(jì)思想上的差異:
react是面向?qū)ο蟮膶?xiě)法,對(duì)后端程序員十分友好,也容易與ts整合進(jìn)行靜態(tài)編譯,vue是聲明式寫(xiě)法,外層又封裝了vue模板語(yǔ)法,小項(xiàng)目易于理解,開(kāi)發(fā)效率很高,對(duì)初學(xué)和轉(zhuǎn)行者非常友好.但當(dāng)項(xiàng)目變得龐大,我反而覺(jué)得react容易理解,vue看不懂,最近看的gui項(xiàng)目代碼有5萬(wàn)行,前端是用react寫(xiě)的,雖然有各種container套component,compose套HOC,而且props嵌套極深,有時(shí)候想追蹤一個(gè)props的值是哪來(lái)的都要一上午,文件各種花式嵌套,但是前端架構(gòu)邏輯非常清晰,而今年三四月份的時(shí)候我看功能類似的vue渲染層代碼,就很難讀懂了.而且react的面向?qū)ο髮?xiě)法一大優(yōu)勢(shì)是可以通過(guò)閉包來(lái)實(shí)現(xiàn)高階組件(HOC),把組件分成渲染層的純組件和負(fù)責(zé)邏輯層的外殼,這樣能更方便維護(hù).相比之下,vue的mixin功能簡(jiǎn)直弱爆了
react的思想是可控和可回溯,可控就是框架足夠簡(jiǎn)單,功能都通過(guò)插件擴(kuò)展,這樣不容易出現(xiàn)奇奇怪怪的問(wèn)題,可回溯就是數(shù)據(jù)不可變,react中的所有狀態(tài)都是以副本的形式出現(xiàn)的,他一是在model層擁有immuable這貨,定義的變量是不可變的,想給變量賦值必須建副本,我想用react開(kāi)發(fā)悔棋程序肯定特別方便,二是redux中的reducer必須返回一個(gè)新的state,所有存在過(guò)的state都不能被覆蓋,三是在jsx中即使是在this.setState改變數(shù)據(jù)的時(shí)候react也會(huì)為setState維護(hù)一個(gè)prevState狀態(tài),以保證數(shù)據(jù)的可回溯性,所以既然用react,那就充分發(fā)揮它的思想,我建議以后賦值都用這種寫(xiě)法:this.setState((prevState)=>({...prevState , newStateItem]});而vue的思想是簡(jiǎn)潔高效,一切都可變,雙向綁定,數(shù)據(jù)隨時(shí)在變,甚至連組件都可以通過(guò)操作符來(lái)實(shí)現(xiàn)雙向綁定,vuex中的state可以直接在前端通過(guò)commit改變,早先的版本甚至連props也能被賦值
剛開(kāi)始寫(xiě)react的時(shí)候并不理解react可控和可回溯思想,產(chǎn)生了諸多怨念,比如style為什么沒(méi)有命名空間,class名為什么不能用數(shù)組設(shè)置多個(gè)變量或是表達(dá)式,html嵌套進(jìn)js干什么,寫(xiě)個(gè)列表為什么還要寫(xiě)個(gè)map函數(shù)里面再套一堆html,redux為啥不能修改state等等,但是最近我想通了,react要使用最簡(jiǎn)單的結(jié)構(gòu)完成數(shù)據(jù)的可控和可回溯,其他的所有功能全部交給第三方插件來(lái)做,比如用'classNames'解決多個(gè)class名問(wèn)題,用'babel-plugin-react-html-attrs'來(lái)解決react中class,for等關(guān)鍵字沖突問(wèn)題,依賴webpack來(lái)解決;相反的,vue則使用全家桶的方式提供了一切功能.在兩個(gè)框架的比較之下,現(xiàn)在讓我來(lái)做抉擇,我想我會(huì)選vue
四是理解了前端虛擬機(jī)
虛擬機(jī)用來(lái)屏蔽底層硬件差異和dom渲染差異,使得程序可以跨端移植, react本質(zhì)上就是虛擬機(jī),虛擬dom屏蔽設(shè)備渲染差異( 因?yàn)閐om只有pc瀏覽器能識(shí)別 , viewPort只有手機(jī)能識(shí)別 , 但虛擬dom是js對(duì)象, 他可以被react解析成dom或者viewPort,這就實(shí)現(xiàn)了ui層跨端 ,而native屏蔽底層硬件差異 ,來(lái)實(shí)現(xiàn)跨端, 通過(guò)條件編譯使得程序可以在Android和ios都可以運(yùn)行,底層跨端實(shí)現(xiàn)的原理是通過(guò)虛擬IO:比如鼠標(biāo)的點(diǎn)擊事件,觸摸屏的touch事件,都會(huì)在虛擬機(jī)中統(tǒng)一映射成一個(gè)虛擬機(jī)能識(shí)別的key, key都是框架自己定義的,比如ON_TOUCH, 每個(gè)key對(duì)應(yīng)一個(gè)動(dòng)作 ,然后通過(guò)條件編譯推送給硬件,就可以跨端了)
五是學(xué)會(huì)了如何用react配合electron開(kāi)發(fā)跨pc平臺(tái)項(xiàng)目
在開(kāi)發(fā)之余還通讀了vue技術(shù)棧下的一個(gè)electron-vue大項(xiàng)目的源碼,徹底理解了用electron開(kāi)發(fā)跨pc平臺(tái)項(xiàng)目的邏輯
六是學(xué)會(huì)了如何用js與硬件通信
包括如何進(jìn)行編碼 , 如何封裝校驗(yàn)和發(fā)送指令 , 如何輪詢硬件以及如何寫(xiě)軟件看門(mén)狗保證硬件的健壯性,還學(xué)會(huì)了寫(xiě)簡(jiǎn)單的arduino程序,這期間深刻理解了node溢出的危害, 溢出是代碼不規(guī)范造成的 ,本質(zhì)上是能力不足,但是軟件做出來(lái)了有溢出,是很難調(diào)試的,就只能打補(bǔ)丁加看門(mén)狗了,一個(gè)軟件功能中我最多寫(xiě)過(guò)七個(gè)看門(mén)狗 , 狗與狗之間互相監(jiān)視互相調(diào)用 ,死循環(huán)套死循環(huán)再套死循環(huán),開(kāi)發(fā)體驗(yàn)簡(jiǎn)直不能再差 ,我沒(méi)用node寫(xiě)過(guò)高并發(fā) ,聽(tīng)說(shuō)在高并發(fā)里面的溢出更可怕 , 真是讓人瑟瑟發(fā)抖
七是對(duì)console.log是異步函數(shù)留下了深刻印象 , 掌握了js同步debugger的方法
虛擬機(jī)中用路由模式定義了大量的異步渲染，由于js中的micro隊(duì)列機(jī)制，這些異步渲染會(huì)先于console.log執(zhí)行，所以看起來(lái)console.log調(diào)試是正確的，但是在引用渲染的時(shí)候卻有各種奇奇怪怪的問(wèn)題，正確的方式是用debugger進(jìn)行單步調(diào)試，來(lái)感受一下坑爹的console.log輸出
let obj={};
console.log(obj) // {a:'abc'}
obj.a='abc'
一些題外話:
這段時(shí)間的工作經(jīng)歷,通過(guò)一些科普文章和所見(jiàn)所聞,自己也從一個(gè)機(jī)器人行業(yè)的外行變成了半個(gè)內(nèi)行,也了解了這個(gè)行業(yè)的一些特色.這期間了解了公司雙周迭代,敏捷開(kāi)發(fā)流程,學(xué)會(huì)了用Shadowsock連網(wǎng)寫(xiě)代碼,自己也有很大的成長(zhǎng)進(jìn)步
