DOM에 데이터 저장

Question

나는 책 목록이 있으며 각 책에 대한 데이터를 저장하려고합니다.

나는 데이터 속성을 사용하여 목록의 각 책을 나타내는 li 요소를 확장하여 dom에이 모든 것을 저장하는 것을 고려하고있었습니다. 이 데이터는 자바 스크립트에서 직접 활용할 수 있습니다.

그러나 데이터 액세스에 액세스하는 것이 성능면에서 느리다는 것을 읽었습니다. 또한 나는 같은 책의 여러 인스턴스를 가질 수 있으므로 html에서 부풀어 오르는 것에 대해 조금 concerened합니다.

다른 대안은 JS 개체를 사용하여 각 책에 대한 데이터를 저장하는 것입니다.

제 질문은 프론트 엔드, DOM 또는 Javscript에 데이터를 저장하는 가장 좋은 방법은 무엇입니까? 미리

Answer 1

DOM 요소와 JavaScript 개체로 데이터를 유지하는 두 번째 경우에 필요한 동안 첫 번째 경우는 직접 관련 데이터와 DOM 요소가 있다는 것을 기억 차이에

감사 어떻게 든 유사한 데이터와 DOM과 관련된 데이터를 유지하기 위해 구조를 유지하십시오. 두 번째 경우는 오류가 발생하기 쉽기 때문에 DOM의 모든 변경 사항이 데이터 추가/제거/수정 요소에 반영되고 데이터의 모든 변경 사항이 에 반영되어야하기 때문에 오류가 발생하기 쉽습니다. 데이터 멤버 추가/제거/수정).

data-*의 경우 속성 데이터는 DOM에서 직접 액세스하므로 두 개가 이미 묶여 ​​있으므로 적어도 내 생각에는 훨씬 더 나은 방법입니다. 그러나 주석에서 언급했듯이 data-* 속성과 함께 제공되는 DOM 검색 오버 헤드가 있습니다.

성능 측면에서 데이터를 메모리에 저장하려면 요소 속성 또는 JavaScript 개체로 저장해야합니다. DOM 요소 속성을 검색하는 것은 실제로 더 비싸지 만 더 편리합니다. 기능적 의미가 없기 때문에 렌더링은 data-* 속성의 영향을받지 않습니다.

Answer 2

data- 속성은 일반적으로 자바 스크립트 (즉, 서버 측 템플릿에서)로 데이터를 가져 오는 방법으로 사용되고 데이터를 저장하는 런타임 장소는 적습니다. 특히 스크립트를 사용하는 동안 자주 액세스하거나 자주 조작하는 경우 활성 데이터를 JavaScript 객체에 보관하는 것이 좋습니다.

이것은 모델에 데이터가 있지만보기에 표시 될 수있는 MVC 방식과 더 비슷합니다. 이러한 이유로 AngularJS와 같은 최신 MVC 프레임 워크 중 일부는 자동 양방향 바인딩을 제공합니다.

Answer 3

선택은 실제로 응용 프로그램의 응용 프로그램 아키텍처와 기능 유형에 따라 다릅니다. 단일 페이지 응용 프로그램을 작성하는 경우 좋은 템플릿 플러그인과 함께 잘 구성된 json 객체를 사용하면 기능면에서 유연성이 훨씬 높아집니다.

json의 ID에서 데이터를 인덱싱 한 다음 해당 ID를 "data-"요소에 저장하면 JSON 구조를 검색하지 않고도 브라우저 이벤트 (클릭 등)에 대한 좋은 반응을 얻을 수 있습니다. JSON 구조를 사용하면 DOM에서 데이터를 다시 작성할 필요없이 목록 및 기타 전역 작업을 정렬하는 등의 작업을 약간 더 쉽게 수행 할 수 있습니다.이 방법은 프레임 워크와 같은 MVC로 작업하거나 자신 만의 "관찰 가능한"데이터 구조를 구현할 때 더 좋습니다.

대부분 서버 측 코드로 작업하면서 "데이터"데이터 (예 : 클릭 할 때 책 세부 정보 표시 또는 이와 비슷한 간단한 기능)를 사용하는 페이지의 기본 기능 만 사용하는 경우 아마도 "data-"속성을 사용하여 추가 세부 사항을 저장하는 것이 더 간단 할 것입니다.