원본 코드 학 전단 의 Backbone 1 을 통 해

원본 코드 학 전단 의 Backbone 을 통 해 -- 강 소 
 
군말:
기연 아래 11 년 4 월 에 디자인 전환 전문직 을 전단 으로 삼 아 반년 의 모색, 현혹 과 지식 비축 을 거 쳐 11 년 12 월 부터 학습 구조의 소스 코드 를 통 해 js 를 배우 기 시작 했다.
처음에 배 운 것 은 ext 3.4.0 이 고 회사 전단 팀 은 주로 ext 에 대해 2 차 패 키 징 구성 요소 개발 을 실시 했다.처음에는 출발점 이 너무 낮 아 걷 기 가 어 려 웠 는데, 그 중 extbase 의 코드 는 네 번 을 써 야 그 역할 에 대해 초보적인 이 해 를 가지 게 되 었 다.
Observable 부분도 네 다섯 번 두 드 려 서 야 관찰자 모드 를 알 게 되 었 습 니 다........................................................................
지금까지 주로 ext / jquery / backbone / goog / bootStrap / seaJs 프레임 의 소스 코드 를 보 았 습 니 다.
지금 여러분 과 이런 학습 경험 을 공유 하고 여러분 의 비판 과 지적 을 환영 하 며 함께 향상 되 기 를 바 랍 니 다.
 
이에 비해 backbone 의 소스 코드 가 가장 적 고 이 걸 로 물 을 시험 해 보고 효과 가 좋 으 면 다른 프레임 워 크 를 계속 분석 합 니 다.
저 는 소스 코드 를 통 해 js 를 배 웠 습 니 다. 여 기 는 주로 프레임 워 크 를 어떻게 사용 하 는 지 를 말 하지 않 고 안의 코드 실현 과 우리 가 이런 큰 소의 선진 경험 을 어떻게 참고 하 는 지 분석 합 니 다. 물론 소스 코드 는 철저하게 이해 되 고 사용 할 때 자 연 스 럽 게 익숙 합 니 다.
이것 은 제 가 백 본 을 배우 기 위해 쓴 범례 입 니 다 [바둑 게임]
프레임 워 크 는 하나의 도구 일 뿐 입 니 다. 예 를 들 어 $('\ # id') 는 document. getElement ById ('id') 로 도 실현 할 수 있 습 니 다. 이 기능 만 실현 하면 후자 의 효율 이 더욱 높 습 니 다. 전문 적 인 전단 에 있어 우 리 는 프레임 워 크 로 원래 의 기능 을 완성 하도록 도와 효율 을 높 여야 합 니 다.
순수한 사용 은 개인의 능력 을 진실 하 게 표현 하지 못 한다. 전단 은 주로 업무 중의 개성 화 된 업무 논리 에 대한 분석 능력 과 원생 의 코드 를 통 해 간결 하고 효율 적 인 우아 함 을 어떻게 실현 하 는 지 에 있다.
예 를 들 어 제 가 쓴 [바둑 게임] 이 어떻게 쓰 는 지, 어떻게 쓰 는 지 는 jquery / backbone 을 사용 하 는 것 과 직접적인 관계 가 없고 그 대신 에 기본 적 인 부분 을 만들어 개발 효 과 를 높 일 수 있 습 니 다.
먼저 [바둑 실례] 과 그 소스 코드 를 보 세 요. 제 수준 을 대체적으로 표현 하고 다음 글 을 보 는 데 시간 이 걸 리 는 지 판단 할 수 있 습 니 다.
구 글 의 chrome 브 라 우 저 를 사용 하여 뒤의 코드 를 보고 디 버 깅 하 는 것 을 권장 합 니 다.
 
백 본 개요:
백 본 은 M - V - C 사용 구조 에 대한 포장 으로, 개발 자가 MVC 를 더 간편 하 게 사용 할 수 있 도록 합 리 적 인 방식 으로 3 자 간 상호 인용 을 연결 하 는 사용 패턴 을 제공한다.
그 주요 제공 유형 은 다음 과 같다.
 
