사이트 http://documentcloud.github.com/backbone 에서 backbone.js의 유틸리티를 이해하려고 시도 했지만 여전히 많은 것을 알 수 없었습니다.

어떻게 작동하는지 설명하고 더 나은 JavaScript를 작성하는 데 어떻게 도움이 될 수 있습니까?

Backbone.js는 기본적으로 자바 스크립트 코드를 MVC (Model, View, Controller) 방식 으로 구조화 할 수있는 초경량 프레임 워크입니다 .

모델 은 데이터를 검색하고 채우는 코드의 일부입니다.

뷰 는이 모델의 HTML 표현입니다 (모델이 변경 될 때 뷰가 변경됨).

이 경우 해시 뱅 URL을 통해 Javascript 애플리케이션의 상태를 저장할 수있는 선택적 컨트롤러 ( 예 : http://twitter.com/#search?q=backbone.js)

내가 Backbone에서 발견 한 일부 전문가 :

• 더 이상 Javascript Spaghetti : 코드가 체계적으로 의미가있는 .js 파일로 분류되어 나중에 JAMMIT를 사용하여 결합됩니다.

• 더 이상 jQuery.data(bla, bla): DOM에 데이터를 저장할 필요가 없으며 대신 모델에 데이터를 저장하십시오.

• 이벤트 바인딩이 작동합니다

• 매우 유용한 Underscore 유틸리티 라이브러리

• backbone.js 코드는 잘 문서화되어 있으며 잘 읽었습니다. 많은 JS 코드 기술에 눈을 Open습니다.

단점 :

• 머리를 감싸서 코드에 적용하는 방법을 알아내는 데 시간이 걸렸지 만 Javascript 초보자입니다.

다음은 Rails와 함께 Backbone을 백엔드로 사용하는 방법에 대한 훌륭한 자습서입니다.

CloudEdit : Rails가 포함 된 Backbone.js 튜토리얼 :

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps이 멋진 Collection 클래스는 모델 컬렉션을 처리하고 중첩 된 모델을 모방 할 수 있지만 처음부터 혼동하고 싶지 않습니다.

브라우저에서 복잡한 사용자 인터페이스를 구축하려는 경우 Backbone.js 및 Sammy.js와 같은 프레임 워크를 구성하는 대부분의 부분을 결국 발명하게 될 것입니다. 따라서 문제는 브라우저에서 그것을 사용하기에 충분히 복잡한 것을 구축하고 있습니까 (따라서 똑같은 것을 스스로 발명하지는 않습니다).

빌드하려는 것이 UI가 표시 방식을 정기적으로 변경 하지만 완전히 새로운 페이지를 얻기 위해 서버로 이동하지 않는 경우 Backbone.js 또는 Sammy.js와 같은 것이 필요할 것입니다. 그와 같은 기본적인 예는 Google의 Gmail입니다. 지금까지 사용한 적이 있다면 처음 로그인 할 때 HTML, CSS 및 JavaScript의 큰 덩어리를 다운로드 한 다음 모든 것이 백그라운드에서 발생한다는 것을 알 수 있습니다. 이메일을 읽고받은 편지함을 처리하고 완전히 새로운 페이지를 렌더링 할 필요없이 모든 메일을 다시 검색하고 다시 검색 할 수 있습니다.

이러한 프레임 워크는 개발하기 쉽도록 뛰어난 앱입니다. 그것들이 없으면 다양한 개별 라이브러리 세트를 모아서 기능의 일부 (예 : 기록 관리를위한 jQuery BBQ, 이벤트를위한 Events.js 등)를 얻거나 모든 것을 스스로 구축하게됩니다 모든 것을 스스로 관리하고 테스트해야합니다. Github에서 수천 명의 사람들이 그것을보고있는 Backbone.js와 사람들이 작업 할 수있는 수백 개의 포크와 이미 스택 오버플로에 대한 수백 가지 질문에 대해 대답했습니다.

그러나 구축하려는 계획이 프레임 워크와 관련된 학습 곡선에 합당 할 정도로 복잡하지 않은 경우 그중 어느 것도 중요하지 않습니다. PHP, Java 또는 백엔드 서버가 여전히 사용자의 요청에 따라 웹 페이지를 작성하는 데 많은 노력을 기울이고 있고 JavaScript / jQuery가 해당 프로세스에 착수하고있는 사이트를 계속 구축하고 있다면 Backbone.js가 필요하거나 아직 준비되지 않았습니다.

백본은 ...

... 코드를 구성하는 데 사용할 수있는 매우 작은 구성 요소 라이브러리입니다. 단일 JavaScript 파일로 패키지됩니다. 주석을 제외하면 실제 JavaScript는 1000 줄 미만입니다. 현명하게 작성되었으며 몇 시간 안에 모든 것을 읽을 수 있습니다.

프론트 엔드 라이브러리이므로 스크립트 태그와 함께 웹 페이지에 포함시킵니다. 브라우저에만 영향을 미치며 편안한 API를 노출해야한다는 점을 제외하면 서버에 대해서는 거의 말하지 않습니다.

API가있는 경우 Backbone에 도움이되는 몇 가지 유용한 기능이 있지만 Backbone을 사용하여 정적 HTML 페이지에 대화 형 기능을 추가 할 수 있습니다.

백본은 ...

... JavaScript에 구조를 추가합니다.

JavaScript는 특정 패턴을 강요하지 않기 때문에 JavaScript 응용 프로그램은 매우 빠르게 지저분해질 수 있습니다. JavaScript로 사소한 것을 넘어서는 것을 가진 사람은 다음과 같은 질문에 부딪 칠 것입니다.

1. 데이터를 어디에 저장합니까?
2. 기능을 어디에 두어야합니까?
3. 기능을 합리적으로 호출하여 스파게티로 전환하지 않도록 기능을 어떻게 연결합니까?
4. 다른 개발자가이 코드를 유지 관리 할 수있게하려면 어떻게해야합니까?

백본은 다음을 제공하여 이러한 질문에 답변하려고합니다.

• 데이터 및 데이터 모음을 나타내는 데 도움이되는 모델 및 모음.
• 데이터가 변경 될 때 DOM을 업데이트하는 데 도움이되는 뷰.
• 구성 요소가 서로들을 수있는 이벤트 시스템. 이렇게하면 구성 요소가 분리되어 스파게티가 방지됩니다.
• 현명한 규칙을 최소화하여 개발자가 동일한 코드베이스에서 함께 작업 할 수 있습니다.

이것을 MV * 패턴이라고합니다. 모델, 뷰 및 추가 옵션.

백본은 가볍다

초기 모습에도 불구하고 Backbone은 환상적으로 가벼우 며 거의 아무것도하지 않습니다. 그것이하는 일은 매우 도움이됩니다.

이벤트를 생성하고 서로들을 수있는 작은 객체 집합을 제공합니다. 예를 들어 주석을 나타내는 작은 객체를 만든 다음 브라우저의 특정 위치에 주석의 표시를 나타내는 작은 commentView 객체를 만들 수 있습니다.

commentView에 주석을 듣고 주석이 변경 될 때 다시 그려 지도록 지시 할 수 있습니다. 페이지의 여러 곳에 동일한 설명이 표시 되더라도 이러한 모든보기는 동일한 설명 모델을 듣고 동기화 상태를 유지할 수 있습니다.

이 코드 작성 방법은 많은 상호 작용으로 코드베이스가 커져도 뒤 엉키지 않도록 도와줍니다.

모형

시작할 때 데이터를 전역 변수 또는 DOM에 data attributes 로 저장하는 것이 일반적 입니다. 이 두 가지 모두 문제가 있습니다. 전역 변수는 서로 충돌 할 수 있으며 일반적으로 잘못된 형식입니다. DOM에 저장된 데이터 속성은 문자열 만 될 수 있으므로 다시 구문 분석해야합니다. 배열, 날짜 또는 객체와 같은 것을 저장하고 데이터를 구조화 된 형식으로 구문 분석하는 것은 어렵습니다.

데이터 속성은 다음과 같습니다.

<p data-username="derek" data-age="42"></p>

Backbone은 데이터와 관련 메소드를 나타내는 Model 객체를 제공함으로써이를 해결합니다 . 할 일 목록이 있다고 가정하면 해당 목록의 각 항목을 나타내는 모델이 있습니다.

모델이 업데이트되면 이벤트가 시작됩니다. 특정 객체와 연결된 뷰가있을 수 있습니다. 이 뷰는 모델 변경 이벤트를 수신하고 다시 렌더링합니다.

견해

Backbone은 DOM과 통신하는 View 객체를 제공합니다. DOM을 조작하거나 DOM 이벤트를 수신하는 모든 기능이 여기에 있습니다.

뷰는 일반적으로 전체 뷰 또는 뷰의 일부를 다시 그리는 렌더링 기능을 구현합니다. 렌더 함수를 구현할 의무는 없지만 일반적인 관례입니다.

각보기는 DOM의 특정 부분에 바인딩되므로 검색 양식 만 수신하는 searchFormView와 쇼핑 카트 만 표시하는 shoppingCartView가있을 수 있습니다.

뷰는 일반적으로 특정 모델 또는 컬렉션에 바인딩됩니다. 모델이 업데이트되면 뷰가 수신하는 이벤트가 발생합니다. 뷰가 렌더링을 호출하여 다시 그립니다.

마찬가지로 양식에 입력하면 뷰에서 모델 객체를 업데이트 할 수 있습니다. 그런 다음 해당 모델을 수신하는 다른 모든 뷰는 자체 렌더링 함수를 호출합니다.

이를 통해 코드를 깔끔하고 깔끔하게 유지하는 여러 가지 우려 사항을 명확하게 분리 할 수 ​​있습니다.

렌더링 기능

원하는대로 렌더링 함수를 구현할 수 있습니다. DOM을 수동으로 업데이트하기 위해 jQuery를 여기에 넣을 수 있습니다.

템플릿을 컴파일하여 사용할 수도 있습니다. 템플릿은 삽입 점이있는 문자열입니다. JSON 객체와 함께 컴파일 함수에 전달하고 DOM에 삽입 할 수있는 컴파일 된 문자열을 다시 가져옵니다.

컬렉션

또한 모델 목록을 저장하는 컬렉션에 액세스 할 수 있으므로 todoCollection은 할 일 모델 목록이됩니다. 컬렉션이 모델을 얻거나 잃거나, 순서가 변경되거나, 컬렉션의 모델이 업데이트되면 전체 컬렉션이 이벤트를 발생시킵니다.

뷰는 컬렉션을 수신하고 컬렉션이 업데이트 될 때마다 자체적으로 업데이트 될 수 있습니다.

컬렉션에 정렬 및 필터 메서드를 추가하고 예를 들어 자동으로 정렬되도록 만들 수 있습니다.

그리고 그것을 묶는 이벤트

가능한 한 응용 프로그램 구성 요소는 서로 분리되어 있습니다. 이들은 이벤트를 사용하여 통신하므로 shoppingCartView는 shoppingCart 콜렉션을 듣고 카트가 추가 될 때 다시 그립니다.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

물론 다른 객체도 shoppingCart를 듣고있을 수도 있고 전체 업데이트 또는 로컬 저장소에 상태 저장과 같은 다른 작업을 수행 할 수도 있습니다.

• 뷰는 모델을 듣고 모델이 변경 될 때 렌더링합니다.
• 뷰는 컬렉션을 듣고 컬렉션의 항목이 변경 될 때 목록 (또는 그리드 또는지도 등)을 렌더링합니다.
• 모델은 뷰를 수신하여 양식을 편집 할 때 상태를 변경할 수 있습니다.

이와 같이 객체를 분리하고 이벤트를 사용하여 통신하면 매듭에 얽매이지 않으며 새로운 구성 요소와 동작을 쉽게 추가 할 수 있습니다. 새 구성 요소는 시스템에 이미있는 다른 오브젝트를 청취해야합니다.

컨벤션

Backbone을 위해 작성된 코드는 느슨한 규칙을 따릅니다. DOM 코드는 View에 속합니다. 컬렉션 코드는 컬렉션에 속합니다. 비즈니스 로직은 모델로 진행됩니다. 다른 개발자가 코드베이스를 집어 들으면 처음부터 끝날 수 있습니다.

요약하자면

백본은 코드에 구조를 제공하는 경량 라이브러리입니다. 구성 요소가 분리되어 이벤트를 통해 통신하므로 혼란에 빠지지 않습니다. 새 객체를 생성하고 기존 객체를 적절히 듣도록하여 코드베이스를 쉽게 확장 할 수 있습니다. 코드는 더 깨끗하고 더 훌륭하며 유지 관리가 쉬워집니다.

내 작은 책

나는 백본을 너무 좋아서 그것에 관한 작은 소개 책을 썼습니다. http://nicholasjohnson.com/backbone-book/에서 온라인으로 읽을 수 있습니다.

: 나는 또한 당신이 여기에서 찾을 수 있습니다 짧은 온라인 과정으로 재료 아래로 파산 http://www.forwardadvance.com/course/backbone을 . 하루 정도면 코스를 완료 할 수 있습니다.

다음은 흥미로운 프레젠테이션입니다.

Backbone.js 소개

힌트 (슬라이드에서) :

• 브라우저에 난간이 있습니까? 없음 .
• JavaScript를위한 MVC 프레임 워크? Sorta .
• 뚱뚱한 상태 기계? 예 !

Backbone.js는 코드를 구성하는 데 도움이되는 JavaScript 프레임 워크입니다. 문자 그대로 응용 프로그램을 빌드하는 중추입니다. jQuery UI 또는 Dojo와 같은 위젯을 제공하지 않습니다.

서버의 RESTful 엔드 포인트와 인터페이스하는 깨끗한 JavaScript 코드를 작성하도록 확장 할 수있는 멋진 기본 클래스 세트를 제공합니다.

JQuery와 Mootools는 프로젝트 도구가 많은 도구 상자 일뿐입니다. 백본은 JQuery 또는 Mootools를 사용하여 애플리케이션을 빌드 할 수있는 프로젝트의 아키텍처 또는 백본 역할을합니다.

이것은 꽤 좋은 소개 비디오입니다 : http://vimeo.com/22685608

Rails and Backbone에 대해 더 많이 찾고 있다면, Thoughtbot은 다음과 같은 좋은 책을 가지고 있습니다 (무료 아님) : https://workshops.thoughtbot.com/backbone-js-on-rails

나는 MVC의 모든 "이점"이 작업을 더 쉽고 빠르거나 더 나은 것으로 만들지 않았다는 것을 인정해야한다. 전체 코딩 경험을보다 추상적이고 시간 소모적으로 만듭니다. 분리가 의미하는 다른 사람의 개념을 디버깅하려고 할 때 유지 관리는 악몽입니다. Cairngorm을 MVC 모델로 사용한 FLEX 사이트를 업데이트하려고 시도한 사람이 몇 명인지 모르지만 업데이트하는 데 30 초가 걸리는 경우가 종종 2 시간 이상 걸릴 수 있습니다 (단일 이벤트를 찾기 위해 사냥 / 추적 / 디버깅) ). MVC는 여전히 당신이 할 수있는 "장점"이었습니다.

