jquery-dataview是一個超輕量的jquery插件，用于對DOM進行數據填充與更新，也很適合根據DOM模板創建對象。
與一些純模板庫（例如juicer）相比，它不僅能提供根據模板填入數據、支持循環、支持條件創建等功能，還支持綁定事件，最重要的是，在創建完DOM對象后，這些對象（稱為數據視圖）關聯到原始數據，修改數據后，相應的視圖也得以更新。
與一些支持數據驅動或MVVM模式的庫（例如vue）相比，它沒有去做數據綁定等高級自動化的機制，那涉及諸多復雜邏輯，比如屬性依賴管理等，使用者如果了解不多，很可能寫出低效的代碼，或觸發一連串未曾預料的后果。比如在一個列表中，只更新其中一條數據的某個屬性，就可能導致刷新整個列表，甚至發起與后端的多次不必要交互。
jquery-dataview插件的設計理念是簡單而靈活，它不采用極其復雜的自動化更新機制，而是允許人為精準控制更新時機與更新區域；同時，它最小化并壓縮后僅2K不到，很適合在移動端開發使用。
下面介紹幾個入門例子。
為DOM對象填充數據
例：對一個DOM賦值
HTML:
<div class="customer"> <p>id=<span name="id"></span></p> <p>name=<span name="name"></span></p></div>
JS填充數據:
var customer = { id: 1001, name: "SAP AG" };$(".customer").dataview(customer);它會遞歸遍歷所有帶name屬性的結點，如<span name="id"></span>會用customer.id為其賦值。
JS修改數據后，可無參數調用dataview來刷新顯示：
customer.name = "SAP China";$(".customer").dataview();獲取DOM綁定的數據：
var data = $(".customer").dataview('getData');
為模板填充數據
這個例子在項目中更加常用，展示根據模板創建DOM、填充數據并插入文檔中。
HTML: 客戶列表
<div id="divCustomers"></div> <style type="text/template" id="tplCustomer"> <div class="customer"> <p>id=<span name="id"></span></p> <p>name=<span name="name"></span></p> </div> </style>
JS: 根據“客戶”模板創建客戶并插入列表中。
var customers = [ { id: 1001, name: "SAP AG" }, { id: 2001, name: "Oracle CO" } ]; var jtplCustomer = $($("#tplCustomer").html()); var jparent = $("#divCustomers"); $.each(customers, function (i, customer) { jtplCustomer.clone() .dataview(customer) .appendTo(jparent); });循環創建、條件創建、條件顯示
子對象數組可以以dv-for屬性來指定循環展開。
dv-if及dv-show屬性：根據該屬性的值計算是否創建或顯示該結點。
例：使用dv-for, dv-if, dv-show等標簽：
HTML:
<div id="divCustomers"> <div dv-for="customers" dv-if="id>=1000" class="customer"> <li> <span dv-show="id<=2000">id=<span name="id"></span></span> name=<span name="name"></span> </li> </div> </div>
JS:
var data = { customers: [ { id: 1, name: "Olive CO" }, { id: 1001, name: "SAP AG" }, { id: 2001, name: "Oracle CO" } ] }; $("#divCustomers").dataview(data);上例中，由data.customers子數組循環創建DOM，其中id=1的customer沒有創建，因為不滿足dv-if="id>=1000"的條件；而id=2001的那個customer由于不滿足dv-show="id<=2000"的條件，因而id沒有顯示出來。
指定事件
dataview不僅綁定數據，還可以用dv-on屬性綁定事件，在JS中使用選項events與其對應。
<div dv-on="liOrder_click"></div>
事件名必須是{對象名}_{事件名}的格式。
上面代碼最終相當于調用jo.on("click", data, liOrder_click)，綁定的數據會通過event.data傳遞給回調函數，因而在回調函數中處理數據特別方便。
用到的函數必須通過events選項定義：
var events = { liOrder_click: function (ev) { var order = ev.data; // 等同于 $(this).dataview('getData'); // ... } };jo.dataview(data, {events: events});與直接使用原生支持的onclick屬性相比，使用dv-on屬性的好處是事件處理函數不必是全局函數，而且事件處理函數的參數ev.data即是DOM綁定的數據，非常方便。
多層嵌套的數據
對復雜的多層次嵌套數據的支持是dataview插件的一大亮點。
通過精巧的設計，它不僅做到填充數據時特別簡單，而且在更新數據時，允許自由地更新任意區域，行為易懂且效率很高。
JS數據：一個customer-客戶，它包含id, name等普通屬性，包含一個子對象addr-地址信息，還包含一個子對象數組orders-訂單。
每個訂單中，又包含一個子對象數組items-物料信息。
var customer = { id: 1001, name: "SAP AG", addr: {country: "CN", city: "Shanghai"}, orders: [ {id: 1, amount: 9000, items: [ {id: 101, name: "item 101"}, {id: 102, name: "item 102"} ]}, {id: 2, amount: 11000, items: [ {id: 201, name: "item 201"} ]} ] }HTML數據視圖，展示客戶、訂單、物料三層數據：
<div class="customer"> <p> name: <span name="name"></span> </p> <p> addr: <span name="addr.country"></span> / <span name="addr.city"></span> </p> <ul> <li dv-for="orders" class="order"> <p>order id=<span name="id"></span>, amount=<span name="amount"></span></p> <ul> <li dv-for="items" class="item"> <p>item id=<span name="id"></span></p> <p>item name=<span name="name"></span></p> </li> </ul> </li> </ul> </div>
JS:
$(".customer").dataview(customer); // 更新一些數據 ++ customer.orders[0].amount; customer.orders[0].items[0].name += " - updated"; // 視圖局部更新：只更新一個item var jitem = $(".customer .order:first .item:first"); jitem.dataview(); // 取DOM綁定的item數據 var itemData = jitem.dataview('getData'); // 通過 $parent 取上層數據 var orderData = itemData.$parent; var data = orderData.$parent; // 視圖局部更新：只更新一個order: $(".customer .order:first").dataview(); // 全部更新 $(".customer").dataview();上面只是多層次數據的簡單的用法介紹，通過子對象的$parent屬性可以取到上次對象。
實際使用時，常會把這些特性同計算屬性、事件綁定結合起來，你會發現它會讓取數據和更新視圖的代碼簡單、靈活、易懂。
結語
作為一個超輕量級的具有數據驅動視圖概念的庫，推薦在項目中使用，可為讓你的代碼更清晰簡練。
上面只是一個簡單的介紹，更多如計算屬性等功能可參考它的文檔。
附github地址（其中有源碼、文檔和示例代碼）：
https://github.com/skyshore2001/jquery-dataview
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
