[心得] JavaScript 產生你的程式碼片段

看板Soft_Job作者 (sky172839465)時間6年前 (2019/06/07 09:33), 6年前編輯推噓7(8推 1噓 14→)
留言23則, 12人參與, 6年前最新討論串1/1
各位 端午節快樂！ 趁著放假寫了篇有趣的心得，最近用 JS 刷 LeetCode ，同時想加上測試與筆記， 可是要一個個手動加上去很麻煩啊！所以這篇文章就誕生了！ Medium：https://medium.com/yusong-blog/9a74ca06a7d5 事情是這樣子的 最近試著用 JavaScript 寫 LeetCode ，每解開一個問題預計會產出 題目的解答、解答的測試案例、解答的筆記並且將這些檔案的連結寫入專案的描述裡， 一共 1 個資料夾加上 5 個檔案，如連結所示： https://yusong.page.link/leetcode-in-js-structure 1. src/easy/0001-two-sum/index.js 題目的解答 2. src/easy/0001-two-sum/README.md 解答的筆記 3. src/easy/index.js 給測試案例使用的解答共同的出口 4. __tests__/easy/0001-two-sum.test.js 解答的測試案例，確保解答符合需求 5. README.md 專案的描述，當有新解答時描述最底下的表格應跟著新增一筆 連結上是每次要開始新的一題需要先準備好的檔案內容，真的非常枯燥又繁瑣， 有時候還會漏了某個檔案，尤其是加入新的專案描述… 這時候就會像面對考試時會突然覺得桌面的髒亂到不馬上整理不行， 我也突然產生了一股不想辦法解決這些重複性高的工作不行的使命感… 教練我只想寫 Code 在想要怎麼達成這個使命時，想到 Angular CLI 協助開發的體驗挺好的！ 只要在指令列輸入 ng g c new-cmp 就會幫你把新的檔案建立好， 並且連 import module 等等的語法都寫好了！ 稍微看一下 Angular CLI 的程式碼後發現，其實是透過 NodeJS 產生檔案， 再來只需要像印出九九乘法表把內容組一組輸出成檔案就好了！ 透過 JavaScript 產生程式碼片段 只要知道底下 2 件事即可產生任何客製化的程式碼片段： 1. 要在瀏覽器外執行 JavaScript 可以透過 node index.js 在 NodeJS 上執行 2. 使用 NodeJS 的 File System API 產生檔案 首先試著產生一個 hello world 的文字檔 https://yusong.page.link/generate-hello-world-in-js 再來把前面提過九九乘法表在 markdown 上實作一次吧！ markdown 的表格欄位如果變多了寫起來很容易少寫或多寫， 所以能透過程式自動產生是最理想的 https://yusong.page.link/generate-nine-nine-table-in-js 最後加入一些套件，玩點有趣的花式操作 ，執行後詢問使用者問題並將 回覆結果做成 JavaScript Object 的格式寫入檔案 ans.js 1. npm init 初始化 package.json 2. npm i --save-dev colors inquirer 安裝套件 3. JavaScript only ! https://yusong.page.link/generate-complex-file-in-js colors：讓執行過程中印在終端機上的 console.log 加上不同色彩 Inquirer：可以寫入問題讓使用者填寫、選擇答案、驗證回答、修改內容…etc 化繁為簡後 現在來看看，能自動產生程式碼片段後， 寫 LeetCode 前要準備好那些檔案變得多麽的輕鬆 https://youtu.be/j5XeZQNUx2E
加入提問來決定產生的內容，有 3 個原因： 1. 驗證資料格式、避免輸入錯誤資訊，結果檔案已經被產生出來 2. 內容太多了，問題的長度如果太長，整行指令看起來很不方便 3. 一段時間沒開發後可能已經不記得參數要放什麼了 結尾 好了！這下子我終於可以心無旁騖專心地 LeetCode 了！ 除非桌面又開始令人感到凌亂不堪 希望這篇文章可以讓你把重複性高的工作透過熟悉的 JavaScript 整理後自動產生提高作業的生產力與專注力，並且降低出錯與遺漏的機率， 如果有對這篇文章有任何建議或疑問歡迎在底下留言與分享，謝謝 ----- Sent from JPTT on my iPad -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.33.19.17 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1559871236.A.BE0.html ※ 編輯: sky810684 (114.33.19.17 臺灣), 06/07/2019 09:54:37
→
06/07 10:07, 6年前 , 1F
？
06/07 10:07, 1F
※ 編輯: sky810684 (223.138.124.238 臺灣), 06/07/2019 10:32:57
→
06/07 10:33, 6年前 , 2F
沒有編輯好內文，被截掉了XD
06/07 10:33, 2F
推
06/07 10:58, 6年前 , 3F
vscode snippet?
06/07 10:58, 3F
噓
06/07 13:22, 6年前 , 4F
題目也沒多複雜，要刷不會用cpp嗎
06/07 13:22, 4F
推
06/07 14:15, 6年前 , 5F
js社群的水準真是從來不讓人失望
06/07 14:15, 5F
→
06/07 15:16, 6年前 , 6F
看到別人用ptt發medium 我就pass了
06/07 15:16, 6F
推
06/07 15:34, 6年前 , 7F
感謝分享 願意分享就是推
06/07 15:34, 7F
→
06/07 17:17, 6年前 , 8F
可能是面試需求吧，我面試寫python自然就用python
06/07 17:17, 8F
→
06/07 17:17, 6年前 , 9F
練
06/07 17:17, 9F
推
06/07 18:16, 6年前 , 10F
snippet +1
06/07 18:16, 10F
→
06/07 21:07, 6年前 , 11F
vscode 的 snippet 是針對目前的檔案所以不太夠用，需
06/07 21:07, 11F
→
06/07 21:07, 6年前 , 12F
求中同時有好幾個檔案需要新的程式碼片段或是更新甚至
06/07 21:07, 12F
→
06/07 21:07, 6年前 , 13F
移除，這樣還是需要一個個手動操作
06/07 21:07, 13F
推
06/07 22:37, 6年前 , 14F
若要推廣的建議話要包成 command line binary 吧
06/07 22:37, 14F
→
06/07 22:37, 6年前 , 15F
然後推到 npm 上, 這樣就很好安裝
06/07 22:37, 15F
→
06/07 22:38, 6年前 , 16F
不懂這跟 js 社群有什麼關係, 樓主是應該把內文直接貼上來
06/07 22:38, 16F
推
06/07 22:42, 6年前 , 17F
分享就給推 不然這個版也沒什麼有趣的東西
06/07 22:42, 17F
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/07/2019 23:08:31 ※ 編輯: sky810684 (122.121.12.100 臺灣), 06/07/2019 23:28:07
→
06/07 23:37, 6年前 , 18F
感謝提醒，沒有注意到貼連結要附上內文，這個心得只是
06/07 23:37, 18F
→
06/07 23:37, 6年前 , 19F
希望不知道能這樣用 NodeJS 的人可以多一些選擇，然後
06/07 23:37, 19F
→
06/07 23:37, 6年前 , 20F
自己寫自己客製化的程式碼片段，所以沒必要放到 npm 上
06/07 23:37, 20F
→
06/07 23:37, 6年前 , 21F
面 XD
06/07 23:37, 21F
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/07/2019 23:38:40 ※ 編輯: sky810684 (122.121.12.100 臺灣), 06/08/2019 00:11:13
推
06/08 01:42, 6年前 , 22F
產生器不是比較好？
06/08 01:42, 22F
內文有說明同時有好幾個檔案，還需要更新現有的程式碼，用產生器會少掉一些客製化的彈性
推
06/08 12:02, 6年前 , 23F
覺得直接用vscode的leetcode套件會方便很多
06/08 12:02, 23F
因為想留下解題的紀錄，不只是刷題，所以才會這樣做 ※ 編輯: sky810684 (122.121.12.100 臺灣), 06/08/2019 16:37:49 ※ 編輯: sky810684 (122.121.12.100 臺灣), 06/08/2019 16:39:18
‣ 更多 sky810684 的文章
文章代碼(AID): #1S-Ry4lW (Soft_Job)