站長阿川

站長阿川

👉 身份：資深全端工程師、指導過無數人半路出家轉職 👉 使命：打造 CodeLove 成為優質新手村，讓非本科也有地方自學＆討論
登入次數：702 次
註冊於2022年11月28日
  發表了 398 篇貼文
  新增了 1,179 則留言
  貼文共 606,259 次瀏覽
全部留言
JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

寫得很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

很好！順利通過！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

很好！順利完成！

JavaScript 系列八：第6課 ── 天氣查詢應用程式

OK，順利通過！

JavaScript 系列八：第6課 ── 天氣查詢應用程式

寫得很好！網頁很漂亮！順利通過！

JavaScript 系列八：第5課 ── 體重追蹤應用程式

寫得很好！順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

畫面整齊、漂亮，寫得很好！順利通過！

JavaScript 系列一：第4課 ── 基本的陣列操作

寫得很好，順利通過！

JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件

寫得很好，順利通過！繼續保持！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

OK，順利過關！

自學網頁の嬰兒教材：第5課 ── 用力送出表單

OK，順利過關！

JavaScript 系列三：練習2 ── toast 吐司元件

寫得很好，順利完成！

JavaScript 系列三：練習1 ── alert 示警元件

寫得很好，順利完成！

JavaScript 系列二：第7課 ── 用 Selector API 選取元素

有 bug，看我前面留言～

JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style

有 bug，多個待辦的時候，後面的已完成按鈕，點擊後，文字不對喔！

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

OK 花了不少時間，我終於研究完了 主要問題出在這裡 ``` data() { return { weightChart: null, // ...others } }, ``` 放在 data 這邊的，會被引進 vue 的 reactivity 機制 但是，我們並不希望 weightChart 被 vue 監聽、自動更新 我們希望透過 `this.weightChart.update()` 手動更新，也就是我們自己管理相關 state，然後手動去觸發更新 這種情況，把 weightChart 移到 data 外面即可，就變成普通的物件屬性，不會具有 reactivity ``` weightChart: null, data() { return { // ...others } }, ``` 執行之後會發現，「新增」沒問題了，但是「刪除」依然有問題 繼續觀察程式碼，可能有關的是這裡 ``` this.weightChart = new Chart(this.$refs.weightChartDOM, { type: 'line', data: { labels: this.dates, datasets: [{ label: '體重', data: this.weights, borderWidth: 1 }] }, }); ``` labels 與 datasets 期待的是陣列資料 使用 `console.log(this.dates)` 觀察變數型別，會發現我們傳進去的是帶有 vue reactivity 功能的 data（vue 使用 proxy 實作） Chart.js 內部可能也有在監聽 `變數` 變化的機制，所以衝突 來試著把這邊的 reactivity 也拿掉。方法有很多種，我這邊用最土炮的一種：轉成 JSON 字串再轉回來 ``` this.weightChart = new Chart(this.$refs.weightChartDOM, { type: 'line', data: { labels: JSON.parse(JSON.stringify(this.dates)), datasets: [{ label: '體重', data: JSON.parse(JSON.stringify(this.weights)), borderWidth: 1 }] }, }); ``` 除此之外，在新增、刪除的最後 ``` this.weightChart.data.labels = this.dates this.weightChart.data.datasets[0].data = this.weights this.weightChart.update() ``` 也一併改掉，讓事情單純一點：我們都按照 Chart.js 期待的資料型態去傳 ``` this.weightChart.data.labels = JSON.parse(JSON.stringify(this.dates)) this.weightChart.data.datasets[0].data = JSON.parse(JSON.stringify(this.weights)) this.weightChart.update() ``` 大功告成！解決問題！ --- ### 備註一 就跟其他眾多解法一樣：以上這做法，也只算是 workaround 因為我們沒有興趣深入研究 Chart.js 監聽 labels 跟 datasets 的變化機制 （通常只有 senior developers 會在這時候想深入進去搞懂） 既然都是 workaround，就隨便找個方法搞定就是了，解法不一定很有道理（我們根本沒有100%搞懂） ### 備註二 proxy 型別，一般來說，會跟普通的資料型別相容 也就是說，通常把 vue reactivity 狀態，直接傳給第三方套件，根本沒問題！ 不需要這樣 JSON 轉來轉去的！這是一個剛好 vue 跟第三方套件衝突的特例！ ### 備註三 實務上，這種高互動的 UI library，都會自己出一套框架版本的，先處理掉地雷 實務上以使用框架版本為主，所以不會太常碰到這種需要 workaround 的情況（但偶爾還是會遇到） 本課的原意是故意不用框架版本，練習看看手動整合，沒想到真的踩到地雷 （但是也好，也是一種練習） ### 備註四 在前端框架領域，整合框架 `狀態` 與 `html 元件`、`第三方外部元件` 時，有兩種哲學 第一種哲學就是通通由框架處理好，這種元件稱之為 `controlled components`。開發元件時比較吃力，但使用元件時比較輕鬆 第二種哲學就是，自己手動管理外部元件的狀態，這種元件稱之為 `uncontrolled components`。開發元件時比較輕鬆，但使用元件時比較吃力 可以 google 搜尋 `controlled components vs uncontrolled components`，看不懂沒關係，有更多使用套件的經驗之後，會開始看懂我在講什麼

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

