<..> backbone.js
<.> backbone.js는 모델 , , > 컬렉션을 제공하여 단일 페이지 응용 프로그램을 구축하는 프레임 워크입니다. 커스텀 이벤트 . 그 구조는 사용자 인터페이스를 비즈니스 로직과 분리하는 데 도움이됩니다. 이 기사에서는 이러한 요소 중 일부에 대해서만 소개하겠습니다. 그러나보다 심층적 인 가이드를 원한다면“backbone.js 기본 사항 : 모델, 뷰, 컬렉션 및 템플릿”을 읽어 보는 것이 좋습니다. <.>
<span>var MyModel = Backbone.<span>Model</span>.extend({
</span> <span>initialize: function () {
</span> <span>console.log('model initialized');
</span> <span>}
</span><span>})</span>
socket.io가있는 <.> backbone.js 이 섹션에서는 backbone.js를 사용하여 socket.io를 사용하는 방법의 예를 보여줄 것입니다.
Codepen에서 sitepoint (@sitepoint)의 펜 Qydxwo를 참조하십시오 backbone.js가있는<span>var express = require('express'), </span> app <span>= express(), </span> http <span>= require('http').<span>Server</span>(app), </span> io <span>= require('socket.io')(http); </span> http<span>.listen(process.env.PORT || 5000, function(){ </span> <span>console.log('listening on *:5000'); </span><span>});</span>로그인 후 복사로그인 후 복사pubsub pubsub는 비동기 메시징 패러다임입니다. 커플 링을 피할 수있는 기능을 제공합니다. 커플 링은 코드 그룹이 서로에 크게 의존 할 때이므로 코드 조각이 변경되면이 코드를 사용하는 모든 것을 업데이트해야합니다. pubsub는 동기화 디커플링이있는 패턴입니다. 라디오 스테이션이 방송되는 방식과 같은 이벤트 시스템을 사용합니다. 라디오 방송국 브로드 캐스트 () 및 누구나들을 수 있습니다 ( 구독 ). 또한 다른 객체와 직접 대화하기보다는 공유 라디오 방송국에 메시지를 게시 할 수 있습니다. 이 이벤트 시스템을 사용하면 가입자가 필요로하는 값이 포함 된 인수를 전달할 수있는 이벤트를 정의 할 수 있습니다. Backbone.js는이 이벤트 시스템 구현을 매우 간단하게 만듭니다. 이런 식으로 백본을 섞어야합니다. <span>var MyModel = Backbone.<span>Model</span>.extend({ </span> <span>initialize: function () { </span> <span>console.log('model initialized'); </span> <span>} </span><span>})</span>로그인 후 복사로그인 후 복사이 시점에서 표준 트리거와 메소드를 사용하여 메시지를 게시하고 구독 할 수 있습니다.
그렇게하면 이제 백본보기에서 socket.io를 제거 할 수 있습니다. 목표는 모듈 간의 종속성을 피하는 것입니다. 각 모듈은 이벤트 (게시자)를 발사하는 라디오 방송국과 같은 채널을 가질 수 있으며 다른 모듈은 알림 (가입자)을 받기를 원하는 이벤트를들을 수 있습니다. 획득 된 결과는 다음과 같습니다 Codepen에서 sitepoint (@sitepoint)의 펜 gpgnpz를 참조하십시오 그래프 시각화 예 우리의 그래프 시각화는 클라이언트 측에서 두 개의 모듈을 사용합니다. 하나는 지시 된 그래프를 그리거나 데이터를 저장하고 가져 오기 위해 다른 모듈을 사용합니다. 그래프 드로잉 모듈은 Force Editor라는 도구를 사용합니다. 코드에서 ForceView를 부르는이 모듈을 통해 그래프 노드를 2 차원 공간에 간단하고 직관적 인 방식으로 배치 할 수 있습니다. 우리가 DBAAS라고 부르는 스토리지 모듈은 Socket.io를 사용하여 웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게합니다. 그들 중 어느 것도 forceview var MyView = Backbone.View.extend({ el: 'div#my-view-container', initialize: function (options) { this.model = new MyModel() console.log('view initialized') } }) 및 dbaas 는 다른 사람에 대해 알지 못합니다. 그들의 행동은 모두 고립되어 있습니다.
<span>var express = require('express'), </span> app <span>= express(), </span> http <span>= require('http').<span>Server</span>(app), </span> io <span>= require('socket.io')(http); </span> http<span>.listen(process.env.PORT || 5000, function(){ </span> <span>console.log('listening on *:5000'); </span><span>});</span>로그인 후 복사로그인 후 복사모두 의존성을 피하기 위해 두 모듈 모두 게시/구독
스타일로 설정됩니다. 라디오 스테이션 브로드 캐스트 (게시) 및 라디오 수신기 청취 (구독)와 같은 라디오 작업과 같은 방식으로 이벤트 시스템을 사용합니다. 각 모듈은 다른 사람과 직접 대화하기보다는 자신의 채널에서 이벤트를 해고하는 공유 된 " Radio Station "에 메시지를 게시하고 다른 모듈은 이벤트에 대한 다른 채널을들을 수 있습니다.여기서 유일한 의존성은 매우 작은 API가있는 각 라디오 채널에 있습니다. 중요한 것은 채널이 트리거되고 시스템이 이벤트에 올바르게 반응하는지 확인하는 것입니다. 그들이 이벤트를 트리거하고 올바른 것을 주면 시스템은 전체적으로 작동합니다. 아래 이미지를 살펴 보려면 각 모듈에서 어떤 이벤트가 방출되는지 확인하십시오. .
백본보기는 ForceView와 DBAA 사이의 중재자 역할을합니다. 이를 통해 모든 것을 사용 가능한 작은 조각으로 분해 한 다음 작은 조각을 아름답게 함께 작동시킬 수 있습니다. 이런 식으로 코드는 이해하기가 더 간단 해지고 쉽게 유지 관리 할 수 있습니다.
예를 들어, 특정 취향에 맞게 약간의 사용자 정의하려면 모듈을 쉽게 집어 들고 원하는 방식으로 변경할 수 있습니다. 다른 그래프 라이브러리의 그래프 시각화를 대체 할 수 있습니다 (예 : JQPlot, Dracula, Arborjs, Sigmajs, Raphaeljs 등. 또는 FireBase, AppBase, Neo4J, Titandb 등과 같은 실시간 데이터베이스를 사용할 수 있습니다. 좋은 소식은 다른 라이브러리로 마이그레이션하려면 단일 파일을 변경하면됩니다. 아래 이미지는 백본보기 와이 두 모듈 사이의 상호 작용을 보여줍니다.우리는 데이터베이스를 사용하지 않습니다. 데이터는 메모리에 저장되고 있습니다. 코드를 분리 한 방식은 모든 종류의 데이터베이스에 연결할 수 있습니다.
그래프 시각화 예제를 로컬로 실행합니다 전체 코드는 github에서 사용할 수 있습니다. 저장소를 복제하거나 코드를 다운로드 할 수 있습니다 그런 다음 모든 종속성을 설치하려면 콘솔에서 NPM 설치를 실행합니다. 다음, Node Server.js를 실행하여 응용 프로그램을 시작하십시오 http : // localhost : 5000으로 이동하여 브라우저를 사용하여 실행중인 응용 프로그램을 확인하십시오. 응용 프로그램을 실제로보고 싶다면 여기에서 데모를 찾을 수 있습니다. 결론
완성! 방금 Backbone의 내장 기능을 사용하여 PubSub 패턴을 구현했습니다. 또한이 패턴을 사용하여 사용자가 데이터를 아름답게 동기화 한 그래프 데이터를 실시간으로 표현하고 저장했습니다. 보시다시피, 우리는 디퍼링 된 코드 조각이 함께 작동하는 것을 볼 수있는 훌륭한 예에서 몇 가지 흥미로운 개념을 혼합했습니다.
이제 다음 단계는이를 사용자 정의하고 메모리 대신 데이터베이스에 데이터를 저장하는 것입니다. 그러나 우리는 아마 다가오는 게시물 중 하나에서 사용자 정의에 대해 논의 할 것입니다.
아래 섹션에서 귀하의 의견을 자유롭게 공유하십시오. backbone.js 및 socket.io가있는 웹 앱 구축에 대한 자주 묻는 질문 (FAQ) 웹 앱을 구축 할 때 Backbone.js의 역할은 무엇입니까? backbone.js는 키 값 바인딩 및 사용자 정의 이벤트, 모음으로 모델을 공급하여 웹 애플리케이션에 구조를 제공하는 가벼운 JavaScript 라이브러리입니다. 열거 가능한 기능의 풍부한 API를 사용하여 선언적 이벤트 처리가있는 뷰를 사용하여 RESTFUL JSON 인터페이스를 통해 기존 API에 모든 것을 연결합니다. 코드를 구성하는 데 도움이되고 관리가 더 쉬워집니다. 복잡한 사용자 인터페이스 및 다량의 데이터를 처리 할 때 특히 유용합니다.
Socket.io는 웹 앱의 기능을 어떻게 향상 시키는가? socket.io는 브라우저와 서버 간의 실시간, 양방향 및 이벤트 기반 통신을 가능하게하는 자바 스크립트 라이브러리입니다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js의 서버 측 라이브러리의 두 부분으로 구성됩니다. 두 구성 요소 모두 동일한 API가 있습니다. Socket.io는 채팅 애플리케이션, 실시간 분석, 이진 스트리밍, 인스턴트 메시징 및 문서 공동 작업과 같은 실시간 응용 프로그램을 만드는 데 매우 유용합니다.
Backbone.js에서 이벤트를 처리하는 방법 <.> backbone.js는 사용자 정의 이벤트를 모델에 바인딩 할 수있는 이벤트 처리 시스템을 제공합니다. 'ON'방법을 사용하여 이벤트를 모델에 바인딩하고 '트리거'메소드를 바인딩하여 이벤트를 트리거 할 수 있습니다. 'OFF'방법을 사용하여 이벤트를 제거 할 수도 있습니다. 이 이벤트 시스템은 애플리케이션의 변경을보다 쉽게 관리하고 사용자 인터페이스를 데이터와 동기화 할 수 있도록합니다.express.js?
socket.io와 함께 socket.io를 어떻게 사용할 수 있습니까? Node.js의 인기있는 웹 애플리케이션 프레임 워크 인 Express.js와 쉽게 통합 할 수 있습니다. Express.js 응용 프로그램을 작성한 다음 Socket.io 서버를 첨부 할 수 있습니다. 그런 다음 socket.io를 사용하여 클라이언트와 서버 간의 실시간 통신을 처리 할 수 있습니다. 이 Express.js 및 Socket.io의 조합은 매우 강력하며 복잡한 웹 애플리케이션을 만드는 데 사용될 수 있습니다.편안한 API와 함께 Backbone.js를 어떻게 사용할 수 있습니까?
backbone.js Restful API와 함께 작동하도록 설계되었습니다. '페치'방법을 사용하여 서버에서 데이터를 검색하고 '저장'메소드를 검색하여 데이터를 서버에 저장할 수 있습니다. '파괴'방법을 사용하여 서버에서 데이터를 삭제할 수도 있습니다. backbone.js는 서버로 보낼 때 모델 데이터를 JSON 형식으로 자동 변환하고 서버에서 수신 할 때 모델 데이터로 다시 변환합니다.Socket.io?로 바이너리 데이터를 처리하는 방법 >
socket.io는 블롭 및 어레이 버퍼와 같은 이진 데이터를 지원합니다. 클라이언트에서 서버 또는 서버에서 클라이언트로 이진 데이터를 보낼 수 있습니다. socket.io는 이진 데이터를 인코딩하고 디코딩하는 것을 자동으로 처리합니다.backbone.js에서 오류를 처리하는 방법?
backbone.js는 사용할 수있는 '오류'이벤트를 제공합니다. 오류를 처리합니다. 'ON'메소드를 사용하여 오류 처리기를 모델에 바인딩 한 다음 '트리거'메소드를 사용하여 오류 이벤트를 트리거 할 수 있습니다. 오류 핸들러는 모델과 오류로 인수로 호출됩니다.
socket.io에서 연결 끊김을 처리하려면 어떻게해야합니까?
socket.io는 자동으로 연결이 끊기 및 재 연결을 처리합니다. 클라이언트가 연결이 끊어지면 서버에서 '분리'이벤트가 방출됩니다. 클라이언트가 다시 연결되면 클라이언트에서 '다시 연결'이벤트가 방출됩니다. 이 이벤트를 사용하여 응용 프로그램의 연결 끊기 및 재 연결을 처리 할 수 있습니다.
backbone.js 모델과보기를 어떻게 확장 할 수 있습니까? backbone.js를 사용하면 모델과보기를 확장하여 고유 한 사용자 정의 모델과 뷰를 만들 수 있습니다. '확장'방법을 사용하여 모델 또는 뷰의 서브 클래스를 만들 수 있습니다. 그런 다음 서브 클래스에 자신의 방법과 속성을 추가 할 수 있습니다. Socket.io 애플리케이션을 어떻게 스케일링 할 수 있습니까?
socket.io는 여러 노드를 사용하여 수평 스케일링을 지원하고로드 밸런싱을 지원합니다. . 'socket.io-Redis'어댑터를 사용하여 여러 socket.io 노드 간의 통신을 가능하게 할 수 있습니다. 또한 '스티커 세션'모듈을 사용하여 클라이언트의 모든 요청이 항상 동일한 노드로 전송 될 수 있습니다.
위 내용은 backbone.js 및 socket.io가있는 웹 앱을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
