JavaScript의 Backbone.js 프레임워크 사용에 대한 몇 가지 제안_기본 지식

Backbone은 복잡한 Javascript 애플리케이션을 위한 모델, 컬렉션 및 뷰의 구조를 제공합니다. 모델은 키-값 데이터와 사용자 정의 이벤트를 바인딩하는 데 사용됩니다. 컬렉션에는 열거 가능한 기능의 풍부한 API가 장착되어 있으며, 뷰는 이벤트 처리 기능을 선언하고 RESTful JSON 인터페이스를 통해 애플리케이션에 연결할 수 있습니다.
JavaScript가 많이 포함된 웹 애플리케이션을 개발할 때 가장 먼저 해야 할 일 중 하나는 DOM 개체에 데이터를 추가하는 것을 중지하는 것입니다. HTML UI, Javascript 로직 및 데이터 간의 동기화 유지를 포함하여 복잡한 jQuery 선택기와 콜백 기능을 사용하여 복잡함 없이 Javascript 애플리케이션을 만듭니다. 그러나 클라이언트 애플리케이션의 경우 좋은 아키텍처에는 많은 이점이 있는 경우가 많습니다.
Backbone은 데이터를 모델로 표시하므로 모델을 생성하고 검증 및 삭제할 수 있으며 서버에 저장할 수도 있습니다. UI 변경으로 인해 모델 속성이 변경되면 모델은 "변경" 이벤트를 트리거합니다. 모델 데이터를 표시하는 모든 보기는 이 이벤트에 대한 알림을 받은 다음 보기가 다시 렌더링됩니다. HTML을 수동으로 업데이트하기 위해 특정 ID를 가진 요소에 대해 DOM을 검색할 필요가 없습니다. - 모델이 변경되면 뷰가 자동으로 변경됩니다.
backbone.js는 키-값 바인딩 및 사용자 정의 이벤트 처리를 위해 모델을 사용하고, 열거 기능을 위한 풍부한 API 세트를 제공하기 위해 컬렉션을 사용하고, 이벤트 처리 및 기존 애플리케이션과의 통합을 위해 뷰를 사용하여 RESTful JSON을 통해 상호 작용하는 웹 개발 프레임워크를 제공합니다. 인터페이스는 jquery와 밑줄을 기반으로 하는 js 프레임워크입니다.

백본은 본질적으로 독선적이지 않습니다. 문서에서 얻을 수 있는 가장 기본적인 아이디어는 backbone.js에서 제공하는 도구를 사용하여 원하는 작업을 수행한다는 것입니다.

사용 사례가 너무 많고 앱 작성을 시작하기가 매우 쉽기 때문에 매우 좋습니다. 이 접근 방식을 사용하면 시작할 때 실수를 최소화할 수 있습니다.

뭔가 잘못된 경우 이를 발견하고 수정할 방법을 찾아야 합니다.

다음 팁은 Backbone.js를 개발할 때 발생하는 오류를 방지하는 데 도움이 될 수 있습니다.

1. 조회수에는 데이터가 없습니다.

데이터는 뷰가 아닌 모델(model)에 속합니다. 다음에 데이터를 뷰(또는 더 나쁘게는 DOM)에 저장하는 경우 즉시 모델로 이동하세요.

모델이 없다면 만드는 것은 매우 간단합니다.

this.viewState = new Backbone.Model();

다른 일은 실제로 수행할 필요가 없습니다.

데이터의 변경 이벤트를 수신하고 온라인으로 서버와 동기화할 수도 있습니다.

2. DOM 이벤트만 모델 변경

버튼 클릭과 같은 DOM 이벤트가 트리거될 때 뷰 자체가 변경되지 않도록 하세요. 이 모델을 변경하세요.

상태를 변경하지 않고 DOM을 변경한다는 것은 상태가 여전히 DOM에 저장되어 있음을 의미합니다. 이 규칙은 일관성을 유지합니다.