看了幾篇 stackoverflow 大家的分享，都是使用 `workaround` 來描述解決方法 也就是這個 vuejs 跟 chartjs 的衝突，有點尷尬、難以漂亮解決 並不能根本解決，但能避開問題，有替代的解決方法

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

看到這貼文，我研究了快一小時，我也卡關了，我也看不出為甚麼，哈哈 我 google 搜尋 `chartjs vue RangeError: Maximum call stack size exceeded` 發現這問題很多人遇到，算是一種地雷 會說是「地雷」是因為，光看你寫的程式碼，很合理，感覺根本沒什麼問題 但遇到的人都會耗上大量時間，才知道是 chartjs 底層或者 vuejs 底層有什麼「奇怪」的注意事項 程式開發就是這樣，有時候問題很不直觀。踩雷之後，就學個經驗，多踩就不怕了 我再找時間研究一下，有心得再跟大家說 （實務上，這種高互動的 UI library，都會自己出一套框架版本的，先處理掉地雷，實務上以使用框架版本為主）

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

寫得很好，順利完成！

JavaScript 系列二：第5課 ── 認識 onchange 事件

寫得很好，順利完成！

JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class

寫得很好，順利完成！

JavaScript 系列二：第3課 ── 認識 for 迴圈

寫得很好，順利完成！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

自學網頁の嬰兒教材：第4課 ── 好用的表格

OK，順利過關！

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

寫得很好，順利完成！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

畫面整齊、漂亮，寫得很好！順利通過！

JavaScript 系列八：第2課 ── 筆記應用程式

寫得很好！UI/UX 也很棒！順利完成！

JavaScript 系列八：第4課 ── 行事曆應用程式

寫得很好，順利完成！

JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

這是 jsfiddle 首頁，沒東西顯示喔～

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

寫得很好！UI/UX 非常漂亮！順利完成！

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

我打開是空白頁面，環境設定好像有問題

JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素

很好，順利完成！

JavaScript 系列一：第7課 ── 認識巢狀結構

寫得很好，順利完成！

自學網頁の嬰兒教材：第3課 ── 網頁排版

OK，順利通過！ 不需要一次通通搞懂，有機會再鑽研、練習更多即可！

18個超好用的css屬性，還不知道點進來就會知道！！

的確都是很好用的特別屬性！

擴充分享-垂直tab

chrome extension 值得玩一玩！

JavaScript 系列四：第7課 ── TinyMCE 套件

寫得很好，順利完成！

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

寫得很好，順利完成！繼續保持！

自學網頁の嬰兒教材：第3課 ── 網頁排版

可以了，順利通過！ 不需要一次通通搞懂，有機會再鑽研、練習更多即可！

🔥🔥新功能測試上線：文章 API🔥🔥

關鍵字 `setup a personal blog with github pages` `github pages 教學`

資源分享-學習CSS最快速清晰的視覺筆記在這，馬上搞懂flex怎麼用！

Looks good!

JavaScript 系列四：第6課 ── kenwheeler/slick 套件

寫得很好，順利完成！

JavaScript 系列八：第3課 ── 分帳應用程式

寫得很好！遠超過本課所期待的標準！非常出色！

自學網頁の嬰兒教材：第2課 ── CSS 輕入門

別擔心，寫得很好！順利通過！ 發問的話，請在「討論專區」為主，我統一在那邊回答！

發問-自學課程標題命名問題

我把標題的前面，改成系列數字囉～

JavaScript 系列一：第6課 ── 認識資料型態與轉換

順利過關！

JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制

順利過關！

JavaScript 系列一：第4課 ── 基本的陣列操作

順利過關！

JavaScript 系列一：第3課 ── 修改 html 的內容

順利過關！

熱門搜尋： https js 程式 Ml 使用 id 專案 AI 開發 git Ts ar __ with COM Re API ci api app jav for Ai AM Java ai css AR javascript 測試 分享 log Git JS ui AWS GIT 工作 研究 html aws %' Html ul java 架構 ＣＳＳ LA 工程師 結構 JAVA 技術 系列 bi 效率 create import vs 雲端 HTML user Javascript 伺服器 Type json 第一 Js Javas javasc go react class Line Can mac node github 網站 CD Node python 圖片 基礎 console work Github .net CSS 分析 py Python map wEB 後端 前端 lang line this 資料庫 主題
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。