jquery-dataview是一個(gè)超輕量的jquery插件，用于對(duì)DOM進(jìn)行數(shù)據(jù)填充與更新，也很適合根據(jù)DOM模板創(chuàng)建對(duì)象。

與一些純模板庫(kù)（例如juicer）相比，它不僅能提供根據(jù)模板填入數(shù)據(jù)、支持循環(huán)、支持條件創(chuàng)建等功能，還支持綁定事件，最重要的是，在創(chuàng)建完DOM對(duì)象后，這些對(duì)象（稱為數(shù)據(jù)視圖）關(guān)聯(lián)到原始數(shù)據(jù)，修改數(shù)據(jù)后，相應(yīng)的視圖也得以更新。

與一些支持?jǐn)?shù)據(jù)驅(qū)動(dòng)或MVVM模式的庫(kù)（例如vue）相比，它沒(méi)有去做數(shù)據(jù)綁定等高級(jí)自動(dòng)化的機(jī)制，那涉及諸多復(fù)雜邏輯，比如屬性依賴管理等，使用者如果了解不多，很可能寫(xiě)出低效的代碼，或觸發(fā)一連串未曾預(yù)料的后果。比如在一個(gè)列表中，只更新其中一條數(shù)據(jù)的某個(gè)屬性，就可能導(dǎo)致刷新整個(gè)列表，甚至發(fā)起與后端的多次不必要交互。

jquery-dataview插件的設(shè)計(jì)理念是簡(jiǎn)單而靈活，它不采用極其復(fù)雜的自動(dòng)化更新機(jī)制，而是允許人為精準(zhǔn)控制更新時(shí)機(jī)與更新區(qū)域；同時(shí)，它最小化并壓縮后僅2K不到，很適合在移動(dòng)端開(kāi)發(fā)使用。

下面介紹幾個(gè)入門(mén)例子。

為DOM對(duì)象填充數(shù)據(jù)

例：對(duì)一個(gè)DOM賦值

HTML:

<div class="customer">
 <p>id=<span name="id"></span></p>
 <p>name=<span name="name"></span></p>
</div>

JS填充數(shù)據(jù):

var customer = { id: 1001, name: "SAP AG" };
$(".customer").dataview(customer);

它會(huì)遞歸遍歷所有帶name屬性的結(jié)點(diǎn)，如<span name="id"></span>會(huì)用customer.id為其賦值。

JS修改數(shù)據(jù)后，可無(wú)參數(shù)調(diào)用dataview來(lái)刷新顯示：

customer.name = "SAP China";
$(".customer").dataview();

獲取DOM綁定的數(shù)據(jù)：

var data = $(".customer").dataview('getData');

為模板填充數(shù)據(jù)

這個(gè)例子在項(xiàng)目中更加常用，展示根據(jù)模板創(chuàng)建DOM、填充數(shù)據(jù)并插入文檔中。

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: 根據(jù)“客戶”模板創(chuàng)建客戶并插入列表中。

 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);
 });

循環(huán)創(chuàng)建、條件創(chuàng)建、條件顯示

子對(duì)象數(shù)組可以以dv-for屬性來(lái)指定循環(huán)展開(kāi)。

dv-if及dv-show屬性：根據(jù)該屬性的值計(jì)算是否創(chuàng)建或顯示該結(jié)點(diǎn)。

例：使用dv-for, dv-if, dv-show等標(biāo)簽：

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子數(shù)組循環(huán)創(chuàng)建DOM，其中id=1的customer沒(méi)有創(chuàng)建，因?yàn)椴粷M足dv-if="id>=1000"的條件；而id=2001的那個(gè)customer由于不滿足dv-show="id<=2000"的條件，因而id沒(méi)有顯示出來(lái)。

指定事件

dataview不僅綁定數(shù)據(jù)，還可以用dv-on屬性綁定事件，在JS中使用選項(xiàng)events與其對(duì)應(yīng)。

<div dv-on="liOrder_click"></div>

事件名必須是{對(duì)象名}_{事件名}的格式。
上面代碼最終相當(dāng)于調(diào)用jo.on("click", data, liOrder_click)，綁定的數(shù)據(jù)會(huì)通過(guò)event.data傳遞給回調(diào)函數(shù)，因而在回調(diào)函數(shù)中處理數(shù)據(jù)特別方便。

用到的函數(shù)必須通過(guò)events選項(xiàng)定義：

var events = {
  liOrder_click: function (ev) {
   var order = ev.data; // 等同于 $(this).dataview('getData');
   // ...
  }
 };
jo.dataview(data, {events: events});

與直接使用原生支持的onclick屬性相比，使用dv-on屬性的好處是事件處理函數(shù)不必是全局函數(shù)，而且事件處理函數(shù)的參數(shù)ev.data即是DOM綁定的數(shù)據(jù)，非常方便。

多層嵌套的數(shù)據(jù)

對(duì)復(fù)雜的多層次嵌套數(shù)據(jù)的支持是dataview插件的一大亮點(diǎn)。
通過(guò)精巧的設(shè)計(jì)，它不僅做到填充數(shù)據(jù)時(shí)特別簡(jiǎn)單，而且在更新數(shù)據(jù)時(shí)，允許自由地更新任意區(qū)域，行為易懂且效率很高。

JS數(shù)據(jù)：一個(gè)customer-客戶，它包含id, name等普通屬性，包含一個(gè)子對(duì)象addr-地址信息，還包含一個(gè)子對(duì)象數(shù)組orders-訂單。
每個(gè)訂單中，又包含一個(gè)子對(duì)象數(shù)組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數(shù)據(jù)視圖，展示客戶、訂單、物料三層數(shù)據(jù)：

 <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);

 // 更新一些數(shù)據(jù)
 ++ customer.orders[0].amount;
 customer.orders[0].items[0].name += " - updated";

 // 視圖局部更新：只更新一個(gè)item
 var jitem = $(".customer .order:first .item:first");
 jitem.dataview();

 // 取DOM綁定的item數(shù)據(jù)
 var itemData = jitem.dataview('getData');
 // 通過(guò) $parent 取上層數(shù)據(jù)
 var orderData = itemData.$parent;
 var data = orderData.$parent;

 // 視圖局部更新：只更新一個(gè)order:
 $(".customer .order:first").dataview();

 // 全部更新
 $(".customer").dataview();

上面只是多層次數(shù)據(jù)的簡(jiǎn)單的用法介紹，通過(guò)子對(duì)象的$parent屬性可以取到上次對(duì)象。
實(shí)際使用時(shí)，常會(huì)把這些特性同計(jì)算屬性、事件綁定結(jié)合起來(lái)，你會(huì)發(fā)現(xiàn)它會(huì)讓取數(shù)據(jù)和更新視圖的代碼簡(jiǎn)單、靈活、易懂。

結(jié)語(yǔ)

作為一個(gè)超輕量級(jí)的具有數(shù)據(jù)驅(qū)動(dòng)視圖概念的庫(kù)，推薦在項(xiàng)目中使用，可為讓你的代碼更清晰簡(jiǎn)練。
上面只是一個(gè)簡(jiǎn)單的介紹，更多如計(jì)算屬性等功能可參考它的文檔。

附github地址（其中有源碼、文檔和示例代碼）：

https://github.com/skyshore2001/jquery-dataview

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論