站長阿川

站長阿川

👉 身份：資深全端工程師、指導過無數人半路出家轉職 👉 使命：打造 CodeLove 成為優質新手村，讓非本科也有地方自學＆討論
登入次數：754 次
註冊於2022年11月28日
  發表了 414 篇貼文
  新增了 1,195 則留言
  貼文共 715,750 次瀏覽
全部留言
JavaScript 系列三：練習5 ── collapse 折疊效果

寫得很好！順利完成！

bootstrap問題

很好的問題 自己寫 css 掌握度最高，可以設計每個細節 但是實務上，通通自己寫，很沒效率 所以通常都會挑一款 css framework 來使用 畢竟開發專案通常是有商業目的，能快速、低成本做完，總是很划算的 不過，各種開發方式，終究都只是主觀意見 你當然可以選自己喜歡的方式，比方說，永遠堅持自己手寫 css 但是這樣一來，在需要團隊合作的時候，會遇到不少困難 以上，供參考

自學網頁の嬰兒教材：第2課 ── 導覽列：替訪客指點方向

沒問題，順利完成作業！ 你的提問非常好，請到「討論專區」發問，一起在那邊進行深入的討論＆回答！

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

沒問題，順利完成了！

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

別擔心，順利通過本課要求了！排版方式有無限多種，找時間慢慢研究即可！

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

別擔心，順利通過本課要求了！排版方式有無限多種，找時間慢慢研究即可！

[作業問題]HTML&CSS 第6課 Loading Page

往 Flexbox 這方向研究看看 現在實務上，很多排版，都通通使用 Flexbox 來完成

自學網頁の嬰兒教材：JavaScript（八）作業分享

作業完成度很好，設計也很好看！

切版示範－教你怎麼完成一個切板，完全新手導向，帶你從零到一！！

很棒的分享！

使用 inline-block 版面配置

路過補充一下： 現在因為各瀏覽器支援成熟了，版面配置大多都用 Flexbox 來排版了

[作業問題]HTML&CSS 第6課 Loading Page

在研究排版的時候，應該要一小塊一小塊研究 舉例來說，把這塊整個刪掉 ``` <div class="user"> <ul> <li><a href = "">Log in 登入</a></li> <li>|</li> <li><a href = "">Sign up 註冊</a></li> </ul> </div> ``` 就會發現，其實版面算整齊，並沒有太大問題 所以要從這一塊的寫法，開始研究、改寫

[作業問題]HTML&CSS 第6課 Loading Page

為了讓「登入、註冊」往右邊靠，你這樣寫 css ``` .user{ position: relative; top: -50px; left: 800px; line-height: 45px; } ``` 這種寫法，在螢幕寬度少於 800px 時，一定會破版，光是這邊的寫法就要先改

自學網頁の嬰兒教材：第6課 ── 在自己電腦上寫網頁

導覽列那些，的確比較難做 實務上，常常會直接用現成套件！ 所以沒問題，寫得很好，順利通過！

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

Very good！很棒的 UI！順利完成！

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

JavaScript 系列課程九，正在開發中，敬請期待！

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

連寫七個專案，相信你對前端開發的興趣＆信心大增不少！也對 vue 基本用法充分瞭解了！ 歡迎到討論專區，發表作業＆心得分享！

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課 ── 認識巢狀結構

寫得很好，順利完成！

熱門搜尋： __ ar ul 使用 https AM github 開發 COM Re Ts Ml 網站 AR log am for Javas 設計 api 平台 AI Type git 作為 ui Ai LA re the bi javascript 專案 框架 工作 學習 javasc API javas py with js jav la Java start id Js 研究 JavaScript JS react 分享 主題 測試 程式 wEB 伺服器 go vs AWS ＣＳＳ JAVA 語言 第一 嗎？ [] user Javascript 公司 ai ci Node 討論 系列 技術 資料庫 CSS type CD aws create React post SQL Git blog 結構 app url 基礎 開源 部落格 ') gpt 部署 後端 work node 效率
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。