backbone.js의 목적은 무엇입니까?

backbone.js의 목적은 무엇입니까?

사이트 http://documentcloud.github.com/backbone,에서 backbone.html의 유틸리티를 이해하려고 했지만 아직 많은 것을 알 수 없었습니다.

어떻게 동작하는지, 그리고 자바스크립트를 더 잘 작성하는데 어떻게 도움이 되는지 설명해주실 분 있나요?

Backbone.js는 기본적으로 MVC(모델, 뷰, 컨트롤러) 방식으로 Javascript 코드를 구성할 수 있는 초경량 프레임워크입니다.

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

뷰는 이 모델의 HTML 표현입니다(모델 변경 등에 따라 뷰가 바뀝니다).

이 경우 Javascript 응용 프로그램의 상태를 해시방 URL(예: http://twitter.com/#search?q=disc.disc).

Backbone에서 발견한 몇 가지 장점은 다음과 같습니다.

• Javascript 스파게티 불필요: 코드가 정리되어 의미상 의미 있는 .js 파일로 분할되어 나중에 JAMM을 사용하여 결합됩니다.IT부문

• 그만!jQuery.data(bla, bla) DOM에 모델에 데이터를 할 수 있습니다.대신 모델에 데이터를 저장할 필요가 없습니다.

• 이벤트 바인딩은 기능합니다.

• 매우 편리한 언더스코어 유틸리티 라이브러리

• backbone.backbone 코드는 잘 문서화되어 있어 판독이 용이합니다.많은 JS 코드 기술에 눈을 떴다.

단점:

• 머리를 싸매고 코드에 적용하는 방법을 알아내는데 시간이 좀 걸렸지만 난 자바스크립트 초보야.

다음은 백본과 레일을 백엔드로 사용하는 방법에 대한 훌륭한 튜토리얼 세트입니다.

Cloud Edit:레일을 사용한 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/

p.s. 모델 컬렉션을 다루고 중첩된 모델을 흉내낼 수 있는 훌륭한 컬렉션 클래스도 있지만 처음부터 혼동하고 싶지는 않습니다.

브라우저에 복잡한 사용자 인터페이스를 구축한다면 Backbone.js나 Sammy.js와 같은 프레임워크를 구성하는 대부분의 요소를 최종적으로 개발하게 될 것입니다.그래서 질문은 브라우저에 사용할 가치가 있을 만큼 복잡한 것을 만들고 있는가 하는 것입니다(그러면 같은 것을 스스로 발명하지 않아도 됩니다).

UI가 정기적으로 표시 방법을 변경하지만 완전히 새로운 페이지를 얻기 위해 서버로 이동하지 않는 경우 Backbone.js나 Sammy.js와 같은 것이 필요할 수 있습니다.그와 같은 것의 주요 예는 구글의 GMail이다.만약 당신이 그것을 사용해본 적이 있다면, 당신이 처음 로그인할 때 HTML, CSS, JavaScript의 큰 덩어리를 다운로드하고 그 후에 모든 것이 백그라운드에서 일어난다는 것을 알게 될 것입니다.이메일을 읽고 받은 편지함을 처리하며, 완전히 새로운 페이지를 렌더링할 필요 없이 모든 문서를 다시 검색 및 되돌릴 수 있습니다.

이러한 프레임워크가 개발의 용이성에 뛰어난 앱입니다.이러한 기능이 없으면 다양한 개별 라이브러리를 조합하여 기능의 일부를 얻거나(예를 들어 jQuery BBQ, 이벤트용 Events.js 등) 모든 것을 직접 구축하고 모든 것을 직접 관리 및 테스트해야 합니다.Github에서 수천 명의 사용자가 시청하고 있는 Backbone.js, 수백 개의 포크, Stack Overflow에서 이미 수백 개의 질문을 받고 답변하는 것과 대조됩니다.

그러나 구축하려는 것이 프레임워크와 관련된 학습곡선의 가치가 있을 정도로 복잡하지 않다면 그 중 어느 것도 중요하지 않습니다.백엔드 서버가 사용자의 요청에 따라 웹 페이지를 구축하는 작업을 수행하고 JavaScript/jQuery가 바로 그 프로세스인 PHP, Java 또는 기타 사이트를 구축하고 있다면 Backbone.js는 필요하지 않거나 아직 준비가 되지 않았습니다.

백본은...

코드 구성에 사용할 수 있는 매우 작은 컴포넌트 라이브러리입니다.단일 JavaScript 파일로 패키징되어 있습니다.코멘트를 제외하고 실제 JavaScript는 1000줄 미만입니다.그것은 현명하게 쓰여졌고 당신은 몇 시간 안에 모든 것을 읽을 수 있다.

이것은 프런트 엔드 라이브러리이며 스크립트 태그와 함께 웹 페이지에 포함합니다.브라우저에만 영향을 미치고 서버에 대한 정보는 거의 없습니다.단, 이상적으로는 안정성이 뛰어난 API가 공개되어야 합니다.

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

백본은...

JavaScript에 구조 추가.

JavaScript는 특정 패턴을 적용하지 않기 때문에 JavaScript 어플리케이션은 매우 빠르게 혼란스러워질 수 있습니다.JavaScript에서 사소한 것 이상의 것을 구축한 사람은 다음과 같은 질문에 직면할 것입니다.

1. 데이터는 어디에 저장합니까?
2. 기능은 어디에 둘까요?
3. 기능이 스파게티로 전환되지 않도록 하려면 어떻게 배선해야 합니까?
4. 다른 개발자가 이 코드를 유지 관리할 수 있도록 하려면 어떻게 해야 합니까?

Backbone은 다음 사항을 제공함으로써 이러한 질문에 답하려고 합니다.

• 모델 및 컬렉션: 데이터 및 데이터 수집을 나타내는 데 도움이 됩니다.
• 보기: 데이터가 변경될 때 DOM을 업데이트하는 데 도움이 됩니다.
• 컴포넌트가 서로의 말을 들을 수 있는 이벤트 시스템.이렇게 하면 컴포넌트의 결합이 해제되어 스파게티화를 방지할 수 있습니다.
• 개발자들이 동일한 코드베이스에서 함께 작업할 수 있도록 최소한의 규칙 집합입니다.

이것을 MV* 패턴이라고 부릅니다.모델, 뷰 및 기타 옵션.

백본이 가볍다

Backbone은 처음 등장했지만 환상적으로 가벼워서 거의 아무것도 할 수 없습니다.그것이 하는 일은 매우 도움이 된다.

생성 및 이벤트 전송 및 상호 청취가 가능한 일련의 작은 개체를 제공합니다.예를 들어 코멘트를 나타내는 작은 오브젝트를 작성한 후 브라우저의 특정 위치에 코멘트를 표시하는 작은 commentView 오브젝트를 작성할 수 있습니다.

commentView에 코멘트를 듣고 코멘트가 변경되면 자신을 다시 그리도록 지시할 수 있습니다.페이지의 여러 위치에 동일한 설명이 표시되는 경우에도 이러한 모든 보기는 동일한 설명 모델을 듣고 동기화된 상태를 유지할 수 있습니다.

이러한 코드 구성 방법은 코드베이스가 매우 커져서 많은 상호작용이 있더라도 얽히지 않도록 도와줍니다.

모델

시작할 때 데이터를 글로벌 변수 또는 DOM에 데이터 속성으로 저장하는 것이 일반적입니다.둘 다 문제가 있어요.글로벌 변수는 서로 충돌할 수 있으며 일반적으로 잘못된 형식입니다.DOM 에 격납되는 데이터 속성은 문자열뿐입니다.다시 해석해야 합니다.어레이, 날짜, 객체 등의 데이터를 저장하고 정형화된 형태로 데이터를 해석하는 것은 어렵습니다.

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

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

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

모델이 업데이트되면 이벤트가 발생합니다.특정 오브젝트에 뷰가 연결되어 있을 수 있습니다.뷰는 모델 변경 이벤트를 수신하고 자체 렌더링을 수행합니다.

보기

백본은 DOM과 통신하는 View개체를 제공합니다.DOM을 조작하거나 DOM 이벤트를 수신하는 모든 함수가 여기에 들어갑니다.

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

각 뷰는 DOM의 특정 부분에 바인딩되어 있기 때문에 검색 폼만 재생하는 search Form View와 쇼핑 카트만 표시하는 shopping Cart View가 있을 수 있습니다.

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

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

이것에 의해, 문제를 명확하게 분리해, 코드를 깔끔하게 유지할 수 있습니다.

렌더링 함수

렌더링 기능은 원하는 방식으로 구현할 수 있습니다.여기에 jQuery를 넣으면 DOM을 수동으로 업데이트할 수 있습니다.

템플릿을 컴파일하여 사용할 수도 있습니다.템플릿은 삽입점이 있는 문자열입니다.이를 JSON 오브젝트와 함께 컴파일 함수에 전달하고 컴파일된 문자열을 DOM에 삽입할 수 있습니다.

컬렉션

모델 목록을 저장하는 컬렉션에도 액세스할 수 있으므로 ToDoCollection은 ToDo 모델 목록이 됩니다.컬렉션이 모델을 얻거나 잃거나 순서를 변경하거나 컬렉션의 모델이 업데이트되면 전체 컬렉션이 이벤트를 실행합니다.

보기는 컬렉션을 듣고 컬렉션이 업데이트될 때마다 자체 업데이트를 수행할 수 있습니다.

예를 들어 컬렉션에 정렬 및 필터링 방법을 추가하고 자동으로 정렬되도록 할 수 있습니다.

모든 것을 하나로 묶는 이벤트

애플리케이션 컴포넌트는 가능한 한 서로 분리되어 있습니다.이벤트를 사용하여 통신하므로 shoppingCartView는 쇼핑 카트 컬렉션을 청취하고 카트가 추가되면 자동으로 다시 그릴 수 있습니다.

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

물론 다른 오브젝트도 shoppingCart를 듣고 합계 갱신이나 로컬스토리지에 상태 저장 등의 작업을 수행할 수 있습니다.

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

이와 같이 오브젝트를 분리하여 이벤트를 사용하여 통신하는 것은 매듭에 얽히지 않고 새로운 컴포넌트와 동작을 추가하는 것이 용이합니다.새로운 컴포넌트는 시스템에 이미 있는 다른 오브젝트를 듣기만 하면 됩니다.

관습

Backbone용으로 작성된 코드는 일련의 규칙을 따릅니다.DOM 코드가 보기에 속합니다.컬렉션 코드가 컬렉션에 속합니다.비즈니스 로직은 모델에 포함됩니다.코드 베이스를 픽업하는 다른 개발자가 작업을 시작할 수 있습니다.

정리하면

백본은 코드에 구조를 제공하는 경량 라이브러리입니다.컴포넌트는 분리되고 이벤트를 통해 통신되므로 혼란에 빠지지 않습니다.새 개체를 만들고 기존 개체를 적절히 재생하는 것만으로 코드 베이스를 쉽게 확장할 수 있습니다.당신의 코드는 더 깨끗하고, 더 좋고, 더 유지보수가 용이해질 것입니다.

나의 작은 책

저는 백본을 너무 좋아해서 소개서를 썼어요.온라인으로 보실 수 있습니다.http://nicholasjohnson.com/backbone-book/

또, 여기(아카이브)에 게재되어 있는 짧은 온라인 코스로 분류했습니다.하루 정도면 코스를 마칠 수 있습니다.

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

Backbone.js의 개요

힌트(슬라이드에서):

• 브라우저에 레일이 있나요?아니요.
• JavaScript용 MVC 프레임워크?소르타.
• 크고 뚱뚱한 기계?네!

Backbone.js는 코드를 정리하는 데 도움이 되는 JavaScript 프레임워크입니다.이는 말 그대로 애플리케이션을 구축하는 백본입니다.위젯(jQuery UI 또는 Dojo 등)은 제공하지 않습니다.

서버상의 RESTful 엔드포인트와 통신하는 깨끗한 JavaScript 코드를 작성하기 위해 확장할 수 있는 쿨한 기본 클래스 세트를 제공합니다.

JQuery와 Mootools는 프로젝트의 툴박스에 불과합니다.백본은 JQuery 또는 Mootools를 사용하여 애플리케이션을 구축할 수 있는 프로젝트의 아키텍처 또는 백본과 같은 역할을 합니다.

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

Rails and Backbone에 대해 더 알고 싶다면 Thinkbot에는 꽤 좋은 책이 있습니다(무료는 아닙니다). https://workshops.thoughtbot.com/backbone-js-on-rails

MVC의 모든 "장점"이 제 일을 더 쉽게, 더 빠르게, 더 좋게 만든 적이 없다는 것을 인정해야 합니다.코드화 작업 전체를 보다 추상적이고 시간이 많이 소요될 뿐입니다.분리가 의미하는 바를 디버깅하려고 할 때 유지보수는 악몽입니다.MVC 모델로 Cairngorm을 사용한 FLEX 사이트를 업데이트하려고 시도한 사람이 몇 명인지 모르겠지만 업데이트에 30초 정도 걸리는 경우(단일 이벤트 검색/추적/디버깅)가 2시간 이상 걸릴 수 있습니다.MVC는 지금까지도, 지금도, 나에게 있어서, 여러분이 채울 수 있는 「장점」입니다.

Backbone에 쓴 빠른 시작 게시물입니다.JS. 도움이 됐으면 좋겠네요!http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

Backbone은 CoffeeScript도 쓴 Jeremy Ashkenas에 의해 만들어졌습니다.JavaScript를 많이 사용하는 어플리케이션으로서 현재 Backbone이라고 알려진 것은 어플리케이션을 일관된 코드 베이스로 구조화하는 것을 담당했습니다.백본의 유일한 종속 요소인 Underscore.js도 DocumentCloud 애플리케이션의 일부였습니다.

Backbone은 개발자가 클라이언트측 웹 어플리케이션의 데이터 모델을 기존의 서버측 어플리케이션 로직과 동일한 규율과 구조로 관리할 수 있도록 지원합니다.

Backbone.js를 사용하면 얻을 수 있는 기타 이점

1. Backbone을 프레임워크가 아닌 라이브러리로 참조
2. Javascript는 (MVVM) 모델이라는 구조화된 방식으로 구성되고 있습니다.
3. 대규모 사용자 커뮤니티

backbone.js는 JavaScript를 사용하는 Model-View-Controller(MVC; 모델 뷰 컨트롤러)이지만 Java 스크립트에 의한 MVC 패턴의 백본보다 뛰어난 Extjs(아카이브)입니다.

등뼈만 있으면 원하는 거의 모든 것을 할 수 있습니다.API에 대해 자세히 알아보고 커스터마이즈하는 대신 Backbonejs를 사용하여 단순하고 쉽게 구현할 수 있습니다.다시 말씀드리지만, 이 두 가지 중 어떤 것이 필요한지는 다른 하나의 컴포넌트인 라이브러리라고 말하기 어렵습니다.

또한 KVO를 사용한 컨트롤러 및 뷰를 사용한 라우팅도 추가합니다.이것으로 「AJaxy」애플리케이션을 개발할 수 있습니다.

가벼운 Sproutcore 또는 Capuccino 프레임워크로 볼 수 있습니다.

MVC 설계 패턴은 클라이언트 측에서 볼 수 있습니다.더 깨끗하고 명확한 암호는 말할 것도 없고 유지보수도 더 쉬워질 거야처음엔 좀 까다로울 수도 있지만 정말 좋은 도서관이야

벌써 좋은 답변이 많네요.backbone js는 코드를 정리하는 데 도움이 됩니다.모델/컬렉션을 변경하면 뷰 렌더링이 자동으로 처리되므로 개발 오버헤드가 줄어듭니다.

개발 시 최대한의 유연성을 제공하지만 개발자는 모델을 파괴하고 뷰를 적절히 삭제하도록 주의해야 합니다.그렇지 않으면 응용 프로그램에서 메모리 누수가 발생할 수 있습니다.

많은 AJAX 요구와 많은 사용자 상호작용을 수반하는 웹 어플리케이션은 수시로 변경해야 하며 실시간으로 실행되는 (Facebook이나 StackOverflow 등) Backbone.js 등의 MVC 프레임워크를 사용해야 합니다.좋은 코드를 만들 수 있는 최선의 방법이야

어플리케이션이 작을 경우 Backbone.js는 특히 처음 사용하는 사용자에게는 오버킬이 됩니다.

백본은 클라이언트 측 MVC 및 이를 통해 얻을 수 있는 모든 이점을 제공합니다.

언급URL : https://stackoverflow.com/questions/5418369/what-is-the-purpose-of-backbone-js