18年末的JS開發總結

2019-01-11
#js

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: