Backbone.js 여정을 시작하세요

웹 개발과 달리 JavaScript는 실제로 프레임워크 형태로 구조를 제공한 적이 없습니다. 다행히 최근 몇 년 동안 이러한 상황이 바뀌기 시작했습니다.

오늘 저는 복잡하고 대화형이며 데이터 기반 애플리케이션을 만드는 프로세스를 훨씬 쉽게 만들어주는 귀엽고 작은 라이브러리인 Backbone.JS를 소개하고 싶습니다. 이는 프레젠테이션에서 데이터를 분리하는 깔끔한 방법을 제공합니다.

---

Backbone.JS 개요

CoffeeScript를 만든 JS 닌자 Jeremy Ashkenas가 만든 Backbone은 유지 관리가 쉬운 프런트엔드를 만들 수 있는 초경량 라이브러리입니다. 백엔드에 구애받지 않으며 이미 사용하고 있는 모든 최신 JavaScript 라이브러리와 잘 작동합니다.

백본은 무게가 4kb 미만인 응집력 있는 개체 모음으로, 코드에 구조를 제공하고 기본적으로 브라우저에서 적절한 MVC 응용 프로그램을 구축하는 데 도움이 됩니다. 공식 웹사이트에서는 그 목적을 다음과 같이 설명합니다:

Backbone은 키-값 바인딩 및 사용자 정의 이벤트가 포함된 모델, 풍부한 열거 기능 API가 포함된 컬렉션, 선언적 이벤트 처리가 포함된 보기를 제공하고 모든 RESTful JSON 인터페이스를 기존 애플리케이션에 연결하여 JavaScript 중심 애플리케이션을 위한 구조를 제공합니다.

직시하자면, 위의 내용은 구문 분석하고 이해하기가 약간 어렵습니다. 이제 Jeremy의 도움을 받아 전문 용어를 계속해서 분석해 보겠습니다.

키 값 바인딩 및 맞춤 이벤트

모델의 내용이나 상태가 변경되면 해당 모델을 구독하는 다른 객체에 알림이 전송되어 이에 따라 처리할 수 있습니다. 여기서 뷰는 모델이 뷰를 수동으로 처리하는 대신 모델의 변경 사항을 듣고 그에 따라 업데이트됩니다.

풍부한 열거형 함수 API

백본에는 데이터를 처리하고 작업하는 데 매우 유용한 많은 기능이 포함되어 있습니다. 다른 구현과 달리 JavaScript의 배열은 상당히 중립적이므로 데이터를 처리해야 할 때 실제로 방해가 될 수 있습니다.

선언적 이벤트 처리가 포함된 뷰

스파게티 바인딩 호출을 작성하는 시대는 끝났습니다. 특정 요소와 연결되어야 하는 콜백을 프로그래밍 방식으로 선언할 수 있습니다.

RESTful JSON 인터페이스

서버와 통신할 때 기본 방법은 표준 AJAX 호출을 사용하는 것이지만 필요한 대로 쉽게 전환할 수 있습니다. 웹소켓과 로컬 스토리지를 포함하여 가장 널리 사용되는 대부분의 어댑터를 포함하는 많은 어댑터가 생겨났습니다.

더 간단한 용어로 나누기:

백본은 프레젠테이션에서 데이터를 분리하는 깔끔한 방법을 제공합니다. 데이터를 처리하는 모델은 서버와의 동기화에만 관심이 있는 반면, 뷰의 주요 역할은 구독된 모델의 변경 사항을 수신하고 HTML을 렌더링하는 것입니다.

---

빠른 FAQ

지금은 조금 혼란스러우실 것 같으니 몇 가지 사항을 명확히 하겠습니다.

jQuery를 대체할까요?

아니요. 이들의 범위는 매우 상호 보완적이며 기능이 거의 중복되지 않습니다. Backbone은 모든 상위 수준 추상화를 처리하는 반면 jQuery(또는 유사한 라이브러리)는 DOM, 정규화된 이벤트 등을 처리합니다.

