콘텐츠
작은 자바 스크립트 도구를 빠르게 빌드하려는 경우 프레임 워크 사용을 고려하지 않을 것입니다. 새로운 프레임 워크를 설치하고 배우는 것보다 일부 jQuery 코드를 함께 해킹하는 것이 더 쉽습니다. 틀 렸습니다. Backbone.js는 여러분이 작성하던 일반 자바 스크립트처럼 보이는 초경량 접착제 프레임 워크입니다.
백엔드 코드를 작성하지 않고도 페이지를 클릭 할 수 있기 때문에 ZURB에서 많은 정적 프로토 타입을 수행합니다. 종종 우리는 칙칙한 회색 자리 표시 자 이미지를 삭제하거나, 최종 초안에 들어갈 내용을 시각화하는 데 도움이되는 샘플 이미지를 Flickr에서 검색하는 경우도 있습니다. 그것은 마법의 금요일까지입니다. 우리는 문제를 해결하기 위해 JavaScript를 작성하는 것이 멋질 것이라고 결정했습니다. Flickr에서 자리 표시 자 이미지 자체에서 직접 사진을 검색하고 선택할 수 있기를 원했습니다. 우리는 그것을 FlickrBomb이라고 부를 것입니다. 이것이 Backbone.js를 사용하여 어떻게 구축했는지에 대한 이야기입니다.
읽기 전에 FlickrBomb을 빠르게 살펴 보는 것이 좋습니다. "클릭은 천 단어의 가치가있는"거래 유형 중 하나입니다. 어서 기다릴게요.
요즘 블록에는 SproutCore, JavaScriptMVC, Spine, Sammy, Knockout과 같은 많은 JavaScript 프레임 워크가 있습니다. 그러나 우리는 몇 가지 다른 이유로이 특정 프로젝트에 Backbone.js를 좋아했습니다.
1. 가볍다 (실제로 무 지방 100 %)
- 무게는 약 4.6kb입니다.
- 코드에서 1,000 줄이 넘는 코드이므로 마음을 잃지 않고 내부까지 스택 추적을 추적하는 것은 그리 어렵지 않습니다.
2. JavaScript처럼 보입니다.
- JavaScript이기 때문에 그게 다입니다.
- 요즘 할머니도 알고있는 jQuery를 사용합니다.
3. 매우 간단한 지속성
- 기본적으로 REST를 통해 데이터를 백엔드에 유지하지만 단일 플러그인을 드롭하면 대신 로컬 저장소에 저장됩니다.
- 지속성 API를 추상화하기 때문에 로컬 스토리지 플러그인을 제거하여 REST 백엔드에 지속되도록 할 수 있습니다.
그럼 시작하겠습니다.
Backbone.js는 JavaScript 일 뿐이므로 페이지에 Underscore.js와 함께 포함하기 만하면됩니다. jQuery는 Backbone 자체에 대한 강한 의존성은 아니지만 우리는 이것을 사용할 것이므로 여기에 포함시킬 것입니다. 백엔드를 설정하는 번거 로움을 원하지 않으므로 로컬 저장소 플러그인도 연결합니다. 단순성을 위해 여기에 파일을 직접 연결했지만 항상 프로덕션에서 자체 자산을 호스팅해야합니다.
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src ="http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src ="https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>
이 문서의 다음 코드는 모두 애플리케이션에 한정되어 있으므로 app.js 파일에 포함하거나 원하는 경우 인라인으로 포함 할 수 있습니다. Backbone 뒤에 포함하는 것을 잊지 마십시오. Backbone을 사용하면 애플리케이션의 일부를 추상화하여 쉽게 재사용 할 수 있도록 모듈화하고 다른 사용자가 더 읽기 쉽게 만들 수 있습니다. 그 추상화를 가장 잘 설명하기 위해 FlickrBomb의 디자인을 모델부터 시작하여 뷰까지 아래에서 위로 설명하려고했습니다.
첫 번째 모델
해결해야 할 첫 번째 작업은 Flickr에서 사진을 가져 오는 것입니다. 백본에서 FlickrImage를 모델링하는 것은 매우 간단합니다. FlickrImage라는 새 모델을 만들고 다른 크기의 엄지 손가락을 얻는 데 도움이되는 몇 가지 메서드를 추가 할 것입니다.
var FlickrImage = Backbone.Model.extend ({fullsize_url : function () {return this.image_url ( 'medium');}, thumb_url : function () {return this.image_url ( 'square');}, image_url : function ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 on the long side case 'large ': size_code ='_b '; break; // 가장 긴 쪽의 1024 기본값 : size_code =' ';} return "http : // farm"+ this.get ('farm ') + ".static.flickr.com / "+ this.get ( 'server') +"/ "+ this.get ( 'id') +"_ "+ this.get ( 'secret') + size_code +".webp ";}})
Backbone의 모델은 다른 MVC 프레임 워크의 모델과 마찬가지로 지속될 수 있고 관련 기능이있는 개체입니다. 백본 모델의 마법적인 부분은 이벤트를 속성에 바인딩 할 수 있으므로 속성이 변경 될 때이를 반영하도록 뷰를 업데이트 할 수 있다는 것입니다. 하지만 우리는 조금 앞서 가고 있습니다.
Flickr에서 사진을 가져 오면 모든 크기의 URL을 만들 수있는 충분한 정보를 얻을 수 있습니다. 그러나 해당 어셈블리는 우리에게 맡겨져 있으므로 크기 매개 변수를 사용하고 공개 링크를 반환하는 .image_url () 함수를 구현했습니다. 이것은 백본 모델이기 때문에 this.get ()을 사용하여 모델의 속성에 액세스 할 수 있습니다. 따라서이 모델을 사용하면 코드의 다른 곳에서 다음을 수행하여 Flickr 이미지의 URL을 가져올 수 있습니다.
flickrImage.image_url (’large’)
꽤 간결 하죠? 이 모델은 우리의 응용 프로그램에 따라 다르기 때문에 전체 크기 및 썸 이미지 크기에 대한 몇 가지 래퍼 함수를 추가 할 것입니다.
이미지 모음
FlickrBomb은 단일 이미지가 아닌 이미지 모음을 처리하며 Backbone은이를 모델링하는 편리한 방법을 제공합니다. 적절하게 이름이 지정된 Collection은 단일 자리 표시 자에 대해 Flickr 이미지를 그룹화하는 데 사용할 것입니다.
var FlickrImages = Backbone.Collection.extend ({모델 : FlickrImage, 키 : flickrbombAPIkey, 페이지 : 1, 가져 오기 : 함수 (키워드, 성공) {var self = this; success = success || $ .noop; this.keywords = 키워드 || this.keywords; $ .ajax ({url : 'http://api.flickr.com/services/rest/', 데이터 : {api_key : self.key, 형식 : 'json', 메서드 : 'flickr. photos.search ', 태그 : this.keywords, 페이지 당 : 9, 페이지 : this.page, 라이센스 : flickrbombLicenseTypes}, dataType :'jsonp ', jsonp :'jsoncallback ', 성공 : function (response) {self.add (response .photos.photo); success ();}});}, nextPage : function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage : function (callback) {if (this.page> 1) {this.page-= 1;} this.remove (this.models); this.fetch (null, callback);}});
여기서 주목할 몇 가지 사항이 있습니다. 먼저 모델 속성은 수집하는 모델의 유형을 수집에 알려줍니다. 또한 나중에 사용하기 위해 초기화 한 몇 가지 속성이 있습니다. key는 Flickr API 키입니다. flickrbombAPIkey를 자신의 Flickr API 키 문자열로 바꾸고 싶을 것입니다. Flickr API 키를 얻는 것은 무료이며 간단합니다. 다음 링크를 따르십시오. www.flickr.com/services/api/misc.api_keys.html. 페이지 속성은 현재있는 Flickr 사진의 현재 페이지입니다.
여기서 가장 큰 방법은 .fetch ()로, Flickr API에서 사진을 가져 오는 세부 정보를 추상화합니다. 교차 도메인 요청 문제를 방지하기 위해 Flickr API와 jQuery가 모두 지원하는 JSONP를 사용하고 있습니다. API에 전달하는 다른 매개 변수는 설명이 필요하지 않습니다. 특히 흥미로운 것은 여기서 호출되는 백본 함수입니다. 성공 콜백에서 우리는 .add (), 모델 속성의 배열을 취하고, 그 속성으로부터 모델 인스턴스를 생성 한 다음 컬렉션에 추가하는 함수를 사용하고 있습니다.
.nextPage () 및 .prevPage () 함수는 먼저 표시하려는 페이지를 변경합니다.
컬렉션 함수 .remove ()를 사용하여 기존 모델을
수집 한 다음 fetch를 호출하여 현재 페이지의 사진을 가져옵니다.
변경됨).
FlickrBombImage
백업 과정에서 FlickrImages 컬렉션과 현재 선택된 FlickrImage로 구성되는 자리 표시 자 이미지를 나타내는 모델이 하나 더 필요합니다. 이 모델을 FlickrBombImage라고 부를 것입니다.
var localStorage = (supports_local_storage ())? new Store ( "flickrBombImages") : null; var FlickrBombImage = Backbone.Model.extend ({localStorage : localStorage, initialize : function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ( 'keywords'), this.loadFirstImage); this.set (id : this.get ( "id")); this.bind ( 'change : src', this.changeSrc) ;}, changeSrc : function () {this.save ();}, loadFirstImage : function () {if (this.get ( 'src') === undefined) {this.set ({src : this.flickrImages. first (). image_url ()});}}});
이 모델은 페이지로드 사이에 현재 선택된 이미지를 추적하는 역할을하므로 사용할 localstorage 저장소를 알아야합니다.첫 번째 줄은 localstorage에 대한 지원이 있는지 확인한 다음 선택한 이미지를 유지하는 데 사용할 저장소를 만듭니다.
Backbone을 사용하면 모델의 인스턴스가 생성 될 때 호출되는 .initialize () 함수를 정의 할 수 있습니다. FlickrBombImage에서이 함수를 사용하여 FlickrImages 컬렉션의 새 인스턴스를 만들고이 이미지에 사용할 키워드를 전달한 다음 Flickr에서 이미지를 가져옵니다.
.loadFirstImage () 함수는 Flickr에서 이미지가로드되었을 때 실행할 콜백으로 전달되었습니다. 짐작할 수 있듯이이 함수는 현재 이미지를 Flickr 컬렉션의 첫 번째 이미지로 설정합니다. 현재 이미지가 이미 설정되어 있으면이 작업을 수행하지 않습니다.
또한이 모델의 src 속성이 변경 될 때 Backbone의 속성 콜백을 사용하여 .changeSrc () 함수를 실행합니다. 이 콜백이하는 일은 .save ()를 호출하는 것입니다. 백본 모델 함수는 모델의 속성을 구현 된 모든 스토어 레이어 (여기서는 localstore)에 유지합니다. 이렇게하면 선택한 이미지가 변경 될 때마다 즉시 유지됩니다.
뷰 레이어
이제 모든 백엔드 (글쎄, 프론트 엔드 백엔드) 코드를 작성 했으므로 뷰를 모을 수 있습니다. Backbone의보기는 다른 기존 MVC 프레임 워크의보기와 약간 다릅니다. 보기는 일반적으로 프리젠 테이션에만 관여하지만 백본보기는 동작에 대해서도 책임이 있습니다. 즉, 뷰는 사물의 모양뿐만 아니라 상호 작용할 때 수행해야하는 작업도 정의합니다.
뷰는 일반적으로 (항상 그런 것은 아님) 일부 데이터에 연결되어 있으며 해당 데이터에서 프레젠테이션 마크 업을 생성하기 위해 세 단계를 거칩니다.
1. View 개체가 초기화되고 빈 요소가 생성됩니다.
2. render 함수가 호출되어 이전 단계에서 만든 요소에 삽입하여 뷰에 대한 마크 업을 생성합니다.
3. 요소가 DOM에 첨부됩니다.
이것은 일부 마크 업을 생성하는 데 많은 작업처럼 보일 수 있으며 아직 뷰의 동작 부분까지 다루지는 않았지만 중요하며 그 이유가 여기에 있습니다. DOM에있는 요소를 수정할 때마다 브라우저 리플 로우라는 것을 트리거합니다. 리플 로우는 페이지의 모든 항목이 배치되는 방식을 다시 계산하는 브라우저입니다. 브라우저 리플 로우는 매우 짧은 간격으로 실행되는 드래그 또는 크기 조정 이벤트 내에서 호출되는 경우 성능에 좋지 않을 수 있지만 더 나쁘게 보입니다. 복잡한 페이지 조작을 통해 실제로 페이지에 추가되는 요소와 영향을받는 요소의 위치가 변경되는 것을 볼 수 있습니다. Backbone의 초기화, 렌더링 및 연결 패턴에 따라 단일 리플 로우를 보장하고 요소 조작의 복잡성에 관계없이 페이지 변경 사항이 지각 적으로 즉각적으로 이루어집니다.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName : "div", className : "flickrbombContainer", lock : false, 템플릿 : _.template ( 'div id = "% = this.image.id.replace (" ", "") %> "... / div> '), initialize : function (options) {_.bindAll (this,'addImage ','updateSrc ','setDimentions ','updateDimentions '); var keyword = options. img.attr ( 'src') .replace ( 'flickr : //', ''); this. $ el = $ (this.el); this.image = new FlickrBombImage ({keywords : 키워드, id : options. img.attr ( 'id')}); this.image.flickrImages.bind ( 'add', this.addImage); this.image.bind ( 'change : src', this.updateSrc);}, 이벤트 : { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render : function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ...});
이보기의 기능은 간결함을 위해 생략되었으며 전체 소스 코드는 GitHub에서 사용할 수 있습니다. github.com/zurb/flickrbomb
뷰 상단에는 몇 가지 백본 특정 속성이 있습니다. tagName 및 className은이 View의 요소에 적용될 태그와 클래스를 정의하는 데 사용됩니다. 뷰 생성의 1 단계는 객체를 생성하는 것이며, 생성은 Backbone에서 처리하므로 요소와 클래스를 지정해야합니다. Backbone에는 합리적인 기본값이 있습니다. 이러한 속성을 생략하면 div가 기본적으로 사용되며 지정하지 않는 한 클래스가 적용되지 않습니다.
템플릿 속성은 규칙이지만 필수는 아닙니다. 여기서는이 뷰에 대한 마크 업을 생성하는 데 사용할 JavaScript 템플릿 함수를 지정하는 데 사용합니다. Underscore.js에 포함 된 _.template () 함수를 사용하지만 선호하는 템플릿 엔진을 사용할 수 있습니다.
.initialize () 함수에서 이미지 태그에서 키워드 문자열을 추출한 다음 해당 키워드를 사용하여 FlickrBombImage 모델을 만듭니다. 또한 FlickrImage가 FlickrImages 컬렉션에 추가 될 때 실행할 .addImage () 함수를 바인딩하고 있습니다. 이 함수는 새로 추가 된 FlickrImage를 이미지 선택기 플라이 아웃에 추가합니다. 마지막으로 가장 중요한 줄은 현재 선택된 FlickrImage가 변경 될 때 실행되도록 .updateSrc () 함수를 바인딩하는 것입니다. 모델에서 현재 이미지가 변경되면이 함수가 실행되고 이미지 요소의 src 속성이 업데이트되고 사용자가 지정한 이미지 크기에 맞게 CSS 크기가 조정되고 이미지가 잘립니다.
events : { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
.initialize () 다음에는 뷰의 동작 부분이 있습니다. Backbone은 이벤트 객체를 사용하여 이벤트를 바인딩하는 편리한 방법을 제공합니다. 이벤트 객체는 jQuery .delegate () 메서드를 사용하여 View 요소에 대한 실제 바인딩을 수행하므로 뷰 내부의 요소에 대해 수행하는 작업에 관계없이 바인딩 된 모든 이벤트가 계속 작동합니다. 이벤트를 전체 문서에 바인딩하는 대신 모든 요소의 범위 내에서 바인딩 할 수 있다는 점을 제외하면 jQuery .live ()와 동일하게 작동합니다. 이벤트 개체의 각 항목 키는 이벤트와 선택기로 구성되며 값은 해당 이벤트에 바인딩되어야하는 함수를 나타냅니다. .delegate ()는 submit과 같은 일부 이벤트에서 작동하지 않습니다. 지원되는 이벤트의 전체 목록은 jQuery .live () 문서를 참조하십시오.
렌더링 : function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); 반환;}
마지막으로, 마크 업을 생성하고 View 마크 업이 View 요소에 추가 될 때까지 수행 할 수없는 추가 작업을 수행하는 .render () 함수가 있습니다. 템플릿을 렌더링 한 후 FlickrBombImage에서 .fetch ()를 호출해야합니다. .fetch ()는 지속성 계층에서 모델의 최신 사본을 가져 오는 백본 함수입니다. 이전에이 모델을 저장했다면 .fetch ()는 지금 해당 데이터를 검색합니다. 이미지를 가져온 후 정확한 위치를 지정하기 위해 resize를 호출해야합니다.
홈 스트레치
모든 조각이 제자리에 있으면 이제 페이지에서 자리 표시 자 이미지를 찾아 렌더링 된 FlickrBombImage 뷰로 바꾸면됩니다.
$ ( "img [src ^ = 'flickr : //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img : img}); img.replaceWith (flickrBombImageView. render (). el);});
이 작은 캡처는 페이지 맨 아래 또는 문서 준비 콜백에서 실행되어야 대체 할 자리 표시 자 이미지를 찾을 수 있습니다. 이미지 태그의 src 속성에 flickr : // [KEYWORD]를 지정하는 규칙을 사용하여 Flickr의 이미지로 채워 져야 함을 나타냅니다. src 속성과 일치하는 이미지 요소를 찾고 새 FlickrBombImageView를 만든 다음 이미지를 우리의 것으로 대체합니다. 원본 이미지의 복사본을 가져와 FlickrBombView에 전달하여 요소에 지정되었을 수있는 몇 가지 추가 구성 옵션을 가져올 수 있습니다.
모든 노력의 최종 결과는 라이브러리를 사용하는 사람들을위한 매우 간단한 API입니다. flickr : // 규칙을 사용하여 이미지 태그를 정의하고 페이지 하단에 FlickrBomb 코드를 놓으면 Flickr에서 자리 표시 자 이미지를 얻었습니다.
큰 ol 웹 앱에서도 잘 작동합니다.
클라이언트 측 콘텐츠 생성에 대한 걱정없이 작성된 Notable이라는 큰 웹 앱이 있습니다. 콘텐츠 클라이언트 측을 생성하여 앱의 섹션을 과금하게 만들고 싶을 때 Backbone을 선택했습니다. 그 이유는 동일했습니다. 우리는 코드를 체계적으로 유지하는 데 도움이되는 경량 프레임 워크를 원했지만 전체 애플리케이션을 다시 생각하도록 강요하지는 않았습니다.
우리는 올해 초 큰 성공을 거두면서 변경 사항을 시작했으며 그 이후로 Backbones의 찬사를 불러 왔습니다.
추가 자료
백본에는 제가이 기사에서 다룬 것보다 훨씬 더 많은 것이 있습니다. 스타터 용 MVC (모델 뷰 컨트롤러)의 C (컨트롤러) 부분은 실제로 최신 버전에서는 R (라우터)입니다. 그리고 모든 내용은 Backbone 문서에서 다룹니다. 토요일 아침에는 다음과 같이 읽습니다.
documentcloud.github.com/backbone/
보다 전통적인 튜토리얼이 필요하다면 Backbone으로 작성된이 할일 애플리케이션의 매우 잘 문서화 된 코드를 확인하십시오.
documentcloud.github.com/backbone/docs/todos.html