Events     : 관찰자 모드 를 제공 하여 구성 요소 사용 과정 에서 의 이벤트 정 의 를 편리 하 게 합 니 다.
Model   : 단일 요 소 를 포장 하여 데이터 에 간결 하면 서도 강력 한 저장, 추출, 수정, 삭제 방법 을 제공 했다.
Collection: 모델 의 집합 으로서 한 그룹의 데 이 터 를 편리 하 게 조작 할 수 있 습 니 다.모델 과 의 상호 관 계 는 모델 이 모두 collction. models 및 collection. 에 저장 되 어 있다 는 것 이다.by Id 내
             collection 은 model. collection 에 의 해 가리 키 고 있 습 니 다.
View       : 보기 생 성.보통 하나의 템 플 릿 을 정의 하고 그 중의 개성 화 된 정보 변 수 를 변수 화한 다음 에 model 을 가 져 와 model 의 값 으로 view 의 개성 화 된 변 수 를 교체 하여 유사 하고 정보 가 다른 보 기 를 생 성 합 니 다.
model 과 의 관 계 는 new View ({model: model}) 입 니 다.model 은 view. model 에 의 해 가리 키 고 있 습 니 다.
Sync   : ajax 비동기 로 데 이 터 를 가 져 옵 니 다. 주로 jQuery. ajax 를 바탕 으로 Backbone 의 호출 습관 에 더욱 부합 하도록 추가 적 인 패 키 징 을 했 습 니 다.
Router     : 경로, 이 개념 은 매우 깊 은 것 같 지만 그 역할 과 원 리 는 매우 간단 하 다. 바로 url 의 변 화 를 감청 하여 정 의 된 조작 을 촉발 하기 로 결정 하 는 것 이다.
History    : 보조 Router 는 각 브 라 우 저 에 호 환 되 는 형식 으로 url 변 화 를 감청 합 니 다. 그 중에서 최 저급 브 라 우 저 에 대한 처 리 는 50 밀리초 의 타이머 로 정시 에 url 을 가 져 와 변화 여 부 를 판단 하 는 것 입 니 다. 이 점 에서 그 원리 가 얼마나 단순 한 지 알 수 있 습 니 다.
#######################################################
( function(){
 
/***********************************
* 첫 번 째 부분 은 초기 에 준 비 했 습 니 다. - - 전기 에 각 코드 에 대해 비교적 번 거 로 운 주석 을 달 았 고 그 다음 에 똑 같은 기능 에 대해 설명 하지 않 을 것 입 니 다.
* 개요: 기본 변수 와 변수 이름 충돌 처 리 를 정의 합 니 다.
************************************/
 

var root = this;

        역할: this 를 변수 루트 로 저장 하여 뒤의 특정한 부분 환경 에서 this 와 충돌 하지 않도록 합 니 다. 보통 me, self 를 사용 할 수 있 습 니 다. 여기 서 루트 로 뿌리 환경의 의 미 를 표현 할 수 있 습 니 다.
 
 

var previousBackbone = root.Backbone;  

        역할: 존재 할 수 있 는 window. Backbone 변 수 를 저장 합 니 다. 이 곳 에서 정 의 된 Backbone 으로 인 한 충돌 을 피하 고 뒤의 noConfig 방법 을 사용 합 니 다.
 
 

var arrar = [];
var push = array.push;
var slice = array.slice;
var splice = array.splice;

 역할: 다음 에 여러 번 사용 되 는 방법 을 저장 하여 매번 사용 할 때의 코드 작성 을 간소화 합 니 다. * 설명: 1. 여기 서 여러 변 수 를 동시에 정의 합 니 다. 특히 변수 가 많 을 때 읽 기 쉬 운 것 을 유지 하기 위해 다음 과 같이 쓸 수 있 습 니 다. 빈 칸 은 마지막 으로 포장 도구 로 압축 할 수 있 습 니 다. 파일 을 늘 릴 걱정 이 없습니다. 
 
 

//    
var array    = [],
    push     = array.push,
    slice    = array.slice,
    splice   = array.splice;

 

var backbone;

 역할: 이 패키지 에 있 는 유일한 대외 개방 변 수 를 정의 합 니 다. 다음 에 정 의 된 기능 은 모두 이 변수의 속성 으로 출력 되 며, jQuery 의 $/ 또는 EXT 의 Ext 형식 입 니 다. 
 
 

if( typeof exports !== 'undefined' ){
	Backbone = exports;
} else {
	Backbone = root.Backbone = {};
}

 역할: exports 출력 방법 이 정의 되 어 있 으 면 Backbone 을 지연 시 킵 니 다. 그렇지 않 으 면 Backbone 을 루트 변수 인 window 로 열 고 OBJECT 형식 을 지정 합 니 다.
 
설명: 1. exports 는 requireJS, seaJS 등 모듈 화 로드 기능 을 가 진 프레임 워 크 에서 흔히 볼 수 있 습 니 다. 여 기 는 사용 할 필요 가 없습니다. 추 후 따로 설명 하 겠 습 니 다.
사용 하면 인용 파일 에서 이렇게 사용 할 수 있 습 니 다.
var Backbone = require ('Backbone'); / 인용 페이지 에서 Backbone 변 수 를 직접 사용 할 수 있 습 니 다.
 

Backbone.VERSION = '1.0.0';				//   ，      

 

var _ = root._;
if( !_ && ( typeof require !== 'undefined' )){
	_ = require( 'underscore' );
} 

 역할: Backbone 은 underscore. js 가 정의 하 는 바 텀 방법 에 의존 해 야 합 니 다. script 참조, underscore 대외 수출 변 수 를 이 라 고 부 르 면 직접 사용 할 수 있 습 니 다. underscore. js 즉 무 변 수 를 직접 인용 하지 않 으 면 전역 적 인 require 방법 이 있 는 지 판단 합 니 다. 있 으 면 require 를 통 해 모듈 화 로 딩 할 수 있 습 니 다. 개발 자 들 이 사용 할 수 있 는 지 고려 합 니 다.직접 로드 또는 모듈 화 로드 두 가지 방식 입 니 다.
 
인용: require 와 exports 는 모듈 화 인용 호출 입구 와 출구 로 나 뉘 어 져 있 으 며, 추가 적 으로 seaJS 를 분석 할 때 설명 합 니 다.
 

Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;

 
역할: Backbone 은 기본 dom, ajax 등 기본 도구 의 패 키 징 을 제공 하지 않 습 니 다. jQuery 등 기본 프레임 워 크 가 제공 하 는 방법 에 의존 해 야 합 니 다. 개발 자 는 jQuery / Zepto / ender 를 사용 하여 임의의 JS 프레임 워 크 Backbone 을 통일 입구 Backbone 으로 전환 할 수 있 습 니 다. $사용
 

Backbone.noConfig = function(){
	root.Backbone = previousBackbone;
	return this;
}

 
 
역할: 대외 변수 이름 충돌 을 해결 합 니 다. 즉, 이 프레임 워 크 가 제공 하지 않 은 Backbone 을 정 의 했 고 'Backbone' 변수 이름 을 원래 의 정의 에 돌려 주 었 습 니 다. seajs 와 jQuery 도 비슷 한 방법 을 사 용 했 습 니 다.
예시:
var newNS = Backbone.noConfig();   // new NS 는 Backbone 의 기능 을 가지 고 있 으 며, 'Backbone' 은 원래 정 의 된 기능 인용 을 가리킨다.
 

Backbone.emulateHTTP = false;		//Backbone.sync   ，  ajax      ，  sync   
Backbone.emulateJSON = false;