18年末的JS開發總結

2019-01-11

18年,受寵若驚的被dalao拉去他們那裡實習… … 也就正式的開始積攢起了我的Js開發經驗,畢竟個人能力還是渣渣,於是整理一下撒落一地的渣渣,出產此文。

此文為日常記錄,並非技術性博客。

一個菜鳥的視角,從Go轉TS(JS)

“海星,你的Go寫的Web服務端能用。來接手這個項目,寫TS吧。”

大佬話音剛落,瞬間背後一涼,雖然對於大佬們來說看看文檔就好,可是我做不到呀…於是開始笨笨的轉換思路,用著大佬開團組的框架,也沒少被說就是了。

總得來講Web服務端框架們的套路還是一樣的,之前熟悉過MVC的框架(例如BeeGo、Laravel)也都能用上,實際難度係數不大。但理解框架中的一些功能就有點苦惱我這個新手了,還沒有完全理解透大佬框架的每一個細節,總之用就好~

於是開始一點點的接觸到:express.js、pug.js、sequelizeORM.js 組合的各種TS寫法… 之前相接處的JS技術棧,NodeJS版本管理使用nvm以及用yarn來管理依賴… 非常順滑的一套。

自己折騰1.0

這套技術棧感覺用著很絲滑,當然離不開自己試圖拼一下啦(雖然至今還沒有完成框架的某些高級操作),用來支援自己和蝦米弄得“過家家團隊”。框架功能拼起來還是大佬用的那些東西,可是寫起來就不是了。造輪子固然苦了一點,拿來用還是很舒服的,畢竟大佬的東西是大佬的,隨隨便便用可是要挨說的。

於是乎,第一個NyaQuest 就拼出來了,因為設計模式能力不足,並沒有很多騷操作。一個比較奇葩的Express的寫法就是了,甚至沒有用上TypeScript。也只用在了:

  • 某司網站 x3
  • 哈爾濱某國際青少年動漫周
  • 某吧管理系統
  • 某約玩平台

總之也是丟人丟的夠廣的,沒有大佬所用的騷操作自然是坐不住的,不過像是狀態機那樣的我才學會是什麼以及怎麼用的東西…還是要以後自己一點點來做的。大佬就是大佬,羨慕哭。

總得來講拼個這玩意還真的讓我了解到了 Commonjs 規範和大佬一套工具的基礎使用,還算不虧不虧,雖然時間和製作初咕咕咕的項目實在是有點… 嗯

自己折騰2.0

本來年終項目是想使用C#寫的,因為懶得要死(畢竟比起JS,C#雖然有好用的ASP.net core 踩了一路坑還是被勸退了,人懶是致命啊,沒有好用簡便的數據庫ORM真的會死啊)

不用TypeScript來做自然是不會善罷甘休的,在依舊不了解JS的情況下,繼續折騰。這次是覺得koa.js及阿里的egg.js 是一個不錯的,至少不是一種奇怪的分支寫法,於是就拿來直接拼。拼起來難度不高,只是比較麻煩、比較折騰,其他還好。功能很全至少包括基本的MVC及基礎的單元測試,大廠出品還是好!

個人不是覺得Egg自帶的Sequelize的最佳實踐是最佳的,還是之前框架啟動的時候生成好數據庫內容感覺比較合理。沒搞懂Egg之前還是把async扔到了路由(反正都是要執行嘛),有時候可能最佳實踐也不是最佳…

這次的折騰還沒有結束,畢竟阿里出品的Egg還沒有完全搞懂他這個TS編譯后的JS加載以及執行方式…只能在接下來的n個項目里一點點用一點點摸索啦。

前端部分,因為自己很長時間一直不熟悉vue,覺得很難。於是在11月的某項目中決心已定要用一下,逼迫自己裝上WebPack用Vue…最終新世界的大門大開。其實、不過、掌握了的話 難度其實不是很高。

踩坑

折騰這麼多,坑實際上還是很多,不踩一下還是不知道的。

老的CommonJS規範、新的ES6模塊化語法

這絕對是各種自拼框架過程中的一個大坑,雖然設計模式固然好,但是連基礎的以來引入方式不知道,只能GG吧。總之還是建議想自拼JS框架的盆友們先吃透這些姿勢,免得像我一想半路瘋狂查資料降低效率什麼的。

CommonJS

導出文件中定義 module.exports 可以是任何的類型不受限,被引入后作為一個變量。

注意這是一個拷貝值

m.js

1
2
3
4

module.exports = function (){
//doSomethingHere...
}

main.js

1
2
let doSomething = require('./m.js');
doSomething();//doSomethingHere...

Import

這個和 CommonJs 不同!是引用值

m.js

1
2
3
4
5
6
7
8
9
export default class DoSomethingClass {
public async hi(name){
return 'hi';
}
}
//雖然也可以這樣用
export function test(){
//....
}

app.js

1
2
3
4
import {DoSomethingClass,test} from './a.js';
DoSomethingClass.hi()
test()
//...

JS中一個對象賦值給變量,這個變量得到的居然是指針????

如上述是個大坑…

箭頭函數在Promise中then的使用

是的 箭頭函數內部調用 this會感受到起飛、飛到外面的感覺,然兒在Promise的then中想調用外面的東西,暫時我就是這麼做的。

總結?

其實用慣了其他語言JS坑實質上還是很多的…

(有點懶了未完待續?)


Comments: