jason chen

jason chen

此人尚未填寫簡介。
登入次數：92 次
註冊於2023年02月16日
  發表了 2 篇貼文
  新增了 13 則留言
  貼文共 3,618 次瀏覽
全部留言
詢問JS children使用方式

您好 x.chlidren 是一個像是陣列的東西 ( HTMLCollection )， 印出來後會看到 ![](https://i.imgur.com/R4z1z9C.png) ```javascript // x.chlidren => 陣列 // x.chlidren[0] => 陣列裡的東西 const x = { children: [{ nodeName: "SPAN", textContent: 'test01' }, { nodeName: "INPUT", textContent: "" } ] } // x.children 是一個像是陣列的東西，所以在陣列裡面找 textContent 屬性會 error console.log(x.children.textContent) console.log(x.children[0].textContent) ```

[問題] Zod 的 .optional() 使用方法

hi zod 通常是拿來做表單或 api 資料的型別驗證， 我看到的大多作法是自己定義 type， 加上使用 react 的 ComponentProps， 這樣還可以獲得 html 的原始 props。 ```typescript import { ComponentProps } from "react"; type MyDivProps = ComponentProps<"div"> & { myProp: string; }; const MyDiv = ({ myProp, ...props }: MyDivProps) => { console.log(myProp!); return <div {...props} />; }; ``` 參考 : https://www.totaltypescript.com/react-component-props-type-helper

非同步 JS 訓練一：第3課 ── 認識 async/await 語法

作業繳交 https://jsfiddle.net/jason60810/gwdn7c6f/6/ 1. try/catch：在使用async和await時，我們使用try/catch來進行錯誤處理。如果API請求或其他操作出錯，程式會立即跳到catch區塊。 2. finally：這部分用來更新UI，不論之前的操作成功或失敗，它都會執行。 3. async function 回傳 Promise：使用async宣告的函數會自動回傳一個Promise。即使函數內沒有明確返回值（return），它仍然會回傳一個解析為undefined的Promise，所以可以在函數執行完畢後使用.then()或await進行後續操作，如下： ``` fetchOrderDetails().then(() => { console.log("fetchOrderDetails has completed."); }); ```

非同步 JS 訓練一：第2課 ── 認識 promise chain 鏈接

作業繳交 https://jsfiddle.net/jason60810/9zd0wpjL/42/ then()：用於處理成功的回應。這裡我們會獲得用戶ID和訂單ID。 catch()：用於捕捉錯誤。例如，如果我們試圖獲取一個不存在的訂單ID，catch()會被觸發。 finally()：不管成功或失敗，這一段總會被執行。在這裡，我們用它來隱藏loading提示。 因為jQuery自身不支持finally()，所以我用Promise.resolve()將jQuery的$.get()轉為原生的Promise，這樣我們就能使用finally()了。

非同步 JS 訓練一：第1課 ── 認識 callback hell

作業繳交 https://jsfiddle.net/jason60810/9zd0wpjL/11/ 可以使用 array.at(-1).id 來取得最後一個 order 的 id 不用 array[ array.length - 1 ].id

關於 e2e 測試的一些筆記

vue 官方文件還有介紹測試的種類和推薦工具 [連結](https://vuejs.org/guide/scaling-up/testing.html) react 文件都沒有QwQ

Conditional Rendering 常見錯誤

以前用 java 覺得定義型別很麻煩，原來都是防止射自己的腳🤣

後端 JS 訓練一：第1課 ── 安裝 node 環境

因為有時要因應不同的專案，安裝不同的 node 版本， 可以用以下版本管理程式來安裝切換不同版本的 node， 如果是 window 使用者，可能會遇到以下問題 1. 找不到指令要設定環境變數 2. 權限不足要使用系統管理員啟動終端機 3. powershell 可能要設定權限 有使用過套件: 1. [nvm](https://github.com/nvm-sh/nvm) - [powershell 權限設定問題](https://hackmd.io/@tZ_qYOO6SJCdpNj82sXh9g/HyxTBfXl5) 2. [fnm](https://github.com/Schniz/fnm) 用 rust 做的比較快，但在 window 安裝會遇到問題，雖然 readme 有步驟， 但還需要到這 repo 的 issue 找答案，目前我也沒有裝好，只有在 powershell 時才能用， 用其他的終端機都會有問題

求職疑問

公司的需求把他當作寫理想情人條件，不可能完全符合 就算完全符合，也不一定會錄取。 所以跟完 1 個自學課程就開始丟履歷，邊面邊改比較有效率。

[資源分享] 超好用的擴充套件你還不裝？裝了人生直接逆襲，日子過得好舒服！！

# [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc) 除了觀看網頁元素的樣式，還可以調整，甚至拖拉移動整個元素 # [Supatabs](https://chrome.google.com/webstore/detail/supatabs/icbcnjlaegndjabnjbaeihnnmidbfigk) 讓瀏覽器分頁可以像書籤整理，減少 chrome 再吃光 RAM

[作業問題] JavaScript系列八：第5課

# [修改後的 replit](https://replit.com/@jason60810/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 我不確定錯誤的原因，推測是 vue 的 reactive value 的更新和 chart.js 的 update 形成無限遞迴或迴圈，導致新增或刪除時會產生以下錯誤 ![](https://i.imgur.com/W0eEO0X.png) ## 修改地方 ### [shallowRef](https://stackoverflow.com/questions/68602389/maximum-call-stack-error-when-attempting-to-update-chart-in-vue-js) 87 行，阻止 vue 對 this.weightChart 進行深層監聽 ### [Array Change Detection](https://vuejs.org/guide/essentials/list.html#array-change-detection) 52 - 54 行改用 non-mutating methods

💡 功能預告發想：文章 API 💡

感謝大大 😭 迷因倉庫 API 也超讚

JavaScript 系列八：第1課 ── 碼表應用程式

https://replit.com/@jason60810/vue-online-stopwatch

熱門搜尋： 公司 作為 網站 框架 媒體 改善 "; 取代 QA 開發 伺服器 '; ') 技術 分享 系列 作品 php AWS part ui solid 入門 工作 Js css 客製化 odf design gpt 演算法 title html id 乾淨 Openai 使用 onClick JS JavaScript ＣＳＳ github action ejs 搜尋 練習 Javas node 模仿 Java 作業 React Context 邁向資深之路 lara jqu M' sap Response git app 結構 for REACT 架構 學習 前端 ar spotify Entity Ml' 中文 React' 聊天機器人 ci component 語言 COM error Line javascript JAVA 論壇 Ml react pchun vs 課程 套件 spring boot docke js javasc 新創 第一 vim index.php HTML與CSS作業分享 Vue postgresql 效率 部署
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。