【前端动手玩创意】动态生成的艺术｜小心，乱改DOM你可能会被打脸。(13)

目录

【前端动手玩创意】等待的转圈圈效果 (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)

【前端动手玩创意】太屌了吧！？用Class(类)製作Jquery的效果！(11)

【前端动手玩创意】置顶按钮，老梗经典｜带你的网页搭电梯(12)

前情提要

一阵子没写前端动手玩创意了 今天要来点好料的
我们谈谈关于艺术

对 就算是写程式我们也是可以有艺术气息的 别这么惊讶XD

假设我有一组资料
一般人来说 最直觉的就是把html里面的元素写出来写死
直觉菜鸟就是写出来啊

 <div id="items_list">    <li class="buy_item">1.红茶      <div class="price">10</div>      <div class="del_btn">X</div>    </li>    <li class="buy_item">2.奶茶      <div class="price">15</div>      <div class="del_btn">X   </div>    </li>    <li class="buy_item">3.绿茶      <div class="price">30</div>      <div class="del_btn">X</div>    </li>  </div>

要更新则是就去更改DOM就好了 反正我都学会JS了
有什么大不了(?

但是现在已经进入大前端时代了就算你写原生
也会有data model的概念 这部分可以参考站长阿川写过的好文

里面的文笔跟逻辑 不夸张 是我见过「华文圈写得最好的前端教学」
尤其就是这篇 关于data model的介绍 切入点非常的有趣也很有道理
有兴趣的自己去花心思读看看
认识 data model 与 render function

稍微有点料的前端学习者 本身就会写一写 想说：既然有一只API是createElement
那是不是我可以整个html都用js写出来(?
这是个超级有趣的观点

关于data render的概念:

「是不是我可以整个html都用js写出来」

相传牛顿提出三大定律以后 认为地球和八大行星一开始的惯性力叫「上帝的第一推动力」
实际上这个：
「整个html都用js写出来」
也是推动前端往框架迈进的思考第一步 可以说是前端惯性的上帝推力了
当然如果你有打篮球 也可以比喻成上篮的第零步XD

观念笔记

html程式码

<div id="buylist">  <h1>myBuylist 购物清单</h1>  <div class="buyitem">    <label>产品名</label>    <input/>    <label>价钱</label>    <input/><span class="addbtn">+新增</span>  </div>  <div id="items_list">这边準备用JS插入东西所以这段只是说明文字</div></div>

把整个页面的元素写出来 但是资料的区块保留着
因为等等我们要用JS的API去动态生成
未来直接data render
方便更新与管理

JS程式码

    var shoplist = {};    shoplist.name = "购物清单";    shoplist.list = [      { name: "吹风机", price: "300" },      { name: "麦克笔", price: "20" },      { name: "笔记型电脑", price: "29300" },      { name: "Iphone 9", price: "5200" },      { name: "神奇海螺", price: "1000" },    ];    var item_html =      "<li id={{id}} class='buy_item'>{{name}}<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>";    var total_html =      "<li class='buy_item total'>总价<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>";    var total_price = 0;    for (var i=0; i < shoplist.list.length; i++) {      var item = shoplist.list[i];      total_price += item.price;      var current_item_html =           item_html.replace("{{num}}", i + 1)                   .replace("{{name}}", item.name)                   .replace("{{id}}", "buyitem_" + i)                   .replace("{{price}}", item.price);          $("#items_list").append(current_item_html);    }

这边值得关注的一点是资料的处理 也就是数据结构上使用物件与阵列去储存资料
为什么要学 阵列 为什么要学物件
这两个都是抽象的名词
他们都是为了来处理资料所规划的两种不同内容

关于物件与阵列

物件就像是RPG角色 会有很多的属性 魔法 敏捷 力量 血量
这些属性都是被附加在person上面
所以person.blood是一个资料 person.power是一个资料 person.magic是一个资料
最后都存在person里面
这个person就是一个含有很多属性的物件 感觉就是有血有肉很3D

而阵列就比较平面化 就是很多数字排成一列而已 其实没什么特别需要关注的
这两个也不会不好区分 只要稍微做个比喻
都很好理解

以我们的code来讲解 shoplist就是一个物件 含有一些属性 包含名字与清单
因为清单很多 所以清单用一个阵列储存
阵列里面放很多个物件 这些物件就是每一个清单包含的那些购买项目
其实不用太在意谁是谁因为用看的就很清楚

最后我们用迴圈去把shoplist里面的每一笔资料都丢进去
中途replace是文字处理 把我们设置的{{name}}这种花括号的东西换成真实资料
这部分有点样板语言的感觉XD 其实非常有趣 很值得玩味

心得

这次比较多实在的JS程式码 就不只是玩玩切版了
算是有点靠近框架的部分(◉３◉)

动手玩创意这个系列其实灵魂之处就在于「有趣」两个字

坊间把前端描绘成为了找工作的铜臭味
以及把切版讲成无聊的工匠苦力活
我认为都是错误的解读

我认为 只要是有趣的地方就是前端最有价值的地方
而不是谁学了那个框架 谁又认为哪个东西比较厉害 哪个语言比较屌
那都是很无聊的文字游戏罢了

如果你喜欢这样子的前端 请跟着这个系列继续走(￫ܫ￩)
我们才只是在桃花源外的小溪旁玩水而已呢！
未来会往天空飞翔哦XD