Ringkasan masalah dengan set data dalam kemahiran javascript

Ringkasan masalah dengan set data dalam kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 15:32:08

asal

1410 orang telah melayarinya

DataSet ialah konsep utama ADO.NET. Anda boleh menganggap DataSet sebagai pangkalan data dalam memori ialah pengumpulan data bebas yang tidak bergantung pada pangkalan data. Apa yang dipanggil kemerdekaan bermakna walaupun pautan data diputuskan sambungan atau pangkalan data ditutup, DataSet masih tersedia secara dalaman menggunakan XML untuk menerangkan data, kerana XML ialah bahasa perihalan data bebas platform dan bebas bahasa. . , dan boleh menerangkan data dengan hubungan yang kompleks, seperti data hubungan ibu bapa-anak, jadi DataSet sebenarnya boleh menampung data dengan hubungan yang kompleks dan tidak lagi bergantung pada pautan pangkalan data.

1. Perihal set data

1.html5 atribut dan asas tersuai

Dalam HTML5, kami boleh menggunakan awalan data untuk menetapkan atribut tersuai yang kami perlukan untuk menyimpan beberapa data Sebagai contoh, kami ingin menyimpan id yang sepadan pada butang teks:

Salin kod Kod adalah seperti berikut:

Ujian

Awalan data di sini dipanggil atribut data, yang boleh ditakrifkan melalui skrip atau boleh digayakan menggunakan pemilih atribut css Nombor ini tidak terhad dan menyediakan alat yang sangat berkuasa semasa mengawal dan memaparkan data.

Berikut ialah contoh menggunakan atribut data pada elemen:

Salin kod Kod adalah seperti berikut:

$18.3

Untuk mendapatkan nilai atribut tertentu, anda boleh menggunakan objek dataset seperti berikut:

 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

Salin selepas log masuk

Jika penyemak imbas menyokong set data, kandungan ulasan akan muncul Jika penyemak imbas tidak menyokong set data, ralat akan dilaporkan dan nilai atribut minuman/makanan/makanan tidak boleh diperoleh: objek adalah batal atau tidak ditentukan. (seperti versi IE9).

Atribut data pada asasnya disokong oleh semua penyemak imbas, tetapi objek set data menyokongnya dengan cara yang istimewa Pada masa ini, anda hanya boleh menggunakan set data untuk mengakses atribut data tersuai anda melalui javascript di bawah Opera 11.1 dan Chrome 9. Bagi penyemak imbas Lain. , FireFox 6 (belum dikeluarkan) dan Safari 6 (belum dikeluarkan) akan menyokong objek dataset Bagi pelayar IE, nampaknya trend ini masih jauh

Perlu diambil perhatian bahawa nama sambungan dengan aksara sempadan perlu bersarung unta apabila digunakan, iaitu, ditulis dalam gabungan huruf besar dan kecil Ini serupa dengan objek gaya elemen aplikasi. dom.style.borderColor Contohnya, dalam contoh di atas, Terdapat atribut data berikut, data-meal-time. Jika kita ingin mendapatkan nilai yang sepadan, kita boleh menggunakan: expenseday.dataset.mealTime

2. Mengapa menggunakan set data

Jika anda menggunakan kaedah tradisional untuk mendapatkan nilai atribut, ia mestilah serupa dengan yang berikut:

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
Sekarang, jika kita ingin mendapatkan berbilang nilai atribut tersuai, kita perlu menggunakan N baris kod berikut untuk mencapainya:

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

Salin selepas log masuk

Dengan atribut set data, kami tidak memerlukan sebarang gelung sama sekali untuk mendapatkan nilai yang anda inginkan, cuma bunuh terus:

perbelanjaan=document.getElementById('perbelanjaan-makan-hari').set data;
Set data bukan objek JavaScript dalam erti kata biasa, tetapi objek DOMStringMap ialah pembolehubah interaktif baharu dalam HTML5 yang mengandungi berbilang pasangan nilai nama.

3.operasi set data

Pasangan nama-nilai boleh dimanipulasi seperti berikut:

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

Salin selepas log masuk

Fungsi beberapa ribu kod di atas adalah untuk memasukkan semua atribut tersuai ke dalam tatasusunan.

Jika anda mahu memadamkan atribut data, anda boleh melakukan ini:

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

Salin selepas log masuk

Jika anda ingin menambah atribut pada elemen, anda boleh melakukan ini:

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

Salin selepas log masuk

4. Kelajuan berbanding dengan getAttribute

Menggunakan set data untuk mengendalikan data adalah lebih perlahan sedikit daripada menggunakan getAttribute.

Walau bagaimanapun, jika kita hanya memproses sejumlah kecil data, impak perbezaan kelajuan ini pada asasnya tidak wujud, sebaliknya, kita harus melihat bahawa menggunakan set data untuk mengendalikan atribut adaptif adalah lebih pantas daripada bentuk lain seperti getAttribute kurang sakit kepala dan lebih mudah dibaca, oleh itu, apabila mengendalikan atribut tersuai, operasi set data adalah pilihan terbaik

5. Tempat untuk menggunakan set data

Setiap kali anda menggunakan atribut data tersuai, adalah pilihan yang baik untuk menggunakan set data untuk mendapatkan pasangan nilai nama Memandangkan banyak penyemak imbas masih menganggap set data sebagai makhluk asing yang tidak diketahui, jadi, dalam Penggunaan sebenar, adalah perlu untuk. lakukan pengesanan ciri untuk melihat sama ada set data disokong, serupa dengan penggunaan berikut:

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

Salin selepas log masuk

注意:如果你的应用程序会频繁更新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]

Salin selepas log masuk

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

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