AC - Dev C2 前端開發實作 經驗回顧

C2 開始終於使用到 visual studio code，
這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構，
每天都在 coding，每週都在追進度，
用壓縮到極致的時間寫完作業，

但跟著課程內容寫程式碼，真的有學到嗎？

有，吧。
畢竟在寫最後的電影清單作業，遇到不少挫折，
在經過不斷反思，回頭翻筆記跟課程講解，
反而有種在失敗中成長的感覺。

電影清單畫面：

最煩惱的問題：收藏按鈕的樣式失效

一開始模式只要切換，或是使用搜尋功能，
已經加入收藏的電影，又會渲染成初始樣式，
而不是像圖片裡看到的，按鈕會變成紅色x。

直覺就是跟收藏功能相關的函式：

addToFavorite(id) {
	const list = JSON.parse(localStorage.getItem('favoriteMovies')) || []
	const movie = movies.find((movie) => movie.id === id)
	if (list.some((movie) => movie.id === id)) {
		return alert('此電影已加入收藏清單')
	}
	list.push(movie)
	localStorage.setItem('favoriteMovies', JSON.stringify(list))
}

我看著這段程式碼，
想用 classList.add() 把樣式加上，
腦子卡了好幾個小時，卻百思不得其解，
不知道要怎麼抓 DOM 節點，

如果是在渲染畫面的時候，更改 innerHTML 呢？

於是我將目標轉向渲染畫面的函式，也許這裡有突破點：

renderMovieGallery(data) {
	let rawHTML = ''
	data.forEach((item) => {
		rawHTML += `
			...
			<button class="btn btn-info btn-add-favorite" data-id="${item.id}">
				+
			</button>
			...
			`
		}
	})
	dataPanel.innerHTML = rawHTML
}

如果是我會怎麼做？
如果我遇到類似情境會怎麼做？

假設我有一堆書要上架，有些有折扣、有些沒有，
而我的工作就是在上架前，把折扣貼紙貼在對的書上，
讓顧客一看就知道哪些有優惠活動。

那我會這麼做：
去查看工聯單寫著哪些書有折扣，一邊比對一邊貼上貼紙。

而在程式碼裡面，把收藏電影的資料放在 localStorage，
可以用來比對資料（工聯單），
要在渲染畫面前（上架前），先比對是不是收藏過（查看工聯單比對資料），
把樣式修改（貼上貼紙）後再渲染出來。

renderMovieGallery(data) {
	let rawHTML = ''
	const list = JSON.parse(localStorage.getItem('favoriteMovies')) || []
	// 把要比對的資料抓出來​ 存在 list 中
	
	data.forEach((item) => {
	// 用迴圈比對 data 裡面的​項目
	
		if (list.some((movie) => movie.id === item.id)) {
		// 如果在 data 的項目符合 list 裡的收藏
		// 把按鈕渲染成已加入收藏的樣式
			rawHTML += `
				...
				<button class="btn btn-danger btn-remove-favorite" data-id="${item.id}">
					x
				</button>
				...
			`
		} else {
		// 如果不符合 則渲染成初始樣式
			rawHTML += `
				...
				<button class="btn btn-info btn-add-favorite" data-id="${item.id}">
					+
				</button>
				...
			`
		}
	})
	dataPanel.innerHTML = rawHTML
}

回頭試跑網頁，按鈕可以正常使用，
不枉費我卡了一整個下午..

從 C1 一路上到了 C2，
知道要寫出漂亮 CSS 樣式的方法有很多種，
也知道做出 JavaScript 的功能有很多方法，
對我而言最困難的不是語法、物件與陣列或MVC 架構，
而是如何拆解問題。

換個角度思考，自己會怎麼做？
再把作法切成微小的步驟。