iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 23
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 23

Day23 「來個小插曲,聊聊心得」 ─ 那些你用過的技術,才是你的

今天從「使用網頁等公車」系列文中跳出來一下,來聊聊一些心得感言 /images/emoticon/emoticon07.gif

開頭就先講個結論 血淋淋的體悟

那些沒真正用過的技術,都不要以為自己已經懂了啊 /images/emoticon/emoticon06.gif

 
其實我在撰寫公車系統之前,從來沒真正寫過 AJAX
api 部分也頂多串接過 Google Map API 而已

結果在撰寫 AJAX 的時候,才真正踩到雷..

上一回我們講到這份專案使用的是較老派的 XMLHttpRequest

在那之前雖然課堂中聽過了 JavaScript 的同步與非同步
在那時感覺好像已經都懂了
但在實際應用的時候卻還是搞得一蹋糊塗.. /images/emoticon/emoticon04.gif

原本預計取用 open data 的公車路線資料
可是卻一直沒辦法把資料讀出來
後來才搞懂是因為沒有把資料放在 onlord
那在沒有等到資料取得就繼續往下跑 code 的情況下,理所當然的路線資料就跑不出來啦!/images/emoticon/emoticon20.gif


另外在指定 DOM 的部分,我使用的是 getElementById

var list = document.getElementById('list');
// 綁定 DOM 結構

在寫好綁定之後,資料卻一直沒有成功渲染出來

打開 console 一看
https://ithelp.ithome.com.tw/upload/images/20180111/20107640afKBseMoZZ.png

可是我在瀏覽器的 console 使用 console.log(list) 卻是正常有綁定的
這個問題困惑了我三個番茄鐘的時間..

於是我就向老師求救
 
..
...
....老師看了不到一分鐘,悠悠說了一句**「你的 script src 是不是寫在 body 之前..?」**

對吼!DOM 都還沒跑出來就想要綁定,理所當然地綁不到東西啊啊啊!/images/emoticon/emoticon04.gif


 
原本想去 Github 上面 co 自己的 code 出來
結果..
https://ithelp.ithome.com.tw/upload/images/20180111/20107640n4CjjWIK4B.jpg

大家可以收工啦! (喂


補充資料


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day22 「使用網頁等公車」 ─ 從 AJAX 開始的 api 串接之旅
下一篇
Day24 「準備接第二個 api 囉」 ─ 製作公車到站時間...欸?
系列文
菜鳥前端奮鬥史(欸?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
Kuro Hsu
iT邦新手 1 級 ‧ 2018-01-11 23:53:46

寫在 body 之「前」才會讀不到吧?

不然就把 code 移到 DOMContentLoaded 事件後執行就好了

document.addEventListener("DOMContentLoaded", function(e) {
  console.log("DOM ready!");
});
看更多先前的回應...收起先前的回應...
阿陰 iT邦新手 4 級 ‧ 2018-01-11 23:56:43 檢舉

對對,剛剛天氣冷一個腦殘了 XD
已修正內文

我最後的作法是把整個 innerHTML 的過程搬進去 onlord 裡面 /images/emoticon/emoticon01.gif
大概像是這樣

阿陰 iT邦新手 4 級 ‧ 2018-01-12 00:02:19 檢舉

DOMContentLoaded 是第一次看到,之後會嘗試寫看看!
感謝介紹 /images/emoticon/emoticon32.gif

Kuro Hsu iT邦新手 1 級 ‧ 2018-01-12 00:09:35 檢舉
阿陰 iT邦新手 4 級 ‧ 2018-01-12 00:11:37 檢舉

先前已訂閱系列文,打算等之後有空一次拜讀!
已經完賽仍勤耕不輟乃是真鐵人啊 /images/emoticon/emoticon37.gif

我要留言

立即登入留言