Backbone.js 및 jQuery

Backbone.js 및 jQuery

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

누가 간단한 실용적인 예를 들어 제가 이 진술을 이해하는 것을 도와주실 수 있나요?

또한 백본, 녹아웃과 같은 MVC 프레임워크의 중요한 특징 중 하나는 모델(데이터)과 뷰를 동기화한다는 것입니다.그러나 이는 전체 애플리케이션이 아닌 페이지 레벨에서 특정한 것으로 보입니다.모델/데이터 및 뷰를 여러 페이지에 걸쳐 동기화할 수 있습니까?(지구적인 것 같은)

당신의 첫 문장은 실제로 Backbone.js와 jQuery의 차이점을 아주 잘 표현한 문장이었으므로, 조금 풀어봅시다.

우선, 두 도서관은 전혀 경쟁 관계가 아닙니다. 그것들은 무료입니다.

예를 들어, jQuery로 수행할 몇 가지 작업을 소개합니다.

• 애니메이션 슬라이드쇼
• iOS 스타일의 숫자 "스피너"와 같은 폼 제어 기능 향상
• 클래스 이름을 기준으로 요소의 가시성 토글

그리고 Backbone.js에서 할 수 있는 몇 가지 사항:

• 사용자가 썸네일을 클릭하고 사용한 카메라, 위치, 사진작가 이름 등의 일부 데이터와 함께 더 큰 버전의 사진을 볼 수 있는 사진첩을 만듭니다.
• 데이터 그리드를 제공하고 사용자가 개별 요소를 클릭하여 양식으로 업데이트할 수 있는 마스터/디테일 유형의 페이지를 작성합니다.

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

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

backbone.js는 jQuery를 통해 응용 프로그램의 데이터와 논리의 결과를 DOM으로 변환하는 데 도움을 줍니다.예를 들어, 백본 앱의 컨테이너 역할을 할 요소를 페이지에서 선택하기 위해 jQuery를 사용하는 것이 일반적입니다.jQuery's를 사용하는 것도 일반적입니다.$(function () {});백본 컨트롤의 조각들을 불태우는 겁니다폼 필드 검증 오류 메시지를 jQuery와 함께 표시할 수도 있습니다.

jQuery에서는 크고 복잡한 사용자 인터페이스를 구축할 수 있습니다.제가 직장에서 관리하는 앱에 몇 개 있습니다.그러나 jQuery는 응용프로그램에 구조를 제공하도록 설계되지 않았기 때문에 작업하기가 어렵습니다.특히 아이템 그룹을 선택한 후 해당 아이템을 조작하는 콜백 기능을 전달하는 것을 기반으로 하는 jQuery의 API는 크고 복잡한 컨트롤이나 앱에서 사용하기에 좋은 패턴이 아닙니다.많은 중첩 함수가 발생하게 되고, 어떤 일이 일어나고 있는지 확인하기가 매우 어렵습니다.

저는 현재 Backbone.js에 있는 컨트롤 중 하나를 다시 작업하고 있습니다.마지막 예로, 서로 다른 라이브러리에서 동일한 컨트롤을 사용할 때 내 사고 과정이 어떻게 다른지 간단히 요약해 보겠습니다.

jQuery에서, 나는 다음이 걱정입니다.

• 제가 오른쪽 셀렉터를 사용해서 그룹을 잡고 있는 건가요?li내가 원하는 요소?
• 이 Ajax 호출이 완료되면 해당 값 목록을 다시 채워야 합니까?
• 이러한 배열 값을 어떻게 다시 저장할 수 있습니까?input페이지의 요소?

Backbone에서는 다음에 중점을 둡니다.

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

jQuery는 세부적인 사항을 처리하며 Backbone은 보다 높은 수준을 자랑합니다.

마지막으로, Backbone.js 예를 논의할 때 "control"과 "app"이라는 단어를 사용하고 있다는 것을 알아두세요.Backbone.js가 한 페이지의 앱만을 위한 것이라는 것은 사실이 아닙니다.그러나 Backbone.js가 데이터를 조작하고 많은 논리를 처리하는 복잡한 응용 프로그램을 구축하는 데 유용한 것은 사실입니다.소규모 UI 요소에 사용하는 것은 어리석은 일입니다. 추가 구조가 필요하지 않습니다.