"추가 로드" 가장자리를 클릭하면 보기를 확장하지 말고 모델만 변경하세요.

this.viewState.set('readMore', true);

그럼 뷰는 언제 바뀌나요? 좋은 질문입니다. 다음 규칙으로 대답하겠습니다.

3.DOM은 모델이 바뀔 때만 바뀐다

이벤트가 엄청나니 꼭 이용해보세요. 가장 간단한 방법은 각 변경 후에 이를 트리거하는 것입니다.

this.listenTo(this.stateModel, 'change', this.render);

더 나은 접근 방식은 필요할 때만 변경을 실행하는 것입니다.

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

이 견해는 항상 모델과 일관되게 유지됩니다. 이 보기는 명령 인터페이스의 작업이나 디버깅 정보에 대한 응답으로 모델이 어떻게 변경되더라도 항상 업데이트됩니다.

4. 바인딩된 것은 언바운드여야 합니다

'remove' 메소드를 사용하여 DOM에서 뷰를 제거할 때 바인딩된 모든 이벤트에서 뷰를 바인딩 해제해야 합니다.

'on'을 사용하여 바인딩하는 경우 'off'를 사용하여 바인딩을 해제하는 것은 사용자의 책임입니다. 바인딩을 해제하지 않으면 메모리 수집기가 메모리를 해제할 수 없으므로 애플리케이션 성능이 저하됩니다.

여기서 'listenTo'가 유래되었습니다. 뷰의 바인딩 및 바인딩 해제를 추적합니다. Backbone은 이것을 DOM에서 이동하기 전에 'stopListening'을 수행합니다.

// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
 
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

5. 연쇄 글쓰기를 계속하세요

렌더링 및 제거 메소드에서는 항상 'this'를 반환합니다. 이를 통해 메소드 체인을 작성할 수 있습니다.

view.render().$el.appendTo(otherElement);

이런 방법이 있으니 깨지 마세요.

6. 콜백보다 이벤트가 좋습니다

응답 이벤트를 기다리는 것이 다시 전화하는 것보다 낫습니다

백본 모델은 기본적으로 '동기화' 및 '오류' 이벤트를 트리거하므로 이러한 이벤트를 콜백 대신 사용할 수 있습니다. 다음 두 가지 시나리오를 고려하십시오.

model.fetch({
 success: handleSuccess,
 error: handleError
});
//这种更好：
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

모델을 언제 가져오는지는 중요하지 않습니다. handlerSucess/handleError가 호출됩니다.

7. 뷰에는 범위가 있습니다

뷰는 자신 이외의 DOM을 조작해서는 안 됩니다.

뷰는 'el' 또는 jquery 객체 '$el'과 같은 자체 DOM 요소를 참조합니다

즉, jQuery를 직접 사용해서는 안 된다는 뜻입니다.

$('.text').html('Thank you');

DOM 요소 선택을 자신의 도메인으로 제한하세요.

this.$('.text').html('Thank you');
 
// 这等价于
// this.$el.find('.text').html('Thank you');

如果你需要更新一个别的不同的视图，只要触发一个事件，让别的视图去做。你也可以使用Backbone的全局Pub/Sub系统。

例如，我们阻止页面滚动：

var BodyView = Backbone.View.extend({
 initialize: function() {
  this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
 },
 
 preventScroll: function(prevent) {
  // .prevent-scroll 有下面的CSS规则： overflow: hidden;
  this.$el.toggleClass('prevent-scroll', prevent);
 }
});
 
// 现在从任何其他地方调用:
Backbone.trigger('prevent-scroll', true);  // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允许 scrolling

还有一件事

只要读读backbone的源代码，你会学到更多。看一看backbone.js的源代码，然后看看这些神奇的事情是怎么实现的。这个库非常小，而且可读性很好，整个读完不会超过10分钟的。

这些小贴士帮助我们写干净的，更好的可读的代码。