BackboneJS에서 작성한 빠른 시작 게시물입니다. 그것이 도움이되기를 바랍니다! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js는 JavaScript가있는 MVC (Model-View-Controller) 이지만 Java 스크립트의 MVC 패턴에 대한 백본보다 Extjs가 더 좋습니다

백본을 사용하면 원하는 거의 모든 것을 자유롭게 수행 할 수 있습니다. API를 포크하고 사용자 정의하려고하는 대신 간단하고 쉽게 구현할 수 있도록 Backbonejs를 사용합니다. 다시 말하지만 두 가지 중 필요한 것은 말하기가 어렵습니다.

백본은 CoffeeScript를 쓴 Jeremy Ashkenas에 의해 만들어졌습니다. JavaScript가 많은 응용 프로그램으로서 Backbone으로 알려진 것은 응용 프로그램을 일관된 코드 기반으로 구성하는 일을 담당했습니다. 백본의 유일한 종속성 인 Underscore.js도 DocumentCloud 응용 프로그램의 일부였습니다.

Backbone은 개발자 가 전통적인 서버 측 애플리케이션 로직에서 얻을 수있는 만큼의 훈련 과 구조 를 통해 클라이언트 측 웹 앱에서 데이터 모델을 관리하도록 도와줍니다 .

Backbone.js 사용의 추가 이점

