또한 데이터를 자바 스크립트 데이터 구조에 보관해야합니까? 아니면 그냥 DOM에?

Question

나는 Javascript와 Jquery에 매우 익숙하다. 그래서이 초보자의 질문에 사과한다.

간단한 ajax 웹 앱에서 주로 큰 테이블 인 HTML 페이지를 작성합니다. 이 표의 각 행은 이벤트 (파티, 쇼 등)를 설명합니다. 내 페이지는이 정보를 표시 할뿐만 아니라 사용자가 다양한 정보를 표시 할 수 있도록 해줍니다. 특히 다양한 기준에 따라 표를 동적으로 검색하고 필터링 할 수 있습니다.

초급 초보자의 질문 :이 광범위한 종류의 상황 (웹 서버에서 검색 한 정보에 자바 스크립트 코드가 많은 작업을 실행하도록하려는 경우)에서 DOM을 데이터로 사용하겠습니까? 구조? Jquery를 사용하여 쉽게 검색하고 조작 할 수있는 가능성이 있습니다. (예 : "날짜 열 = 2010-01-01 및 이벤트 유형 열 = '개인 파티'인 이벤트를 설명하는 테이블 행을 찾으십시오.) 또는 기존 Javascript 데이터 구조, 검색/필터/작동 그런 다음 일반 자바 스크립트 코드를 사용하여 사용자에게 결과를 표시하도록 DOM을 적절히 업데이트 하시겠습니까?

(초보자는 DOM을 사용하는 첫 번째 방법이 더 느리고 DOM을 사용하는 방법이 좋다고 생각합니다. 두 번째 전략이 합리적이라면 (사실인가?) 실용적인 질문입니다. 자바 스크립트 객체에 해당 Jquery 객체에 대한 포인터를 저장할 수 있습니까? 예. do

var events = new Array(); 
// .... 
var event3094 = new Event('party','2010-01-01' /*, ... */); 
event3094.domElement = $("#correctIdOfTheEventRowInMyTable"); 

events.push(event3094) 

이 개체는 각 이벤트 개체의 Jquery 개체에 대한 참조 (포인터?) 만 저장합니까, 아니면 Jquery 개체의 새 복사본을 만드는 중입니까?

저는 "전문가들이 어떻게하는지 궁금합니다. :)

조언과 통찰력을 가져 주셔서 감사합니다.

환호

라라

Answer 1

이렇게 많은 방법이 있지만 DOM 조작은 거의 항상 JS 조작보다 느립니다.

질문에 답하기 위해 언제든지 $(selector)을 사용하면 새 jQuery 객체가 만들어지고 요소를 찾기위한 일치가 수행됩니다. 에 행을 읽기 일반 HTML 테이블

에서

첫 번째 옵션

1. 데이터로드, 그리고 (각 셀의 내용을) 바로 데이터를 저장 :

   나는 두 가지 방법을 추천 할 것입니다 코드 예제와 비슷한 배열.

2. 해당 개체에 tr에 대한 참조를 저장하십시오.
3. 그런 다음 필터 등을 처리하고 필요에 따라 DOM에만 변경 사항과 검색을 적용 할 수 있습니다.

SECOND 옵션으로 데이터

스토어 레퍼런스로부터없이

1. 로드 페이지 테이블
2. 로드 서버 JSON 같은 데이터 및 테이블을 생성 tr 요소

기본적으로 $(selector) 번을 1000 번 수행하지 않으려 고합니다. 당신이 개체에 jQuery를 방법을 사용해야하는 경우에

var $rows = $("table tr"); 

// ... 

event.domElement = $rows[0]; // Stores reference to existing DOM node, not a new jQuery object. 

그런 다음, 당신이 jQuery를 래퍼에서 그것을 포장 $(yourEvent.domElement)을 사용할 수 개념은이 같은 것입니다.

Answer 2

나는 you'l 내가 로직 권리를 따른다면 DOM 방법은 동일한 속도에 가까운 찾을 생각합니다. 두 번째 방법은 데이터를 조작 한 다음 변경 사항을 DOM에 적용해야합니다. 첫 번째 방법은 두 작업을 동시에 허용합니다.

Answer 3

주로 개인적인 취향이라고 생각하지만 JavaScript로 개체를 저장 한 다음 필요할 때 HTML로 렌더링하는 것을 좋아합니다. 내 이해에서

event3094.domElement = $("#correctIdOfTheEventRowInMyTable"); 

은 행 요소 (복사본이 아님)의 jQuery 래퍼에 대한 참조를 저장합니다.

JS를 저장하는 것의 한 가지 장점은 객체를 잃어 버렸을 때만 (10,000 등) 객체의 일부만 렌더링하면 10,000 *을 만들지 않으면 브라우저의 성능이 훨씬 향상된다는 것입니다 (DOM 수 요소 당 요소) 요소.

편집 : 아, 가능하다면 서버의 데이터를 JSON으로 클라이언트에 보낼 수도 있습니다. XML과 비교하여 매우 컴팩트하며 새로운 브라우저에서는 JSON.parse()를 사용하여 빠르고 안전하게 구문 분석 할 수 있습니다. 구형 브라우저의 경우이 라이브러리 http://www.json.org/js.html 만 사용하십시오. 라이브러리는 브라우저에서 제공하지 않으면 전역 JSON 네임 스페이스 만 만듭니다.

Answer 4

만약 당신이 데이터를 많이 가지고있어 객체를 만들고 그냥 XML로 제공하십시오.그렇게하면 HTML DOM에서 작동하는 것과 동일한 기능을 대부분 사용할 수 있지만 탐색 할 테이블과 같은 미친 마크 업 구조는 없습니다.

Answer 5

데이터에 액세스하는 방법을 고려해야합니다. 요소의 이벤트에 대한 모든 데이터가 요소 (예 : 테이블 셀에서만 작동하는 이벤트)에 포함되어 있으면 DOM에 저장하는 것이 좋습니다.

그러나 한 요소의 계산이 다른 요소의 데이터 (예 : 특정 열의 모든 표 셀의 합계)에 따라 달라지는 경우 모든 데이터가 흩어져있는 경우 모든 데이터를 수집하는 것이 어려울 수도 있습니다 DOM 요소는 단일 데이터 구조와 비교됩니다.

Answer 6

대부분의 사용자에게 표시 될 것으로 예상되는 행 수에 따라 (내가 생각하는 것보다 많지는 않지만 수백 개라고 가정 해 보겠습니다.) 나는 아마도 DOM 테이블에 모든 것을 유지하려고합니다. 이미 건물. (한 페이지에서 수천 행을 처리 할 것으로 예상되는 경우 브라우저로 모두 보내지 않고 다른 솔루션을 탐색 해보십시오.)

원본 게시물. 먼저이 테이블을 어떻게 작성하고 있습니까? 나는 서버 측 솔루션을 사용한다고 상상한다. 수정하는 것이 얼마나 쉬운가요? XML 또는 JSON과 같이 다른 형식으로 두 번째로 모든 데이터를 처리하고 생성하는 것은 얼마나 많은 추가 작업이 필요합니까?서버 쪽에서 복잡성이 더해져 복잡성이 더해져 클라이언트 쪽에서 일치시킬 수 있습니까? 플랫폼에 따라서는 사소한 일이있을 수 있지만 고려해야 할 사항입니다.

자, DOM에 당신의 대안에 관해서 :

나는 동의하고 내가 JSON은 당신이 원하는 무엇을 "밖으로 상자의"매우 최적있을 거라고 생각하지 않는 위의 댓글에서 언급 . 자바 스크립트 배열은 더 좋지 않습니다. XML은 jquery를 사용하여 쉽게 트래버스/필터링 할 수 있다는 점에서 훌륭하지만 DOM을 처리해야합니다. 물론, DOM 요소에 대한 참조를 저장할 수는 있지만, 그 작업은 여러 작업과 비슷하게 보이고 나중에 일치시킬 때 더 많은 작업이 필요할 것입니다. 또한 주요 성능 향상을 반드시 보장하지 않아도됩니다.

귀하의 질문에 직접 대답 하시려면 데이터를 JavaScript 데이터 구조 또는 DOM에만 보관하십시오. "간단한"아약스 웹 앱이라고 말씀하셨습니다. 내 추천은 이것을 간단하게 유지하려고 노력하는 것입니다! jquery를 사용하여 검색 기준에 따라 행과 셀을 쉽게 찾을 수있는 방법에 대한 예제를 통해이 기능을 시도해 볼 수 있습니다.

행운을 빈다.
-Mike