UI의 요소간에 데이터 전달하기

Question

웹 응용 프로그램에 익숙하지 않으며 HTML로 데이터를 처리하는 가장 좋은 방법을 이해하려고합니다. 나는 Appengine (Python)을 사용하고 있고보기에 많은 양의 데이터를로드 할 수있었습니다. 가장 단순한 형태로 영화 이름 집합이며 각 이름에는 세부 정보 (예 : 연도, 평점 등)가 있습니다. 이제 동영상 링크와 div 사이에 모든 정보가 표시되는 데이터를 어떻게 전달합니까? 내 응용 프로그램에서 일부 컨트롤에 대한 jQuery 사용하는 것입니다 그래서 거기에 컨트롤로 데이터 바인딩을 할 수있는 방법이 궁금하네요?

또한이 정보를 한 번의 호출로 UI에로드하면 (즉 영화 제목이 많지 않다는 가정하에) 사람들이 쉽게 알아볼 수있을 것입니다. 이 정보를 긁어서 화면에 표시 하시겠습니까? 아니면 여기에 일반적으로 사용되는 난독 화가 있습니까?

미안하지만 분명히 명확하지는 않지만 웹 개발에있어 절대적인 초보자입니다!

업데이트 1 : jQuery data() API가 있습니다. 이게 효과가있는 것처럼 보입니다. 코멘트?

Update2 : 나중에 테스트 할 때 data()는 실제로 div 자체에 표시하는 것이 아니라 요소에 데이터를 첨부하는 것으로 나타났습니다.

Answer 1

몇 가지 방법이 있지만 기본적인 아이디어는 시각적으로 렌더링되지 않는 방식으로 HTML에 데이터를 넣은 다음 Javascript를 사용하여 HTML을 구문 분석하고 필요할 때 데이터를 꺼내는 것입니다.

최신 브라우저에서 가장 쉬운 방법은 데이터 속성을 사용하는 것입니다. 이것들은 데이터로 시작하는 모든 속성이며 나머지는 직접 지정할 수 있습니다. 예를 들어이 경우

<a href="/movie/1234" data-id="1234" data-title="Tsar Wars" data-actors="[Harryson Fjord, Carry Fischer]">Czar Wars</a> 

, 사용자는 "차르 ​​전쟁"이라는 링크를 볼 수 있지만 쉽게 데이터 - 액세스 할 수 있습니다 자바 스크립트는 필요한 데이터를 얻을 수 속성. 이 접근법의 또 다른 이점은 jQuery가 자동으로 data() API에서 데이터 속성에 액세스 할 수있게한다는 것입니다.

또 다른 방법은 목록에있는 모든 데이터 요소가있는 숨겨진 HTML 목록 요소를 사용하는 것입니다.하지만이 모든 것을 직접 파싱해야합니다.

표준 난독 화가 없습니다. 서버 측에서 자신을 혼란스럽게 할 필요가있을 것이고, JS에서 unobfuscate 할 필요가있을 것이다. js에서 난독 화 알고리즘을 알아내는 것도 그리 어렵지 않으므로이 작업은 가치가 없습니다.

데이터가 실제로 비공개 인 경우 서버에서 모든 처리를 수행하도록 설계해야합니다. 예를 들어 토큰 (예 : 1234) 만 표시하고 AJAX 호출을 사용하여 토큰을 서버에 전달하면 서버가 데이터 처리를 수행하고 공개적으로 안전한 결과를 스크립트에 다시 저장할 수 있습니다.