[javascript] Backbone.js 및 jQuery

Program / 글쓴이

Backbone은 모든 높은 수준의 추상화를 처리하고 jQuery 또는 유사한 라이브러리는 DOM과 함께 작동하고 이벤트를 정규화하는 등의 작업을 수행한다고합니다.

누군가가 간단한 실용적인 예를 들어이 진술을 이해하도록 도와주세요.

또한 Backbone, Knockout과 같은 MVC 프레임 워크의 중요한 기능 중 하나는 모델 (데이터)과 뷰를 동기화 상태로 유지한다는 것입니다. 그러나 이것은 전체 응용 프로그램이 아닌 페이지 수준에서 구체적으로 보입니다. 따라서 모델 / 데이터와 뷰를 여러 페이지에서 동기화 할 수 있습니다 .. (일종의 글로벌)

답변

백본 / 녹아웃은 일반적으로 단일 페이지 애플리케이션에 사용됩니다. 따라서 jQuery는 모든 웹 페이지에서 사용할 수있는 도구 상자이지만 Backbone은 특정 유형의 애플리케이션을위한 것이며 코드를 구성하는 데 도움이됩니다. 적어도 내 경험상 단일 페이지 앱을 구축하는 데있어 가장 큰 과제 중 하나는 코드를 깔끔하고 모듈 식으로 유지하는 것이며, 백본은이 문제를 해결하는 데 큰 도움이됩니다.

일반적인 백본 앱의 특징은 다음과 같습니다.

  • 서버에 아무것도 생성되지 않은 본질적으로 정적 인 HTML 페이지
  • 서버는 앱의 콘텐츠를 제공하는 json REST API 역할을합니다.
  • 데이터를 표시하는 dom 요소는 jQuery 및 다양한 템플릿 라이브러리를 사용하여 백본보기에서 자바 스크립트로 생성됩니다.
  • 서버와의 통신 및 앱의 다른 부분 간의 통신은 백본 모델을 통해 수행됩니다.

여러 페이지에서 데이터 동기화 유지에 대한 질문과 관련하여 내 본능적 인 대답은 여러 페이지가 필요하지 않다는 것입니다. 사용자는 페이지가 변경되고 있음을 인식 할 수 있으며, pushState 기능 덕분에 URL 표시 줄의 주소가 변경되지만 기술적으로는 전체 앱은 한 페이지입니다.

이러한 종류의 접근 방식의 가장 큰 장점은 부드러운 사용자 경험 (페이지 리로딩 없음), json 데이터를 제외한 모든 것이 정적 콘텐츠이기 때문에 우수한 캐싱 지원입니다. 모바일 대상의 경우 phoneGap을 사용하여 웹 앱을 모바일 앱으로 전환 할 수 있습니다. json을 제외한 모든 것은 정적입니다).

답변

귀하의 시작 문장은 실제로 Backbone.js와 jQuery의 차이점에 대한 아주 좋은 설명이었습니다. 그래서 조금 풀어 보겠습니다.

우선, 두 라이브러리는 경쟁에 전혀 참여하지 않고 무료입니다.

예를 들어, 다음은 jQuery로 수행 할 수있는 작업입니다.

  • 애니메이션 슬라이드 쇼
  • iOS 스타일 숫자 “스피너”와 같은 폼 컨트롤 향상
  • 클래스 이름을 기반으로 요소 가시성 전환

그리고 내가 Backbone.js에서 할 수있는 일 :

  • 사용자가 썸네일을 클릭하고 사용 된 카메라, 위치 및 사진 작가 이름과 같은 일부 데이터와 함께 더 큰 버전의 사진을 볼 수있는 사진 앨범을 만듭니다.
  • 데이터 그리드를 표시하고 사용자가 개별 요소를 클릭하고 양식에서 업데이트 할 수있는 마스터 / 세부 정보 유형의 페이지를 작성합니다.

jQuery는 페이지 요소를 선택하여 브라우저가 이벤트를 처리하는 방식의 차이를 완화하는 미시적 수준에서 탁월합니다.

Backbone.js는 더 큰 그림입니다. 데이터 및 애플리케이션 로직을 관리하는 데 도움이됩니다. 위의 사진 앨범 예에서 Backbone은 몇 가지 유용한 구조를 제공합니다. 사진과 관련된 모든 데이터 (모델), 앨범의 모든 사진 목록 (컬렉션) 및 저장할 위치가 있어야합니다. 사용자가 썸네일 (뷰)을 클릭 할 때 발생하는 일을 결정하는 로직입니다. 그것들은 백본 컨트롤 또는 애플리케이션의 주요 부분입니다.

그러나 Backbone.js는 jQuery 또는 이와 유사한 것을 통해 애플리케이션의 데이터 및 로직 결과를 DOM으로 렌더링하는 데 도움이됩니다. 예를 들어, jQuery를 사용하여 페이지에서 Backbone 앱의 컨테이너 역할을 할 요소를 선택하는 것이 일반적입니다. 또한 jQuery를 사용 $(function () {});하여 Backbone 컨트롤 의 일부를 실행하는 것도 일반적 입니다. jQuery를 사용하여 양식 필드 유효성 검사 오류 메시지를 표시 할 수도 있습니다.

