關(guān)于javascript中dataset的問(wèn)題小結(jié)
DataSet是ADO.NET的中心概念??梢园袲ataSet當(dāng)成內(nèi)存中的數(shù)據(jù)庫(kù),DataSet是不依賴(lài)于數(shù)據(jù)庫(kù)的獨(dú)立數(shù)據(jù)集合。所謂獨(dú)立,就是說(shuō),即使斷開(kāi)數(shù)據(jù)鏈路,或者關(guān)閉數(shù)據(jù)庫(kù),DataSet依然是可用的,DataSet在內(nèi)部是用XML來(lái)描述數(shù)據(jù)的,由于XML是一種與平臺(tái)無(wú)關(guān)、與語(yǔ)言無(wú)關(guān)的數(shù)據(jù)描述語(yǔ)言,而且可以描述復(fù)雜關(guān)系的數(shù)據(jù),比如父子關(guān)系的數(shù)據(jù),所以DataSet實(shí)際上可以容納具有復(fù)雜關(guān)系的數(shù)據(jù),而且不再依賴(lài)于數(shù)據(jù)庫(kù)鏈路。
一.關(guān)于dataset
1.html5自定義屬性及基礎(chǔ)
html5中我們可以使用data-前綴設(shè)置我們需要的自定義屬性,來(lái)進(jìn)行一些數(shù)據(jù)的存放,例如我們要在一個(gè)文字按鈕上存放相應(yīng)的id:
<a href="javascript:;" data-id="2312">測(cè)試</a>
這里的data-前綴就被稱(chēng)為data屬性,其可以通過(guò)腳本進(jìn)行定義,也可以應(yīng)用css屬性選擇器進(jìn)行樣式設(shè)置.數(shù)量不受限制,在控制和渲染數(shù)據(jù)的時(shí)候提供了非常強(qiáng)大的控制.
下面是元素應(yīng)用data屬性的一個(gè)例子:
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>
要想獲取某個(gè)屬性的值,可以像下面這樣使用dataset對(duì)象:
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,則會(huì)彈出注釋內(nèi)容,如果瀏覽器不支持dataset則會(huì)報(bào)錯(cuò),無(wú)法獲取屬性drink/food/meal的值:對(duì)象為null或未定義(如IE9版本).
data屬性基本上所有的瀏覽器都是支持的,但是dataset對(duì)象支持的就比較特殊了,目前僅在Opera 11.1+,Chrome 9+下可以通過(guò)javascript,使用dataset訪(fǎng)問(wèn)你自定義的data屬性.至于其他瀏覽器,FireFox 6+(未出)以及Safari 6+(未出)會(huì)支持dataset對(duì)象,至于IE瀏覽器,目前看來(lái)還是遙遙無(wú)期的趨勢(shì).
需要注意的是帶邊字符連接的名稱(chēng)在使用的時(shí)候需要命名駝峰化,即大小寫(xiě)組合書(shū)寫(xiě),這與應(yīng)用元素的style對(duì)象類(lèi)似,dom.style.borderColor.例如,上面的例子中現(xiàn)有如下data屬性,data-meal-time,則我們要獲取相應(yīng)的值可以使用:expenseday.dataset.mealTime
2.為何要使用dataset
如果使用傳統(tǒng)的方法獲取屬性值應(yīng)該會(huì)類(lèi)似下面:
var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
現(xiàn)在,如果我們要獲得多個(gè)自定義的屬性值,就要用下面N行代碼來(lái)實(shí)現(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)去獲取你想要的那個(gè)值,直接秒殺:
expense=document.getElementById('day-meal-expense').dataset;
dataset并不是典型意義上的JavaScript對(duì)象,而是個(gè)DOMStringMap對(duì)象,DOMStringMap是HTML5一種新的含有多個(gè)名-值對(duì)的交互變量.
3.dataset的操作
可以像下面這樣操作名-值對(duì):
charInput=[]; for(var item in expenseday){ charInput.push(expenseday[item]); }
上面這幾千代碼的作用是讓所有的自定義屬性塞到一個(gè)數(shù)組中.
如果你想刪除一個(gè)data屬性,可以這么做:
delete expenseday.dataset.meal; console.log(expenseday.dataset.meal)//undefined
如果你想給元素添加一個(gè)屬性,可以這么做:
expenseday.dataset.dessert='icecream'; console.log(expenseday.dataset.dessert);//icecream
4.跟getAttribute相比的速度
使用dataset操作data要比使用getAttribute稍微慢些.
但是,如果我們只是處理少量的data數(shù)據(jù),這種速度上的差異造成的影響是基本上沒(méi)有的.反而,我們應(yīng)該看到,使用dataset操作自適應(yīng)屬性要比其他類(lèi)似getAttribute的形式要少很多讓人頭疼的麻煩,并且更具有可讀性.因此,權(quán)衡來(lái)看,操作自定義屬性,dataset操作是上選.
5.什么地方使用dataset
每次你使用自定義data屬性的時(shí)候,使用dataset去獲取名-值對(duì)就是個(gè)不錯(cuò)的選擇.考慮到現(xiàn)在很多瀏覽器還是把dataset當(dāng)作不認(rèn)識(shí)的外星生物看待,所以,在實(shí)際使用的時(shí)候,有必要進(jìn)行一下特征檢測(cè),看看是否支持dataset,類(lèi)似下面的使用:
if(expenseday.dataset){ expenseday.dataset.dessert='icecream'; }else{ expenseday.setAttribute('data-dessert','icecream'); }
注意:如果你的應(yīng)用程序會(huì)頻繁更新data屬性,建議使用JavaScript對(duì)象進(jìn)行數(shù)據(jù)管理,而不是每次都經(jīng)由data屬性進(jìn)行更新.
二.關(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]無(wú)關(guān)了.
以上內(nèi)容是關(guān)于javascript中dataset的問(wèn)題小結(jié),希望對(duì)大家學(xué)習(xí)有所幫助。
- C# XML操作 代碼大全(讀XML,寫(xiě)XML,更新,刪除節(jié)點(diǎn),與dataset結(jié)合等)
- Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求,返回DataSet(XML) 異步調(diào)用
- js DataSet數(shù)據(jù)源處理代碼
- ASP.NET用DataSet導(dǎo)出到Excel的方法
- 合并兩個(gè)DataSet的數(shù)據(jù)內(nèi)容的方法
- ADO.Net 類(lèi)型化DataSet的簡(jiǎn)單介紹
- ASP.NET中DataTable與DataSet之間的轉(zhuǎn)換示例
- C#中的DataSet、string、DataTable、對(duì)象轉(zhuǎn)換成Json的實(shí)現(xiàn)代碼
- ASP.NET中實(shí)現(xiàn)把Json數(shù)據(jù)轉(zhuǎn)換為ADO.NET DataSet對(duì)象
相關(guān)文章
JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法,可實(shí)現(xiàn)按照毫秒倒計(jì)時(shí)的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02Javascript 使用function定義構(gòu)造函數(shù)
Javascript并不像Java、C#等語(yǔ)言那樣支持真正的類(lèi)。但是在js中可以定義偽類(lèi)。做到這一點(diǎn)的工具就是構(gòu)造函數(shù)和原型對(duì)象。首先介紹js中的構(gòu)造函數(shù)。2010-02-02Js Jquery創(chuàng)建一個(gè)彈出層可加載一個(gè)頁(yè)面
Js Jquery創(chuàng)建一個(gè)彈出層,當(dāng)加載一個(gè)頁(yè)面進(jìn)彈出層時(shí)出現(xiàn)亂碼,示例代碼如下,大家可以參考參考2014-05-05Javascript實(shí)用方法之json合并的場(chǎng)景分析
這篇文章主要介紹了Javascript實(shí)用方法之json合并,jQuery 的“extend()”方法有兩個(gè)原型:合并的方法,分別是淺合并和深度合并,本文通過(guò)代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09利用JS延遲加載百度分享代碼,提高網(wǎng)頁(yè)速度
相信大家經(jīng)常在一些網(wǎng)站上看到有快捷分享到各大流行網(wǎng)站的按鈕,目前流行的有JiaThis、百度分享、Bshare等,目前用百度分享的居多2013-07-07javascript中的startWith和endWith的幾種實(shí)現(xiàn)方法
javascript中的startWith和endWith的幾種實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-05-05