列表操作

列表的常用形式有圖片形式與信息形式的，常見(jiàn)的有如下的操作：

• 顯示列表
• 選擇列表項(xiàng)
• 新增列表項(xiàng)
• 刪除列表項(xiàng)
• 更新列表項(xiàng)

范例代碼

數(shù)據(jù)結(jié)構(gòu)

[
  {
    "id": 22341234,
    "name": "Good Song",
    "album": {
      "id": 213512,
      "name": "Good Album"
    },
    "artist":{
      "id": 1234512,
      "name": "Evil Artist"
    }
  }
]

顯示列表

列表容器

列表模板 分離數(shù)據(jù)和視圖

繪制列表

準(zhǔn)備數(shù)據(jù)并整合模板與數(shù)據(jù)

通過(guò) AJAX 獲取數(shù)據(jù)

列表單選操作

列表多選操作（Control 與 Shift 操作）

parent.addEventListener(
  'mouseup', function(event) {
    var target = getTarget(event),
        selected = isSelected(target);
    // right click
    if (event.button == 2&&selected) {
      return;
    }
    // with control click
    if (event.ctrlKey) {
      !selected?appendToSelection(target):removeFromSelection(target);
    }
    // with shift key
    if (event.shiftKey) {
      var list = Array.prototype.slice.call(
        parent.getElementsByTagName('li'), 0
      );
      if (!last) {
        last = getLastElection() || target;
      }
      selectWithRangeFromTo(list, last, target);
    } else {
      last = null;
    }
  }
);

右鍵菜單

contextmenu 事件為右鍵菜單彈出事件。

增加列表

刪除列表

更新列表

更新?tīng)顟B(tài)

編程方式

面向視圖 的操作方式，即為針對(duì)視圖的直接編程（對(duì) DOM 樹(shù)進(jìn)行直接的操作）。

這樣的方式代理了許多的弊端，例如無(wú)法進(jìn)行完全的自動(dòng)化測(cè)試以及極高的視圖層和控制層耦合的緊密性。

面向數(shù)據(jù) 的操作方式，視圖則被抽象為若干的數(shù)據(jù)以及狀態(tài)（后續(xù)所有的操作都會(huì)更加數(shù)據(jù)模型而操作），從而做到視圖模型層完全自動(dòng)化的測(cè)試。