그 범위와 사용 사례는 매우 다르며, 하나를 알고 있다고 해서 다른 하나를 배우지 말아야 한다는 의미는 아닙니다. JavaScript 개발자라면 두 가지를 효과적으로 사용하는 방법을 알아야 합니다.

이것을 왜 사용해야 하나요?

프런트엔드 코드는 중첩된 콜백, DOM 조작, 프레젠테이션용 HTML 및 기타 설명할 수 없는 동작으로 인해 복잡하고 더러운 엉망이 되는 경우가 많습니다.

Backbone은 이러한 혼란을 관리하는 매우 깨끗하고 우아한 방법을 제공합니다.

어디에 사용해야 하나요?

Backbone은 무거운 프런트엔드 데이터 기반 애플리케이션을 만드는 데 적합합니다. Gmail 인터페이스, 새로운 Twitter 또는 지난 몇 년간의 기타 공개를 생각해 보십시오. 복잡한 애플리케이션을 더 쉽게 만들 수 있습니다.

이를 좀 더 주류 웹 페이지에 적용할 수도 있지만 실제로는 웹 애플리케이션용으로 맞춤 제작된 라이브러리입니다.

카푸치노나 새싹코어랑 비슷한가요?

예, 아니오.

예, 위에서 언급한 프레임워크와 마찬가지로 이것은 주로 웹 애플리케이션을 위한 복잡한 프런트 엔드를 만드는 데 사용되기 때문입니다.

Backbone의 차이점은 매우 간소화되었으며 추가 위젯이 제공되지 않는다는 것입니다.

백본은 4kb 미만으로 매우 가볍습니다.

Cappuccino에서는 Objective-J로 코딩해야 하지만 Sproutcore의 뷰는 JS에서 프로그래밍 방식으로 선언되어야 한다는 사실도 있습니다. 이러한 접근 방식 중 하나에는 아무런 문제가 없지만 Backbone을 사용하면 일반 JavaScript를 사용하여 일반적인 HTML 및 CSS로 작업을 완료할 수 있으므로 학습 곡선이 더 완만해집니다.

페이지의 다른 라이브러리를 계속 사용할 수 있겠죠?

물론이죠. 일반적인 DOM 액세스, AJAX 래핑 유형뿐만 아니라 나머지 템플릿 및 스크립트 로딩 유형도 마찬가지입니다. 이는 매우 느슨하게 결합되어 있어 Backbone과 함께 거의 모든 도구를 사용할 수 있음을 의미합니다.

세계 평화를 가져올 것인가?

아니요, 죄송합니다. 하지만 여기 당신을 격려할 것이 있습니다.

자, 이제 이 질문은 제쳐두고 시작하겠습니다!

---

백본의 백본에 대해 알아보세요

백본의 MVC는 원래 프레임워크에 컨트롤러가 없었기 때문에 모델, 뷰 및 컬렉션을 나타냈습니다. 그 이후로 상황이 바뀌었습니다.

Backbone의 핵심은 네 가지 주요 클래스로 구성됩니다.

• 모델
• 컬렉션
• 보기
• 컨트롤러

시간이 조금 촉박해서 오늘은 핵심 강좌만 살펴보겠습니다. 여기에서 설명하는 개념을 설명하기 위해 매우 간단한 앱을 만들겠습니다. 모든 내용을 하나의 문서에 담고 독자가 모든 내용을 구문 분석하기를 기대하는 것은 너무 많은 일이기 때문입니다.

앞으로 몇 주 동안 주의를 기울여주세요!

---

모델

모델은 MVC 구현에 따라 다른 의미를 가질 수 있습니다. Backbone에서 모델은 단일 엔터티, 즉 데이터베이스의 레코드를 나타냅니다. 그러나 여기에는 엄격하고 빠른 규칙이 없습니다. 백본 웹사이트에서:

모델은 대화형 데이터와 이를 둘러싼 대부분의 논리(변환, 검증, 계산된 속성 및 액세스 제어)를 포함하는 모든 JavaScript 애플리케이션의 핵심입니다.

모델은 단순히 데이터 세트의 임의 속성을 읽고 쓰는 방법을 제공합니다. 이를 염두에 두고 다음 한 줄의 코드를 완전히 사용할 수 있습니다.

