【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？
前情提要
如果說蟑螂怕拖鞋，老鼠愛大米，任何事物都有相生相剋的道理，那麼前端最害怕什麼呢？
恐怕就是todo-list。
這應該是前端的四大惡夢之一，並不是因為太難了，而是因為太簡單而且太無聊了，
不只無聊，還是每次教學都必須寫的一個磨難，簡直是瞬間殺死靈魂中隊前端的愛。
今天要來用不同風格寫出todo-list，把代辦事項寫出新滋味。
body裡面一行都沒有也能搞？
就是可以搞，讓我們馬上來欣賞這段有特別滋味的玩法！ε(*´･∀･｀)зﾞ
程式碼
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
</head>
<body></body>
<script>
//渲染DOM
AddHtml();
//資料內容
function AddHtml() {
const Data = {
h1: "Todo List",
button: "Add",
};
//主體的DOM
const html = `<h1>${Data.h1}</h1>
<input type="text" id="input" />
<button onclick="CheckNull()">${Data.button}</button>
<ul id="list"></ul>`;
//渲染至畫面上
document.body.innerHTML += html;
}
//邏輯確認:是否有輸入值
function CheckNull() {
if (!input.value.trim("")) {
return;
} else {
AddItem();
}
}
//新增代辦事項
function AddItem() {
const li = `<li>${document.getElementById("input").value}</li>`;
document.getElementById("list").innerHTML += li;
input.value = "";
}
</script>
</html>觀念筆記
所謂MVC架構就是模型、視圖、控制，背後其實有一個元素貫串任何程式，那就是：「邏輯」
每當你要下手寫一個程式卻不知道怎麼開始動手，
那就是邏輯沒有通順。
網頁不外乎就是畫面，以及資料，還有使用者的操作。
對於todo-list來說就是一個簡單的input畫面，使用者輸入的資料，點下按鈕送出的操作。
這段程式特地不寫任何一行body裡面的東西，
玩弄了一般人對於程式區分的概念。
用模板符的特性讓所有一切交給變數與函式處理，最後三個function：
AddHtml、CheckNull、AddItem完美演繹了代辦清單這個網頁所需要構成的底層邏輯。
必須先加入畫面，然後確認使用者操作的條件，最後新增資料。
這樣子的流程對於新手或許不習慣，但是以邏輯面來看比一般人的寫法清晰許多。
這也是未來框架導入後，對資料流更敏感的培養練習。
心得
無聊的todo-list竟然可以搞成這樣！？
真的是太有趣了(๑╹◡╹๑)！
原來前端的惡夢也可以變成寫不同風格的天堂，沒錯，寫程式就是這麼千變萬化！
重點是背後的邏輯抓到了，那麼想要怎麼寫，真的就是藝術的發揮。
請繼續關注，
跟著我們這個系列繼續動手玩創意！！未來還有更多更新鮮的花招呢(｡◕∀◕｡)
很有趣！酷酷酷