jQuery에서 크고 복잡한 사용자 인터페이스를 확실히 구축 할 수 있습니다. 직장에서 유지 관리하는 앱에 몇 가지가 있습니다. 그러나 jQuery는 애플리케이션에 구조를 제공하도록 설계되지 않았기 때문에 작업하기가 어렵습니다. 특히, 항목 그룹을 선택한 다음 해당 항목을 조작하는 콜백 함수를 전달하는 데 기반을 둔 jQuery의 API는 크고 복잡한 컨트롤 또는 앱에서 사용하기에 좋은 패턴이 아닙니다. 결국 많은 중첩 함수가 생기고 무슨 일이 일어나고 있는지보기가 매우 어렵습니다.

현재 Backbone.js에서 이러한 컨트롤 중 하나를 다시 작업하고 있습니다. 마지막 예로서 두 라이브러리에서 동일한 컨트롤로 작업 할 때 내 사고 프로세스가 어떻게 다른지에 대한 간단한 요약이 있습니다.

jQuery에서 다음 사항이 걱정됩니다.

  • li원하는 요소 그룹을 가져 오기 위해 올바른 선택기를 사용 하고 있습니까?
  • 이 Ajax 호출이 완료되면 해당 값 목록을 다시 채워야합니까?
  • 이 배열 값을 input페이지 의 요소에 어떻게 다시 넣을 수 있습니까?

Backbone에서는 다음에 더 집중합니다.

  • 내 모델 항목에서이 속성 집합의 유효성을 검사하는 올바른 논리는 무엇입니까?
  • 사용자가 추가 버튼을 클릭하면 컬렉션에 새 항목을 즉시 추가해야합니까? 아니면 모든 데이터를 채울 때까지 기다려야합니까?
  • 내 컬렉션의 항목이 삭제되기 직전이나 직후에 항목이 어떻게 반응해야합니까?

jQuery는 핵심 세부 사항을 처리하고 Backbone은 더 높은 수준입니다.

마지막으로 Backbone.js 예제를 논의 할 때 “control”과 “app”이라는 단어를 사용했습니다. Backbone.js가 단일 페이지 앱 전용이라는 것은 사실이 아닙니다. 그러나 Backbone.js는 데이터를 조작하고 많은 논리를 처리하는 복잡한 애플리케이션을 빌드하는 데 적합합니다. 소규모 UI 요소에 사용하는 것은 어리석은 일입니다. 추가 구조가 필요하지 않습니다.

업데이트 : 여러 페이지 문제에서 백본은 데이터를 유지하기위한 강력한 메커니즘을 제공합니다. 각 모델에는 saveAJAX 호출을 실행하여 서버에 변경 사항을 저장 하는 메서드가 있습니다. 따라서 데이터를 저장하는 한 다중 페이지 앱을 사용할 수 있습니다. 이것은 매우 유연한 모델이며 우리가 직장에서 Backbone을 사용하게 될 방법입니다. 단일 페이지 앱을 만들고 싶지만 기존 다중 페이지 애플리케이션에서 10 년 동안 작업했습니다. Backbone에서 좀 더 강력한 UI 구성 요소를 다시 빌드 한 다음 사용자가 다른 페이지로 이동하기 전에 변경 사항을 서버에 동기화하려고합니다.

답변

여러 페이지에서 backbone.js를 사용하는 사람들에 대해 들어 본 적이 없습니다. 거의 항상 일종의 단일 페이지 앱입니다.

단일 페이지에는 다양한 모델,보기 및 상태가있을 수 있으며 완전한 기능의 강력한 앱이 될 수 있습니다.

Java에서 이미 서버 측 템플릿 / 뷰 렌더링이있는 경우 backbone.js는 적합하지 않습니다. backbone.js를 최대한 활용하려면 프런트 엔드 자바 스크립트에서 해당 코드의 일부를 이동하거나 복제해야합니다.

단일 페이지 앱을 원하지 않는 경우 (페이지 새로 고침이나 변경이없는 앱을 의미하지만 URL은 여전히 ​​변경 될 수 있으며 사용자에게 여러 페이지처럼 보일 수 있음) 모든 MVC를 계속 사용할 수 있습니다. 백본이 필요하지 않습니다.

편집하다:

백본이하는 일은 일반적으로 서버에서 처리되는 일부 MVC 항목을 이동하여 클라이언트로 이동하는 것입니다. 많은 사람들에게 이것은 서버를 잊어 버리고 앱을 단일 페이지 자바 스크립트 앱으로 작성하는 것을 의미합니다. 서버는 JSON / REST 데이터의 소스가됩니다. 그렇게 할 준비가되어 있지 않다면 backbone.js는 그다지 유용하지 않습니다.

답변

Backbone은 MV * 프레임 워크이고 jQuery는 DOM 툴킷입니다.

MV * 애플리케이션의 주요 기능은 라우팅, 데이터 바인딩, 템플릿 / 뷰, 모델 및 데이터 액세스입니다. 백본은 부분적으로 jQuery에 의존 할 수 있습니다.

jQuery는 광범위한 브라우저 지원과 활발한 커뮤니티로 DOM을 쿼리하기위한 견고한 API입니다. 이벤트 처리, 지연된 개체 및 애니메이션과 함께 제공됩니다.

jQuery를 사용한 간단한 이벤트 바인딩

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});

답변