JavaScript 프로그램이 점점 더 복잡해짐에 따라 팀은 종종 협업에서 개발해야하며 코드 및 조직 사양의 모듈화가 매우 중요해집니다. MVC 패턴은 코드 조직의 고전적인 모델입니다.
(… MVC 소개)
(1) 모델
모델은 데이터 계층, 즉 프로그램에 필요한 데이터 소스를 나타내며 일반적으로 JSON 형식으로 표시됩니다.
(2)보기
보기는 사용자 인터페이스 인 프리젠 테이션 계층을 나타냅니다. 웹 페이지의 경우 사용자가 보이는 웹 페이지의 HTML 코드입니다.
(3) 컨트롤러
컨트롤러는 원래 데이터 (모델)를 처리하고보기로 전송하는 데 사용되는 제어 계층을 나타냅니다.
웹 프로그래밍은 MVC를 기반으로 한 클라이언트 프로그래밍과 다르기 때문에 JavaScript 커뮤니티는 다양한 변형 프레임 워크 MVP (Model-View-Presenter), MVVM (Model-View-ViewModel) 등을 제작했습니다. 일부 사람들은 이러한 유형의 프레임 워크 MV*의 다양한 모드를 모두 호출합니다.
프레임 워크의 장점은 코드를 합리적으로 구성하고 팀워크와 향후 유지 보수를 촉진한다는 것입니다. 불이익은 특정 학습 비용이 있고이를 작성하도록 제한한다는 것입니다.
백본 로딩
코드 사본은 다음과 같습니다.
<스크립트 src = "/javascripts/lib/jquery.js"> </script>
<script src = "/javaScripts/lib/indercore.js"> </script>
<스크립트 src = "/javascripts/lib/backbone.js"> </script>
<script src = "/javascripts/jst.js"> </script>
<script src = "/javascripts/router.js"> </script>
<script src = "/javascripts/init.js"> </script>
백본. 뷰
기본 사용
Backbone.view 메소드는보기 클래스를 정의하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var appview = backbone.view.extend ({
렌더 : function () {
$ ( 'main'). Append ( '<h1> 첫 레벨 제목 </h1>');
}
});
위의 코드는 Backbone.view의 확장 메소드를 통해 View Class AppView를 정의합니다. 이 클래스에는 웹 페이지에보기를 배치하는 렌더 메소드가 있습니다.
그것을 사용할 때는보기 클래스의 새 인스턴스를 만들고 인스턴스를 통해 렌더 메소드를 호출하여 웹 페이지에보기를 표시 할 수 있어야합니다.
코드 사본은 다음과 같습니다.
var appview = 새로운 appview ();
AppView.render ();
위의 코드는 View Class AppView의 새로운 인스턴스 appView를 생성 한 다음 AppView.Render를 호출하면 웹 페이지에 지정된 컨텐츠가 표시됩니다.
새보기 인스턴스를 만들 때 일반적으로 모델을 지정해야합니다.
코드 사본은 다음과 같습니다.
var 문서 = 새 문서 ({
모델 : Doc
});
메소드 초기화
보기는 초기화 메소드를 정의 할 수도 있습니다. 인스턴스를 생성 할 때 메소드가 자동으로 호출되어 인스턴스를 초기화합니다.
코드 사본은 다음과 같습니다.
var appview = backbone.view.extend ({
초기화 : function () {
this.render ();
},
렌더 : function () {
$ ( 'main'). Append ( '<h1> 첫 레벨 제목 </h1>');
}
});
var appview = 새로운 appview ();
위의 코드는 초기화 메소드를 정의한 후 인스턴스를 생성 한 후 appview.render ()를 수동으로 호출하는 단계를 제거합니다.
el 속성, $ el 속성
렌더 메소드에서 직접 "보기"에 바인딩 된 웹 페이지 요소를 지정하는 것 외에도보기의 EL 속성을 사용하여 웹 페이지 요소를 지정할 수도 있습니다.
코드 사본은 다음과 같습니다.
var appview = backbone.view.extend ({
el : $ ( 'main'),
렌더 : function () {
this. $ el.append ( '<h1> 1 단계 제목 </h1>');
}
});
위의 코드는 렌더 메소드와 웹 페이지 요소를 직접 바인딩하며 효과는 정확히 동일합니다. 위의 코드에서는 EL 속성 외에도 $ el 속성이기도합니다. 전자는 지정된 DOM 요소를 나타내고 후자는 DOM 요소에 해당하는 jQuery 객체를 나타냅니다.
tagname 속성, classname 속성
EL 속성이 지정되지 않은 경우 TagName 속성 및 ClassName 속성을 통해 지정할 수도 있습니다.
코드 사본은 다음과 같습니다.
var document = backbone.view.extend ({
tagname : "li",
ClassName : "Document",
렌더 : function () {
// ...
}
});
템플릿 메소드
보기의 템플릿 속성은 웹 페이지 템플릿을 지정하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var appview = backbone.view.extend ({
템플릿 : _.template ( "<h3> hello < %= who %> <h3>"),
});
위의 코드에서 밑줄 함수 라이브러리의 템플릿 함수는 템플릿 문자열을 매개 변수로 받아들이고 해당 템플릿 함수를 반환합니다. 이 템플릿 함수를 사용하면 특정 값이 제공되는 한 웹 페이지 코드를 생성 할 수 있습니다.
코드 사본은 다음과 같습니다.
var appview = backbone.view.extend ({
el : $ ( '#container'),
템플릿 : _.template ( "<h3> hello < %= who %> <h3>"),
초기화 : function () {
this.render ();
},
렌더 : function () {
this. $ el.html (this.template ({who : 'world!'}));
}
});
위의 코드 렌더는 템플릿 메소드를 호출하여 특정 웹 페이지 코드를 생성합니다.
실제 응용 분야에서 템플릿은 일반적으로 스크립트 태그에 배치됩니다. JavaScript 코드에 따라 브라우저가 구문 분석하는 것을 방지하기 위해 유형 속성이 텍스트/템플릿으로 설정됩니다.
코드 사본은 다음과 같습니다.
<script type = "텍스트/템플릿"data-name = "templateName">
<!-템플릿 내용은 여기로 이동->
</스크립트>
다음 코드를 사용하여 템플릿을 컴파일 할 수 있습니다.
코드 사본은 다음과 같습니다.
window.templates = {};
var $ sources = $ ( 'script [type = "text/template"]');
$ sources.each (function (index, el) {
var $ el = $ (el);
템플릿 [$ el.data ( 'name')] = _.template ($ el.html ());
});
이벤트 속성
이벤트 속성은보기의 이벤트 및 해당 처리 기능을 지정하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var document = backbone.view.extend ({
이벤트 : {
"클릭 .icon": "Open",
"클릭 .button.edit": "OpenedItdialog",
"클릭 .button.delete": "Destroy"
}
});
위의 코드 중 하나는 3 개의 CSS 선택기의 클릭 이벤트와 해당 세 가지 처리 기능을 지정합니다.
ListEnto 메소드
ListEnto 메소드는 특정 이벤트의 콜백 함수를 지정하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var document = backbone.view.extend ({
초기화 : function () {
this.listento (this.model, "change", this.render);
}
});
위의 코드는 모델의 변경 이벤트이며 콜백 함수는 렌더로 지정됩니다.
방법을 제거하십시오
제거 방법은 뷰를 제거하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
UpdateView : function () {
view.remove ();
view.render ();
};
서브 뷰
아동 전망은 부모의 견해에서 호출 될 수 있습니다. 다음은 글쓰기 방법입니다.
코드 사본은 다음과 같습니다.
렌더 : function () {
이. $ el.html (this.template ());
this.child = new child ();
this.child.appendto ($. ( '. Container-Placeholder'). render ();
}
백본. 루터
라우터는 백본에서 제공하는 라우팅 객체로, 백엔드 처리 기능을 하나씩 사용자가 요청한 URL에 해당하는 데 사용됩니다.
먼저 새 라우터 클래스가 정의됩니다.
코드 사본은 다음과 같습니다.
라우터 = backbone.router.extend ({{
노선 : {
}
});
경로 속성
백본에서 가장 중요한 것은 루터 객체입니다. 경로 처리 방법을 설정하는 데 사용됩니다.
경로 속성은 객체이며, 각 구성원은 경로 처리 규칙을 나타냅니다. 키 이름은 경로 규칙이고 키 값은 처리 방법입니다.
키 이름이 빈 문자열 인 경우 루트 경로를 나타냅니다.
코드 사본은 다음과 같습니다.
노선 : {
'': 'phonesindex',
},
phonesindex : function () {
새 phonesindexview ({el : '섹션#main'});
}
별표는 모든 경로를 나타내며 특정 경로 값을 캡처하기 위해 경로 매개 변수를 설정할 수 있습니다.
코드 사본은 다음과 같습니다.
var approuter = backbone.router.extend ({
노선 : {
"*액션": "defaultroute"
}
});
var app_router = 새로운 승인;
app_router.on ( 'Route : defaultroute', function (actions) {
Console.log (액션);
})
위의 코드에서는 루트 경로 뒤의 매개 변수가 캡처되고 콜백 함수가 전달됩니다.
경로 규칙을 작성하는 방법.
코드 사본은 다음과 같습니다.
var myrouter = backbone.router.extend ({
노선 : {
"도움말": "도움말",
"검색/: 쿼리": "검색"
},
도움말 : function () {
...
},
검색 : 함수 (쿼리) {
...
}
});
노선 : {
"도움말/: 페이지": "도움말",
"다운로드/*경로": "다운로드",
"폴더/: 이름": "OpenFolder",
"Folder/: Name- : Mode": "OpenFolder"
}
router.on ( "경로 : 도움말", 기능 (페이지) {
...
});
백본. 역사
라우터를 설정 한 후 응용 프로그램을 시작할 수 있습니다. 백본 - 역사 객체는 URL의 변경 사항을 모니터링하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
app = 새로운 라우터 ();
$ (document) .ready (function () {
backbone.history.start ({pushstate : true});
});
푸시 스테이트 메소드를 엽니 다. 응용 프로그램이 루트 디렉토리에없는 경우 루트 디렉토리를 지정해야합니다.
코드 사본은 다음과 같습니다.
backbone.history.start ({pushstate : true, root : "/public/search/"})
백본. 모델
모델은 단일 객체 엔티티를 나타냅니다.
코드 사본은 다음과 같습니다.
var user = backbone.model.extend ({
기본값 : {
이름: '',
이메일 : ''
}
});
var user = 새 사용자 ();
위의 코드는 확장 메소드를 사용하여 모델의 템플릿을 나타내는 사용자 클래스를 생성합니다. 그런 다음 새 명령을 사용하여 모델 인스턴스를 생성하십시오. 기본 속성은 기본 속성을 설정하는 데 사용됩니다. 위의 코드는 사용자 객체에 기본적으로 두 개의 속성 이름과 이메일이 있으며 해당 값은 빈 문자열과 같습니다.
인스턴스를 생성 할 때 각 속성에 대한 특정 값을 제공 할 수 있습니다.
코드 사본은 다음과 같습니다.
var user = 새 사용자 ({
ID : 1,
이름 : '이름',
이메일 : '[email protected]'
});
위의 코드는 인스턴스를 생성 할 때 각 속성의 특정 값을 제공합니다.
Idattription 속성
모델 인스턴스에는 다른 인스턴스를 구별하기위한 기본 키 역할을하는 속성이 있어야합니다. 이 속성의 이름은 idattribute 속성에 의해 설정되며 일반적으로 ID로 설정됩니다.
코드 사본은 다음과 같습니다.
var music = backbone.model.extend ({
Idattribute : 'ID'
});
방법을 얻으십시오
Get 메소드는 모델 인스턴스의 특정 속성 값을 반환하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var user = 새 사용자 ({이름 : "이름", 나이 : 24});
var age = user.get ( "age"); // 24
var name = user.get ( "name"); // "이름"
방법을 설정합니다
설정 방법은 모델 인스턴스의 특정 속성 값을 설정하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var user = backbone.model.extend ({
구매 : 기능 (NewCarsName) {
this.set ({car : newCarsName});
}
});
var user = 새 사용자 ({name : 'bmw', model : 'i8', type : 'car'});
user.buy ( '포르쉐');
var car = user.get ( "car"); // '포르쉐'
방법에
ON 방법은 객체의 변화를 듣는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var user = 새 사용자 ({이름 : 'bmw', model : 'i8'});
user.on ( "Change : Name", function (model) {
var name = model.get ( "이름"); // "포르쉐"
Console.log ( "내 차의 이름을" + 이름으로 변경);
});
user.set ({이름 : '포르쉐'});
// 내 차의 이름을 포르쉐로 변경했습니다
위 코드의 ON 메소드는 이벤트를 듣는 데 사용되며 "변경 : 이름"은 이름 속성이 변경되었음을 의미합니다.
urlroot 속성
이 속성은 서버 측의 모델에서 작동하는 경로를 지정하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var user = backbone.model.extend ({
urlroot : '/user'
});
위의 코드는 모델에 해당하는 서버로의 경로가 /사용자임을 지정합니다.
가져 오기 이벤트
페치 이벤트는 서버에서 모델을 가져 오는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var user = 새 사용자 ({id : 1});
user.fetch ({
성공 : 기능 (사용자) {
console.log (user.tojson ());
}
})
위 코드에서 사용자 인스턴스에는 ID 속성이 포함됩니다 (값은 1). Fetch 메소드는 HTTP 동사를 사용하여 URL "/User/1"에 요청을 발행하고 서버에서 인스턴스를 검색합니다.
메소드를 저장하십시오
저장 메소드는 서버에 모델을 생성하거나 업데이트하도록 통지하는 데 사용됩니다.
모델 인스턴스에 ID 속성이 포함되어 있지 않으면 저장 메소드는 POST 메소드를 사용하여 인스턴스를 만듭니다.
코드 사본은 다음과 같습니다.
var user = backbone.model.extend ({
urlroot : '/user'
});
var user = 새 사용자 ();
var userDetails = {
이름 : '이름',
이메일 : '[email protected]'
};
user.save (userDetails, {
성공 : 기능 (사용자) {
console.log (user.tojson ());
}
})
위의 코드는 먼저 해당 모델 URL이 클래스의 /사용자임을 지정 한 다음 새 인스턴스를 작성하고 마지막으로 저장 메소드를 호출합니다. 두 개의 매개 변수가 있습니다. 첫 번째는 인스턴스 객체의 특정 속성이고 두 번째는 콜백 함수 객체로 성공 이벤트를위한 콜백 함수를 설정합니다 (성공적으로 저장). 구체적으로, 저장 메소드는 /사용자에게 게시물 요청을 발행하고 {name : 'name', email : '[email protected]'}을 데이터로 제공합니다.
모델 인스턴스에 ID 속성이 포함 된 경우 저장 메소드는 풋 메소드를 사용하여 인스턴스를 업데이트합니다.
코드 사본은 다음과 같습니다.
var user = 새 사용자 ({
ID : 1,
이름 : '장 산',
이메일 : '[email protected]'
});
user.save ({이름 : 'li si'}, {
성공 : 기능 (모델) {
console.log (user.tojson ());
}
});
위의 코드에서 객체 인스턴스에는 ID 속성 (값이 1)이 포함되어 있으며, 저장은 풋 메소드를 사용하여 URL "/user/1"에 요청하여 인스턴스를 업데이트합니다.
방법을 파괴하십시오
파괴 방법은 서버에서 인스턴스를 삭제하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var user = 새 사용자 ({
ID : 1,
이름 : '이름',
이메일 : '[email protected]'
});
user.destroy ({
성공 : function () {
Console.log ( '파괴');
}
});
위 코드의 파괴 방법은 HTTP 동사 삭제를 사용하여 URL "/User/1"에 요청을 발행하고 해당 모델 인스턴스를 삭제합니다.
백본. 수집
컬렉션은 동일한 유형의 모델 모음입니다. 예를 들어, 모델은 동물이며 수집은 동물원입니다. 모델은 한 사람이고 컬렉션은 회사입니다.
코드 사본은 다음과 같습니다.
var song = backbone.model.extend ({});
var 앨범 = backbone.collection.extend ({
모델 : 노래
});
위의 코드에서 Song is Model, Album is Collection, 앨범은 Song과 동일한 모델 속성을 가지고 있으므로 앨범은 노래 모음임을 의미합니다.
메소드를 추가하고 메소드를 제거하십시오
모델 인스턴스는 수집 인스턴스에 직접 배치하거나 추가 메소드를 사용하여 추가 할 수 있습니다.
코드 사본은 다음과 같습니다.
var song1 = new Song ({id : 1, 이름 : "노래 제목 1", 아티스트 : "Zhang San"});
var song2 = new Music ({id : 2, name : "song title 2", 아티스트 : "li si"});
var myalbum = 새 앨범 ([song1, song2]);
var song3 = 새로운 음악 ({id : 3, 이름 : "노래 제목 3", 아티스트 : "Zhao Wu"});
myalbum.add (song3);
제거 메소드는 수집 인스턴스에서 모델 인스턴스를 제거하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
myalbum.remove (1);
위의 코드는 제거 메소드의 매개 변수가 모델 인스턴스의 ID 속성임을 보여줍니다.
메소드 세트 메소드를 가져옵니다
Get 메소드는 컬렉션에서 지정된 ID의 모델 인스턴스를 얻는 데 사용됩니다.
코드 사본은 다음과 같습니다.
myalbum.get (2))
페치 방법
페치 방법은 서버에서 수집 데이터를 가져 오는 데 사용됩니다.
코드 사본은 다음과 같습니다.
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch ();
백본 .Events
코드 사본은 다음과 같습니다.
var obj = {};
_.extend (obj, backbone.events);
obj.on ( "show-message", function (msg) {
$ ( '#display'). 텍스트 (msg);
});
obj.trigger ( "Show Message", "Hello World");