백본은 …

… 코드를 구성하는 데 사용할 수있는 매우 작은 구성 요소 라이브러리입니다. 단일 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을 . 하루 정도면 코스를 완료 할 수 있습니다.

---

답변