關於javascript中dataset的問題小結_javascript技巧

DataSet是ADO.NET的中心概念。可以把DataSet當成記憶體中的資料庫，DataSet就是不依賴資料庫的獨立資料集合。所謂獨立，就是說，即使斷開資料鏈路，或關閉資料庫，DataSet依然是可用的，DataSet在內部是用XML來描述資料的，由於XML是一種與平台無關、與語言無關的資料描述語言，而且可以描述複雜關係的數據，例如父子關係的數據，所以DataSet實際上可以容納具有複雜關係的數據，而且不再依賴資料庫鏈路。

一.關於dataset

1.html5自訂屬性及基礎

html5中我們可以使用data-前綴設定我們需要的自訂屬性,來進行一些資料的存放,例如我們要在一個文字按鈕上存放對應的id:

複製程式碼 程式碼如下:

測試

這裡的data-前綴就被稱為data屬性,其可以透過腳本進行定義,也可以應用css屬性選擇器進行樣式設定.數量不受限制,在控制和渲染資料的時候提供了非常強大的控制.

以下是元素應用data屬性的一個範例:

複製程式碼 程式碼如下:

$18.3

要想取得某個屬性的值,可以像下面這樣使用dataset物件:

 var expenseday=document.getElementById('day-meal-expense');
  var typeOfDrink=expenseday.dataset.drink;
  console.log(typeOfDrink);//tea
  console.log(expenseday.dataset.food);//noodle
  console.log(expenseday.dataset.meal);//lunch

如果瀏覽器支援dataset,則會彈出註解內容,如果瀏覽器不支援dataset則會報錯,無法取得屬性drink/food/meal的值:物件為null或未定義(如IE9版本).

data屬性基本上所有的瀏覽器都是支援的,但是dataset物件支援的就比較特殊了,目前僅在Opera 11.1 ,Chrome 9 下可以透過javascript,使用dataset存取你自訂的data屬性.至於其他瀏覽器,FireFox 6 (未出)以及Safari 6 (未出)會支援dataset物件,至於IE瀏覽器,目前看來還是遙遙無期的趨勢.

需要注意的是帶邊字符連接的名稱在使用的時候需要命名駝峰化,即大小寫組合書寫,這與應用元素的style對象類似,dom.style.borderColor.例如,上面的例子中現有如下data屬性,data-meal-time,則我們要取得對應的值可以使用:expenseday.dataset.mealTime

2.為何要使用dataset

如果使用傳統的方法取得屬性值應該會類似下面:

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
現在,如果我們要獲得多個自訂的屬性值,就要用下面N行程式碼來實現了:

var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
  if(attrs[i].name.substring(0,5)=='data-'){
    expense[attrs[i].name.substring(5)]=attrs[i].value;
  }
}

而使用dataset屬性,我們根本不需要任何循環去取得你想要的那個值,直接秒殺:

expense=document.getElementById('day-meal-expense').dataset;
dataset並不是典型意義上的JavaScript物件,而是個DOMStringMap物件,DOMStringMap是HTML5一種新的含有多個名-值對的交互變數.

3.dataset的操作

可以像下面這樣操作名-值對:

charInput=[];
  for(var item in expenseday){
    charInput.push(expenseday[item]);
  }

上面這幾千程式碼的作用是讓所有的自訂屬性塞到一個陣列中.

如果你想刪除一個data屬性,可以這麼做:

delete expenseday.dataset.meal;
  console.log(expenseday.dataset.meal)//undefined

如果你想為元素增加一個屬性,可以這麼做:

expenseday.dataset.dessert='icecream';
  console.log(expenseday.dataset.dessert);//icecream

4.跟getAttribute相比的速率

使用dataset操作data要比使用getAttribute稍微慢一點.

但是,如果我們只是處理少量的data資料,這種速度上的差異造成的影響是基本上沒有的.反而,我們應該看到,使用dataset操作自適應屬性要比其他類似getAttribute的形式要少很多讓人頭疼的麻煩,並且更具有可讀性.因此,權衡來看,操作自訂屬性,dataset操作是上選.

5.什麼地方使用dataset

每次你使用自訂data屬性的時候,使用dataset去獲取名-值對就是個不錯的選擇.考慮到現在很多瀏覽器還是把dataset當作不認識的外星生物看待,所以,在實際使用的時候,有必要進行一下特徵檢測,看看是否支援dataset,類似下面的使用:

if(expenseday.dataset){
    expenseday.dataset.dessert='icecream';
  }else{
    expenseday.setAttribute('data-dessert','icecream');
  }

注意:如果你的应用程序会频繁更新data属性,建议使用JavaScript对象进行数据管理,而不是每次都经由data属性进行更新.

二.关于字面量赋值,数组赋值

var a=1,b=2;
var c=[a,b];
console.log(c);//[1,2]
var b=3;
console.log(c);//[1,2]
var c=[a,b];
console.log(c);//[1,3]

上面赋给a,b的值都是数字,c是由a和b组成的数组,由于a,b的值就是1和2,所以var c=[a,b]就等于var c=[1,2];之后a和b的值再怎么改变变与c=[1,2]无关了.

以上内容是关于javascript中dataset的问题小结，希望对大家学习有所帮助。