国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

關(guān)于javascript中dataset的問題小結(jié)

2019-11-20 11:16:16
字體:
供稿:網(wǎng)友

DataSet是ADO.NET的中心概念。可以把DataSet當成內(nèi)存中的數(shù)據(jù)庫,DataSet是不依賴于數(shù)據(jù)庫的獨立數(shù)據(jù)集合。所謂獨立,就是說,即使斷開數(shù)據(jù)鏈路,或者關(guān)閉數(shù)據(jù)庫,DataSet依然是可用的,DataSet在內(nèi)部是用XML來描述數(shù)據(jù)的,由于XML是一種與平臺無關(guān)、與語言無關(guān)的數(shù)據(jù)描述語言,而且可以描述復(fù)雜關(guān)系的數(shù)據(jù),比如父子關(guān)系的數(shù)據(jù),所以DataSet實際上可以容納具有復(fù)雜關(guān)系的數(shù)據(jù),而且不再依賴于數(shù)據(jù)庫鏈路。

一.關(guān)于dataset

1.html5自定義屬性及基礎(chǔ)

html5中我們可以使用data-前綴設(shè)置我們需要的自定義屬性,來進行一些數(shù)據(jù)的存放,例如我們要在一個文字按鈕上存放相應(yīng)的id:

復(fù)制代碼 代碼如下:

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

這里的data-前綴就被稱為data屬性,其可以通過腳本進行定義,也可以應(yīng)用css屬性選擇器進行樣式設(shè)置.數(shù)量不受限制,在控制和渲染數(shù)據(jù)的時候提供了非常強大的控制.

下面是元素應(yīng)用data屬性的一個例子:

復(fù)制代碼 代碼如下:

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

要想獲取某個屬性的值,可以像下面這樣使用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,則會彈出注釋內(nèi)容,如果瀏覽器不支持dataset則會報錯,無法獲取屬性drink/food/meal的值:對象為null或未定義(如IE9版本).

data屬性基本上所有的瀏覽器都是支持的,但是dataset對象支持的就比較特殊了,目前僅在Opera 11.1+,Chrome 9+下可以通過javascript,使用dataset訪問你自定義的data屬性.至于其他瀏覽器,FireFox 6+(未出)以及Safari 6+(未出)會支持dataset對象,至于IE瀏覽器,目前看來還是遙遙無期的趨勢.

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

2.為何要使用dataset

如果使用傳統(tǒng)的方法獲取屬性值應(yīng)該會類似下面:

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
現(xiàn)在,如果我們要獲得多個自定義的屬性值,就要用下面N行代碼來實現(xià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屬性,我們根本不需要任何循環(huán)去獲取你想要的那個值,直接秒殺:

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

3.dataset的操作

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

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

上面這幾千代碼的作用是讓所有的自定義屬性塞到一個數(shù)組中.

如果你想刪除一個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數(shù)據(jù),這種速度上的差異造成的影響是基本上沒有的.反而,我們應(yīng)該看到,使用dataset操作自適應(yīng)屬性要比其他類似getAttribute的形式要少很多讓人頭疼的麻煩,并且更具有可讀性.因此,權(quán)衡來看,操作自定義屬性,dataset操作是上選.

5.什么地方使用dataset

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

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

注意:如果你的應(yīng)用程序會頻繁更新data屬性,建議使用JavaScript對象進行數(shù)據(jù)管理,而不是每次都經(jīng)由data屬性進行更新.

二.關(guān)于字面量賦值,數(shù)組賦值

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的值都是數(shù)字,c是由a和b組成的數(shù)組,由于a,b的值就是1和2,所以var c=[a,b]就等于var c=[1,2];之后a和b的值再怎么改變變與c=[1,2]無關(guān)了.

以上內(nèi)容是關(guān)于javascript中dataset的問題小結(jié),希望對大家學(xué)習(xí)有所幫助。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 随州市| 贺兰县| 宜兰县| 桃源县| 龙游县| 乳山市| 黑山县| 吉首市| 大安市| 兴安县| 建阳市| 湘潭市| 清河县| 神池县| 广丰县| 渑池县| 昭通市| 浦县| 清水河县| 将乐县| 怀远县| 峨眉山市| 梁山县| 黄平县| 惠东县| 绩溪县| 安塞县| 南涧| 辛集市| 韶山市| 措美县| 宜章县| 秀山| 连州市| 安仁县| 宣汉县| 收藏| 五河县| 绵竹市| 成都市| 自贡市|