2024-09-07 JavaScript 系列六：第4課 ── 熟悉 render function

發表於 分類於 閱讀次數：
2024-09-07 JavaScript 系列六：第4課 ── 熟悉 render function

JavaScript 系列六：第4課 ── 熟悉 render function
課程目標
繼續熟悉 render function 的觀念

課程內容
render function 雖然只是將 data model 轉換成 UI 呈現在 root 裡面

但是根據資料內容的不同，render function 當然也可以有各種條件判斷、巢狀結構等等，較複雜的邏輯

1
2
3
<div id="root">

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var products = [
  {
    name: "冬季外套",
    category: "women",
  },
  {
    name: "男士大衣",
    category: "men",
  },
]

render();

function render()
{
  var root = document.querySelector('#root');
  root.textContent = "";

  for (product of products) {
    var name = document.createElement('div');
    name.textContent = '商品名稱：' + product.name;
    if (product.category == 'men') {
      name.style.color = 'blue';
    } else if (product.category == 'women') {
      name.style.color = 'red';
    }
    root.append(name);
  }

}

別忘了 render function 肩負呈現 UI 的重責大任

所以 render 會看起來比較複雜

但是，除了 render 以外的函式，通通都變簡單了

課後作業
接續上一課作業，這次來實作「急迫性分類」

data model 的結構請更新成這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var todos = [
  {
    title: "倒垃圾",
    category: "normal"
  },
  {
    title: "繳電話費",
    category: "important"
  },
  {
    title: "採買本週食材",
    category: "urgent"
  },
];

然後 html 的部份會變成像這樣

1
2
3
4
5
6
7
8
9
<input type="text">
<button onclick="add()">新增</button>
<select>
  <option value="normal">一般</option>
  <option value="important">重要</option>
  <option value="urgent">緊急</option>
</select>
<div id="root">
</div>

請更新 render 函式，將重要事項顯示為「橘色」，緊急事項顯示為「紅色」

做出以上功能，你就完成這次的課程目標了！

文章取自: https://codelove.tw/@howtomakeaturn/post/n3V2w3
by 站長阿川