列表操作

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_format.png" alt="" />

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

• 顯示列表
• 選擇列表項
• 新增列表項
• 刪除列表項
• 更新列表項

范例代碼

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_data_structure.png" alt="" />

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

顯示列表

列表容器

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_container.png" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_template.png" alt="" />

繪制列表

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_render.png" alt="" />

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_ajax_get_data.png" alt="" />

列表單選操作

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_single_selection.png" alt="" />

列表多選操作（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 事件為右鍵菜單彈出事件。

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_right_click.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_right_click_details.png" alt="" />

增加列表

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_add_item.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_add_item_using_template.png" alt="" />

刪除列表

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_item_remove.png" alt="" />

更新列表

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_update.png" alt="" />

更新狀態(tài)

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_update_state.png" alt="" />

編程方式

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_view_oriented.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_view_oriented_1.png" alt="" />

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_viewmodel_1.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_viewmodel_2.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_viewmodel_3.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_viewmodel_4.png" alt="" />

http://wiki.jikexueyuan.com/project/fend_note/images/L/list_viewmodel_5.png" alt="" />