1. 프레임 워크가 아닌 라이브러리로 백본을 참조하십시오.
2. Javascript는 이제 (MVVM) 모델 의 구조화 된 방식으로 구성됩니다.
3. 대규모 사용자 커뮤니티

또한 KVO와 함께 컨트롤러 및보기를 사용하여 라우팅을 추가합니다. "AJAXy"애플리케이션을 개발할 수 있습니다.

가벼운 Sproutcore 또는 Cappuccino 프레임 워크로보십시오.

클라이언트 측의 MVC 디자인 패턴입니다. 저를 믿으십시오. 더 깨끗하고 명확한 코드는 말할 것도없고 코드를 유지하는 것이 더 쉽습니다. 처음에는 조금 까다로울 수 있지만 훌륭한 도서관이라고 믿습니다.

이미 많은 좋은 답변이 있습니다. 백본 js는 코드를 체계적으로 유지하는 데 도움이됩니다. 모델 / 컬렉션을 변경하면 뷰 렌더링이 자동으로 처리되어 많은 개발 오버 헤드가 줄어 듭니다.

개발에 최대한의 유연성을 제공하지만 개발자는 모델을 파괴하고 뷰를 올바르게 제거해야합니다. 그렇지 않으면 응용 프로그램에 메모리 누수가있을 수 있습니다.

수시로 변경해야하며 실시간 (예 : Facebook 또는 StackOverflow)으로 실행되는 많은 AJAX 요청과 사용자 상호 작용이 많은 웹 응용 프로그램은 Backbone.js와 같은 MVC 프레임 워크를 사용해야합니다. 좋은 코드를 작성하는 가장 좋은 방법입니다.

응용 프로그램이 작지만 Backbone.js는 특히 처음 사용자에게 과잉입니다.

백본은 클라이언트 측 MVC를 제공하며 이에 따른 모든 이점을 제공합니다.