用户投稿目录
【前端动手玩创意】等待的转圈圈效果 (1)
【前端动手玩创意】google五星评分的星星(2)
【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)
【前端动手玩创意】一句CSS做出好看的hero section！(4)
【前端动手玩创意】创造一个Skill bar(5)
【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)
【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)
【前端动手玩创意】让你的PDF档案更难被抓取(8)
【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)
【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)
前情提要
如果说蟑螂怕拖鞋，老鼠爱大米，任何事物都有相生相剋的道理，那么前端最害怕什么呢？
恐怕就是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>可以贴到try it的地方执行看看效果
观念笔记
所谓MVC架构就是模型、视图、控制，背后其实有一个元素贯串任何程式，那就是：「逻辑」
每当你要下手写一个程式却不知道怎么开始动手，
那就是逻辑没有通顺。
网页不外乎就是画面，以及资料，还有使用者的操作。
对于todo-list来说就是一个简单的input画面，使用者输入的资料，点下按钮送出的操作。
这段程式特地不写任何一行body里面的东西，
玩弄了一般人对于程式区分的概念。
用模板符的特性让所有一切交给变数与函式处理，最后三个function：
AddHtml、CheckNull、AddItem完美演绎了代办清单这个网页所需要构成的底层逻辑。
必须先加入画面，然后确认使用者操作的条件，最后新增资料。
这样子的流程对于新手或许不习惯，但是以逻辑面来看比一般人的写法清晰许多。
这也是未来框架导入后，对资料流更敏感的培养练习。
心得
无聊的todo-list竟然可以搞成这样！？
真的是太有趣了(๑╹◡╹๑)！
原来前端的恶梦也可以变成写不同风格的天堂，没错，写程式就是这么千变万化！
重点是背后的逻辑抓到了，那么想要怎么写，真的就是艺术的发挥。
请继续关注，
跟着我们这个系列继续动手玩创意！！未来还有更多更新鲜的花招呢(｡◕∀◕｡)
微信扫一扫打赏
支付宝扫一扫打赏
