目錄

【前端動手玩創意】等待的轉圈圈效果 (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