으아아아

이를 토대로 만들어 보겠습니다.

으아아아

initialize 객체가 인스턴스화되면 트리거됩니다. 여기서는 몇 가지 어리석은 동작에 대해 주의를 환기시키고 있습니다. 아마도 데이터를 부트스트래핑하거나 애플리케이션에서 기타 관리 작업을 수행해야 할 것입니다. 데이터가 전달되지 않을 경우를 대비해 여러 가지 기본값도 정의했습니다.

속성을 읽고 쓰는 방법을 알아봅시다. 하지만 먼저 새 인스턴스를 만들어 보겠습니다.

으아아아

get/set mutator를 발견했다면 쿠키를 먹어보세요! 모델의 속성은 일반적인 object.attribute 형식을 통해 읽을 수 없습니다. 실수로 데이터를 변경할 가능성이 낮기 때문에 getter/setter를 구현해야 합니다.

이 시점에서 모든 변경 사항은 메모리에만 남아 있습니다. 서버와 통신하여 이러한 변경 사항을 영구적으로 적용해 보겠습니다.

으아아아

그렇습니다. 더 많은 것을 기대하고 있나요? 위의 코드 줄은 이제 서버에 요청을 보냅니다. 요청 유형은 지능적으로 변경된다는 점을 명심하세요. 이것은 새로운 객체이므로 POST가 사용됩니다. 그렇지 않으면 PUT을 사용하십시오.

백본 모델에는 기본적으로 더 많은 기능이 포함되어 있지만 확실히 시작해야 합니다. 자세한 내용을 보려면 설명서를 클릭하세요.

---

컬렉션

Backbone의 컬렉션은 본질적으로 모델 컬렉션일 뿐입니다. 이전 데이터베이스 비유와 마찬가지로 컬렉션은 쿼리의 결과이며 결과는 많은 레코드[모델]로 구성됩니다. 다음과 같이 컬렉션을 정의할 수 있습니다.

으아아아

가장 먼저 주목해야 할 점은 이것이 어떤 모델 컬렉션인지 정의한다는 것입니다. 이전 예를 확장하여 이 컬렉션을 게임 컬렉션으로 만들었습니다.

이제 원하는 대로 데이터를 계속 사용할 수 있습니다. 예를 들어 이 컬렉션을 확장하여 특정 게임만 반환하는 메서드를 추가해 보겠습니다.

으아아아

쉽죠? 2009년 이전에 출시된 게임인지만 확인하고, 그렇다면 게임을 반품해 드립니다.

아래와 같이 컬렉션의 내용을 직접 조작할 수도 있습니다.

으아아아

위의 코드 조각은 새 컬렉션을 인스턴스화한 다음 ID가 0인 모델을 검색합니다. 다음과 같이 at 메서드의 인덱스를 참조하여 특정 위치에 있는 요소를 찾을 수 있습니다. game.at(0)

마지막으로 다음과 같이 컬렉션을 동적으로 채울 수 있습니다.

으아아아

우리는 url 속성을 통해 Backbone이 어디에 있든 데이터를 가져오도록 합니다. 완료되면 새 개체를 만들고 fetch 메서드를 호출하면 서버에 대한 비동기 호출이 실행되고 컬렉션에 결과가 채워집니다.

여기서는 Backbone 컬렉션의 기본 사항을 다루어야 합니다. 앞서 언급했듯이 여기에는 Backbone이 Underscore 라이브러리의 많은 멋진 유틸리티에 대한 별칭을 지정하는 등 좋은 것들이 많이 있습니다. 공식 문서를 빠르게 읽으면 시작됩니다.

---

보기

Backbone의 뷰는 언뜻 보면 다소 혼란스러울 수 있습니다. MVC 순수주의자에게 뷰 자체보다는 컨트롤러와 유사합니다.

뷰는 기본적으로 두 가지 책임을 처리합니다.

• DOM 및 모델/컬렉션에서 발생하는 이벤트를 듣습니다.
• 사용자에게 애플리케이션의 상태와 데이터 모델을 보여줍니다.

