JavaScript_Basic 지식으로 MVC 패턴에 대해 이야기해 보세요.
- WBOY원래의
- 2016-05-16 17:37:43984검색
원문: JavaScript를 사용한 MVC(Model-View-Controller)
저자: Alex@Net
번역: JavaScript의 MVC 패턴
번역자: justjavac
이 글에서는 JavaScript의 모델-뷰-컨트롤러 패턴 구현을 소개합니다.
저는 JavaScript가 세계에서 가장 유연한 언어 중 하나이기 때문에 좋아합니다. JavaScript에서 프로그래머는 자신의 취향에 따라 절차적 또는 객체 지향적인 프로그래밍 스타일을 선택할 수 있습니다. 당신이 헤비 유저라면 JavaScript는 프로세스 지향, 객체 지향, 관점 지향 등을 쉽게 처리할 수 있습니다. JavaScript를 사용하면 개발자는 함수형 프로그래밍 기술도 사용할 수 있습니다.
이 기사에서 나의 목표는 모든 사람에게 JavaScript의 강력한 기능을 보여주기 위해 간단한 JavaScript 구성 요소를 작성하는 것입니다. 이 구성 요소는 편집 가능한 항목 목록입니다(HTML의 태그 선택). 사용자는 항목을 선택하고 삭제하거나 목록에 새 항목을 추가할 수 있습니다. 컴포넌트는 MVC 디자인 패턴의 모델-뷰-컨트롤러에 해당하는 세 가지 클래스로 구성됩니다.
이 글은 단순한 안내일 뿐입니다. 실제 프로젝트에서 사용하려면 적절하게 수정해야 합니다. 나는 두뇌, 손, 텍스트 편집기(메모장 등), 브라우저(내가 가장 좋아하는 Chrome 등) 등 JavaScript 프로그램을 만들고 실행하는 데 필요한 모든 것을 갖추고 있다고 믿습니다.
우리 코드는 MVC 패턴을 사용할 것이므로 여기서는 이 디자인 패턴을 간략하게 소개하겠습니다. MVC 패턴의 영어 이름은 Model-View-Controller 패턴입니다. 이름에서 알 수 있듯이 주요 부분은 다음과 같습니다.
• 프로그램에 사용되는 데이터를 저장하는 데 사용되는 모델()
• 다양한 형식으로 데이터를 표시하는 데 사용되는 뷰
• 컨트롤러(Controller), 모델을 업데이트합니다.
Wikipedia의 MVC 아키텍처 정의에서는 다음 세 부분으로 구성됩니다.
모델 - "데이터 모델"(Model)은 애플리케이션의 비즈니스 로직과 데이터 처리 방법과 관련된 데이터를 캡슐화하는 데 사용됩니다. "모델"은 데이터에 직접 액세스할 수 있습니다. "모델"은 "뷰"와 "컨트롤러"에 의존하지 않습니다. 즉, 모델은 표시 방법이나 조작 방법에 관심이 없습니다.
보기 - 보기 레이어를 사용하면 일반적으로 사용자 인터페이스 요소인 데이터를 의도적으로 표시할 수 있습니다. 일반적으로 뷰에는 절차적 논리가 없습니다. 웹 애플리케이션의 MVC에서는 동적 데이터를 표시하는 HTML 페이지를 일반적으로 뷰라고 합니다.
컨트롤러(Controller) - 이벤트, 일반적으로 사용자 작업을 처리하고 응답하며 모델의 변경 사항을 모니터링한 다음 뷰를 수정합니다.
구성 요소의 데이터는 하나의 특정 항목을 선택하고 삭제할 수 있는 항목 목록이므로 구성 요소의 모델은 매우 간단합니다. 이는 배열 속성과 선택된 항목 속성에 저장됩니다. 그것은:
MVC를 기반으로 데이터 목록 컴포넌트를 구현해 보겠습니다. 목록에 있는 항목을 선택하고 삭제할 수 있습니다. 따라서 구성 요소 모델은 매우 간단합니다. 두 가지 속성만 필요합니다.
1. _items 배열은 모든 요소를 저장하는 데 사용됩니다.
2. 일반 변수 _selectedIndex는 선택한 요소 인덱스를 저장하는 데 사용됩니다.
코드는 다음과 같습니다.
/**
* 모델.
*
* 모델은 모든 요소를 저장하고 상태가 변경되면 관찰자에게 알립니다.
*/
function ListModel(items) {
this._items = items; // 所有元素
this._selectedIndex = -1; // 被选择元素的索引
this.itemAdded = 새 이벤트(this);
this.itemRemoved = 새 이벤트(this);
this.selectedIndexChanged = 새 이벤트(this);
}
ListModel.prototype = {
getItems : function () {
return [].concat(this._items);
},
addItem : 함수(항목) {
this._items.push(item);
this.itemAdded.notify({item : item});
},
RemoveItemAt : 함수(색인) {
var item;
항목 = this._items[index];
this._items.splice(index, 1);
this.itemRemoved.notify({item : item});
if (index === this._selectedIndex) {
this.setSelectedIndex(-1);
}
},
getSelectedIndex : 함수 () {
return this._selectedIndex;
},
setSelectedIndex : 함수(색인) {
var PreviousIndex;
PreviousIndex = this._selectedIndex;
this._selectedIndex = index;
this.selectedIndexChanged.notify({previous : PreviousIndex});
}
};
이벤트 是一个简单的实现了观察者模式(관찰자 패턴)的类：
함수 이벤트(발신자) {
this._sender = 보낸 사람;
this._listeners = [];
}
Event.prototype = {
첨부 : 함수(리스너) {
this._listeners.push(리스너);
},
알림: 함수(args) {
var index;
for (index = 0; index < this._listeners.length; index = 1) {
this._listeners[index](this._sender, args);
}
}
};
정확한 확인 방법을 확인하세요. 내가 좋아하는 项目是는 ListBox와 아래쪽 화면에 있습니다.的两个按钮：“加号”按钮添加项目，“减”删除所选项目。的支持。
일체 보기 类被绑册 는 一个 컨트롤러 类上, 其中 「…
하면 보기 및 컨트롤러 类：
/**
*보기.
*
* 뷰는 모델 데이터를 표시하고 UI 이벤트를 트리거합니다.
* 컨트롤러는 이러한 사용자 상호작용 이벤트를 처리하는 데 사용됩니다.
*/
function ListView(모델, 요소) {
this._model = 모델;
this._elements = 요소;
this.listModified = 새 이벤트(this);
this.addButtonClicked = 새 이벤트(this);
this.delButtonClicked = 새 이벤트(this);
var _this = this;
// 绑定模型监听器
this._model.itemAdded.attach(function () {
_this.rebuildList();
});
this._model.itemRemoved.attach(function () {
_this.rebuildList();
});
// 将监听器绑定到 HTML 控件上
this._elements.list.change(function (e) {
_this.listModified.notify({ index : e.target.selectedIndex });
});
this._elements.addButton.click(function () {
_this.addButtonClicked.notify();
});
this._elements.delButton.click(function () {
_this.delButtonClicked.notify();
});
}
ListView.prototype = {
show : function () {
this.rebuildList();
},
재건 목록 : 함수 () {
var 목록, 항목, 키;
목록 = this._elements.list;
list.html('');
items = this._model.getItems();
for (항목의 키) {
if (items.hasOwnProperty(key)) {
list.append($(''));
}
}
this._model.setSelectedIndex(-1);
}
};
/**
* 컨트롤러.
*
* 컨트롤러는 사용자 조작에 반응하여 모델의 변경 기능을 호출합니다.
*/
function ListController(모델, 뷰) {
this._model = 모델;
this._view = view;
var _this = this;
this._view.listModified.attach(함수(발신자, 인수) {
_this.updateSelected(args.index);
});
this._view.addButtonClicked.attach(function () {
_this.addItem();
});
this._view.delButtonClicked.attach(function () {
_this.delItem();
});
}
ListController.prototype = {
addItem : function () {
var item = window.prompt('항목 추가:', '');
if (항목) {
이. _model.addItem(item);
}
},
delItem : 함수 () {
var index;
index = this._model.getSelectedIndex();
if (index !== -1) {
this._model.removeItemAt(this._model.getSelectedIndex());
}
},
updateSelected : 함수(색인) {
this._model.setSelectedIndex(index);
}
};
当然，모델, 뷰, 컨트롤러 类应当被实例化。
아래쪽 MVC의 完整代码:
$(function () {
var model = new ListModel(['PHP', 'JavaScript']),
view = new ListView(model, {
'list' : $('#list'),
'addButton' : $('#plusBtn'),
'delButton' : $( '#minusBtn')
}),
컨트롤러 = new ListController(모델, 뷰);
view.show();
});