關於javascript中的dataset

DataSet是ADO.NET的中心概念。能夠把DataSet當成內存中的數據庫，DataSet是不依賴於數據庫的獨立數據集合。所謂獨立，就是說，即便斷開數據鏈路，或者關閉數據庫，DataSet依然是可用的，DataSet在內部是用XML來描述數據的，因爲XML是一種與平臺無關、與語言無關的數據描述語言，並且能夠描述複雜關係的數據，好比父子關係的數據，因此DataSet實際上能夠容納具備複雜關係的數據，並且再也不依賴於數據庫鏈路。

一.關於dataset

1.html5自定義屬性及基礎

html5中咱們可使用data-前綴設置咱們須要的自定義屬性,來進行一些數據的存放,例如咱們要在一個文字按鈕上存放相應的id:

 

複製代碼代碼以下:

<a href="javascript:;" data-id="2312">測試</a>

 

這裏的data-前綴就被稱爲data屬性,其能夠經過腳本進行定義,也能夠應用css屬性選擇器進行樣式設置.數量不受限制,在控制和渲染數據的時候提供了很是強大的控制.

下面是元素應用data屬性的一個例子:

 

複製代碼代碼以下:

<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>

 

要想獲取某個屬性的值,能夠像下面這樣使用dataset對象:

?

1 2 3 4 5

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行代碼來實現了:

?

1 2 3 4 5 6

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的操做

能夠像下面這樣操做名-值對:

?

1 2 3 4

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

上面這幾千代碼的做用是讓全部的自定義屬性塞到一個數組中.

若是你想刪除一個data屬性,能夠這麼作:

?

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

若是你想給元素添加一個屬性,能夠這麼作:

?

1 2	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,相似下面的使用:

?

1 2 3 4 5

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

注意:若是你的應用程序會頻繁更新data屬性,建議使用JavaScript對象進行數據管理,而不是每次都經由data屬性進行更新.

二.關於字面量賦值,數組賦值

?

1 2 3 4 5 6 7

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的問題小結，但願對你們學習有所幫助。