아주 간단한 뷰를 만들어 보겠습니다.

으아아아

지금까지 이 튜토리얼을 따라왔다면 매우 간단합니다. tagName 속성을 통해 뷰를 래핑하는 데 사용해야 하는 HTML 요소를 지정하고 className을 통해 해당 ID를 지정합니다.

让我们继续进行渲染部分。

  render : function() {
    this.el.innerHTML = this.model.get('name');
	 
	 //Or the jQuery way
	 $(this.el).html(this.model.get('name'));
  }

el 指的是视图引用的 DOM 元素。我们只是通过元素的 innerHTML 属性访问游戏的名称。简而言之，div 元素现在包含我们游戏的名称。显然，如果您以前使用过该库，则 jQuery 方式会更简单。

对于更复杂的布局，在 JavaScript 中处理 HTML 不仅乏味而且鲁莽。在这些情况下，模板是可行的方法。

Backbone 附带了由 Underscore.JS 提供的最小模板解决方案，但我们非常欢迎您使用任何可用的优秀模板解决方案。

最后我们看一下视图是如何监听事件的。首先是 DOM 事件。

events: {
        'click .name': 'handleClick'
    },
	 
handleClick: function(){
		  alert('In the name of science... you monster');
		  
		  // Other actions as necessary
}

如果您以前处理过事件，那么应该很简单。我们基本上是通过事件对象定义和连接事件。正如您在上面看到的，第一部分指的是事件，下一部分指定触发元素，最后一部分指应触发的函数。

现在绑定到模型和集合。我将在这里介绍模型的绑定。

GameView= Backbone.View.extend({
initialize: function (args) {
        _.bindAll(this, 'changeName');
		  this.model.bind('change:name', this.changeName);
},
});

首先要注意的是我们如何将绑定代码放置在初始化函数中。当然，最好从一开始就这样做。

bindAll 是 Underscore 提供的一个实用程序，用于保存函数的 this 值。这特别有用，因为我们传递了一堆函数，并且指定为回调的函数已删除该值。

现在，只要模型的 name 属性发生更改，就会调用 changeName 函数。您还可以使用添加和删除动词来轮询更改。

侦听集合中的更改就像将处理程序绑定到回调时将模型替换为集合一样简单。

---

控制器

Backbone 中的控制器本质上允许您使用 hashbang 创建可添加书签的有状态应用程序。

var Hashbangs = Backbone.Controller.extend({
  routes: {
    "!/":                 "root",
    "!/games":        "games",
  },
  root: function() {
    // Prep the home page and render stuff
  },

  games: function() {
    // Re-render views to show a collection of books
  },
  });

这对于传统服务器端 MVC 框架中的路由非常熟悉。例如，!/games 将映射到 games 函数，而浏览器本身中的 URL 将是 domain/#!/games。

通过智能使用 hashbang，您可以创建大量基于 JS 且可添加书签的应用程序。

如果您担心破坏后退按钮，Backbone 也能满足您的需求。

// Init the controller like so
var ApplicationController = new Controller; 

Backbone.history.start();

通过上面的代码片段，Backbone 可以监控您的 hashbang，并结合您之前指定的路线，使您的应用程序可添加书签。

---

我从 Backbone 学到了什么

总的来说，以下是我从创建应用程序的 Backbone 方式中学到的一些经验教训：

• 前端确实需要 MVC。传统方法给我们留下的代码过于耦合、混乱且难以维护。
• 在 DOM 中存储数据和状态是一个坏主意。在创建需要使用相同数据更新应用的不同部分的应用后，这开始变得更有意义。
• 胖模型和瘦控制器是正确的选择。当业务逻辑由模型处理时，工作流程就会得到简化。
• 模板是绝对必要的。将 HTML 放入 JavaScript 中会给您带来不好的业力。

可以说 Backbone 引起了前端构建方式的范式转变，至少对我来说是这样。鉴于今天文章的范围非常广泛，我确信您有很多问题。点击下面的评论部分来插话。非常感谢您的阅读，并期待将来有更多的 Backbone 教程！

위 내용은 Backbone.js 여정을 시작하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!