업데이트: 여러 페이지의 문제에 대해서는 Backbone이 데이터를 유지하는 강력한 메커니즘을 제공합니다.각각의 모델은save서버에 변경 사항을 저장하기 위해 AJAX 호출을 실행하는 메서드입니다.따라서 데이터를 저장하기만 하면 여러 페이지의 앱을 가질 수 있습니다.매우 유연한 모델이며, 직장에서 Backbone을 사용하게 될 것입니다.저는 한 페이지짜리 앱을 만들고 싶지만, 우리는 기존의 여러 페이지짜리 앱에서 10년 동안 일해 왔습니다.사용자가 다른 페이지로 이동하기 전에 Backbone에서 좀 더 강력한 UI 구성 요소를 재구축하고 변경 사항을 서버에 동기화하려고 합니다.

백본/녹아웃은 일반적으로 단일 페이지 응용 프로그램에 사용됩니다.따라서 jQuery는 모든 웹 페이지에서 사용할 수 있는 툴박스인 반면 Backbone은 특정 유형의 응용 프로그램을 위한 것으로 코드를 구성하는 데 도움이 됩니다.적어도 제 경험으로는 단일 페이지 앱을 만드는 데 가장 큰 어려움 중 하나는 코드를 깨끗하고 모듈식으로 유지하는 것입니다. 백본은 이 문제를 해결하는 데 많은 도움이 됩니다.

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

• 서버에서 생성되지 않은 기본적으로 정적 html 페이지
• 서버는 앱의 컨텐츠를 제공하는 json REST api 역할을 합니다.
• 데이터를 표시할 돔 요소는 jQuery와 다양한 템플릿 라이브러리를 사용하여 백본 뷰의 javascript로 작성됩니다.
• 서버와의 통신은 물론 앱의 여러 부분 간에도 백본 모델을 통해 이루어집니다.

여러 페이지에 걸쳐 데이터를 동기화하는 것에 대한 귀하의 질문에 대해 제 본능적인 대답은 여러 페이지가 필요하지 않다는 것입니다. 사용자는 페이지가 변경되고 있음을 인지할 수 있고 pushState 기능 덕분에 urlbar의 주소가 변경되지만 엄밀히 말하면 전체 앱은 하나의 페이지입니다.

이러한 접근 방식의 가장 큰 장점은 원활한 사용자 환경(페이지를 다시 로드하지 않음), json 데이터를 제외한 모든 것이 정적 콘텐츠이므로 좋은 캐싱 지원, 모바일 타겟이 phoneGap을 사용하여 웹 앱을 모바일 앱으로 전환할 수 있는 가능성(json 제외한 모든 것이 정적이기 때문입니다.

backbone.js를 여러 페이지에 걸쳐 사용하는 사람은 들어본 적이 없습니다.거의 항상 한 페이지의 앱 같은 것입니다.

한 페이지에 다양한 모델, 보기 및 상태가 있을 수 있으며, 이로 인해 강력하고 완전한 앱이 생성될 수 있습니다.

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

한 페이지의 앱(페이지를 새로 고치거나 변경하지 않는 앱을 의미하지만 URL은 여전히 변경될 수 있고 사용자에게 여러 페이지로 보일 수 있음)을 원하지 않는 경우 서버에 모든 MVC를 유지할 수 있으며 백본이 필요하지 않습니다.

편집:

백본이 하는 일은 서버에서 일반적으로 처리되는 MVC의 일부를 클라이언트로 옮기는 것입니다.많은 사람들에게 이것은 서버를 잊어버리고 당신의 앱을 한 페이지의 자바스크립트 앱으로 쓰는 것을 의미합니다.서버는 단지 JSON/REST 데이터의 원천이 됩니다.준비가 되어 있지 않다면 backbone.js는 유용하지 않습니다.

백본은 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" );
});

언급URL : https://stackoverflow.com/questions/9715295/backbone-js-and-jquery