javascript_javascript 기술의 데이터 세트 문제 요약-JS 튜토리얼-php.cn

javascript_javascript 기술의 데이터 세트 문제 요약

WBOY

풀어 주다： 2016-05-16 15:32:08

원래의

1410명이 탐색했습니다.

DataSet은 ADO.NET의 핵심 개념입니다. DataSet은 메모리 내 데이터베이스로 생각할 수 있습니다. DataSet은 데이터베이스에 의존하지 않는 독립적인 데이터 컬렉션입니다. 소위 독립성은 데이터 링크가 끊어지거나 데이터베이스가 닫혀도 DataSet을 계속 사용할 수 있음을 의미합니다. XML은 플랫폼 독립적이고 언어 독립적인 데이터 설명 언어이기 때문에 DataSet은 내부적으로 XML을 사용하여 데이터를 설명합니다. . 부모-자식 관계 데이터와 같이 복잡한 관계가 있는 데이터를 설명할 수 있으므로 DataSet은 실제로 복잡한 관계가 있는 데이터를 수용할 수 있으며 더 이상 데이터베이스 링크에 의존하지 않습니다.

1. 데이터세트 소개

1.html5가지 맞춤 속성 및 기본사항

HTML5에서는 data- 접두사를 사용하여 일부 데이터를 저장하는 데 필요한 사용자 정의 속성을 설정할 수 있습니다. 예를 들어 해당 ID를 텍스트 버튼에 저장하려고 합니다.

코드 복사 코드는 다음과 같습니다.

테스트

여기서 data- 접두사는 데이터 속성이라고 하며, 스크립트를 통해 정의하거나 CSS 속성 선택기를 사용하여 스타일을 지정할 수 있으며 데이터 제어 및 렌더링 시 매우 강력한 도구를 제공합니다.

다음은 요소에 data 속성을 적용한 예입니다.

코드 복사 코드는 다음과 같습니다.

$18.3

특정 속성의 값을 얻으려면 다음과 같이 데이터세트 개체를 사용할 수 있습니다.

 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

로그인 후 복사

브라우저가 데이터세트를 지원하는 경우 댓글 내용이 팝업됩니다. 브라우저가 데이터세트를 지원하지 않는 경우 오류가 보고되고 drink/food/meal 속성 값을 가져올 수 없습니다. 개체가 null이거나 정의되지 않았습니다. (예: IE9 버전).

데이터 속성은 기본적으로 모든 브라우저에서 지원되지만 데이터 세트 객체는 특별한 방식으로 이를 지원합니다. 현재 Opera 11.1 및 Chrome 9에서는 데이터 세트를 사용하여 자바스크립트를 통해 사용자 정의된 데이터 속성에 액세스할 수 있습니다. 다른 브라우저의 경우 , FireFox 6(아직 출시되지 않음) 및 Safari 6(아직 출시되지 않음)에서는 데이터세트 개체를 지원할 예정이지만 IE 브라우저의 경우 아직 이러한 추세는 요원한 것으로 보입니다.

테두리 문자가 있는 연결 이름은 사용 시 카멜케이스, 즉 대문자와 소문자를 조합하여 작성해야 한다는 점에 유의해야 합니다. 이는 애플리케이션 요소의 스타일 개체와 유사합니다. dom.style.borderColor. 예를 들어 위의 예에는 data-meal-time이라는 데이터 속성이 있습니다. 해당 값을 얻으려면 다음을 사용할 수 있습니다.

2. 데이터 세트를 사용하는 이유

기존 방법을 사용하여 속성 값을 얻는 경우 다음과 유사해야 합니다.

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 객체는 여러 이름-값 쌍을 포함하는 HTML5의 새로운 대화형 변수입니다.

3.데이터세트 작업

이름-값 쌍은 다음과 같이 조작할 수 있습니다.

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

로그인 후 복사

위 수천 개의 코드의 기능은 모든 사용자 정의 속성을 배열에 채우는 것입니다.

데이터 속성을 삭제하려면 다음을 수행하세요.

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

로그인 후 복사

요소에 속성을 추가하려면 다음을 수행하세요.

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

로그인 후 복사

4. getAttribute와 비교한 속도

데이터세트를 사용하여 데이터를 조작하는 것은 getAttribute를 사용하는 것보다 약간 느립니다.

그러나 소량의 데이터만 처리하는 경우 이러한 속도 차이의 영향은 기본적으로 존재하지 않습니다. 대신 데이터 세트를 사용하여 적응형 속성을 작동하는 것이 getAttribute와 같은 다른 형식보다 빠르다는 것을 알아야 합니다. 골칫거리가 적고 가독성이 높습니다. 따라서 균형을 고려하여 맞춤 속성을 운영할 때는 데이터세트 작업이 최선의 선택입니다.

5. 데이터세트 사용처

사용자 정의 데이터 속성을 사용할 때마다 데이터세트를 사용하여 이름-값 쌍을 얻는 것이 좋은 선택입니다. 많은 브라우저가 여전히 데이터세트를 알려지지 않은 외계 생물로 취급하므로 실제 사용에서는 다음 사용법과 유사하게 기능 감지를 수행하여 데이터세트가 지원되는지 확인합니다.

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的问题小结，希望对大家学习有所帮助。