Backbone.js 및 jQuery

Backbone.js 및 jQuery

---

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

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

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

---

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

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

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

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

이러한 종류의 접근 방식의 가장 큰 장점은 부드러운 사용자 경험 (페이지 리로딩 없음), 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은 더 높은 수준입니다.

In closing, notice I've been using the words "control" and "app" when discussing Backbone.js examples. It's not true that Backbone.js is just for single page apps. It is true, though, that Backbone.js is good for building complex applications that manipulate data and handle a lot of logic. It would be silly to use it for small-scale UI elements--the extra structure it imposes isn't needed.

Update: On the issue of multiple pages, yes, Backbone does provide a powerful mechanism for persisting your data. Each model has a save method that will execute an AJAX call to store the changes on the server. So as long as you save your data as you go, you can have a multi-page app. It's a very flexible model, and it's how we'll probably end up using Backbone at work. While I would love to build a single-page app, we have 10 years of work in our existing multi-page application. We're looking to rebuild some of our more intense UI components in Backbone, then sync the changes to the server before the user moves to a different page.

---

I have never heard of people using backbone.js across multiple pages. It's almost always some kind of single page app.

The single page may have many different models, views, and states and can result in a full blown, powerful app.

If you already have server-side template/view rendering in java then backbone.js is NOT for you. To get the most out of backbone.js you must move or duplicate some of that code in the front end javascript.

If you don't want to do a single page app (this just means an app without page refreshes or changes, but the url can still change and can look like multi-pages to the user) then you can keep all of your MVC on the server and you have no need for backbone.

Edit:

What backbone does is move some of the MVC stuff normally handled on the server and move them to the client. For many people this means forgetting about the server and just writing your app as a single page javascript app. The server becomes just a source of JSON/REST data. If you're not prepared to do that, then backbone.js is not that useful.

---

Backbone is a MV* framework while jQuery is a DOM toolkit.

The main features of an MV* application are routing, data binding, templates/views, models, and data access. Backbone could dependant on jQuery partially.

jQuery is a solid API for querying the DOM with extensive browser support and a vibrant community. It comes with event handling, deferred objects, and animations.

Simple event binding using 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