javascript_javascript 팁의 MVC 패턴 이해

MVC 패턴은 소프트웨어 엔지니어링의 소프트웨어 아키텍처 패턴입니다. 소프트웨어 패턴은 일반적으로 모델 + 뷰 + 컨트롤러의 세 부분으로 나뉩니다.

모델: 모델은 애플리케이션의 비즈니스 로직과 데이터 처리 방법과 관련된 데이터를 캡슐화하는 데 사용됩니다. 모델은 데이터에 직접 접근할 수 있습니다. 모델은 "뷰"와 "컨트롤러"에 의존하지 않습니다. 즉, 페이지가 어떻게 표시되고 작동되는지 모델이 신경 쓰지 않는다는 의미입니다.

View: 뷰 레이어에서 가장 중요한 것은 모델 레이어의 데이터 변경을 모니터링하고 html 페이지를 실시간으로 업데이트하는 것입니다. 물론 여기에는 일부 이벤트 등록이나 Ajax 요청 작업(이벤트 게시)도 포함되며 모두 뷰 계층에서 수행됩니다.

컨트롤러: 컨트롤러는 사용자 작업을 수신합니다. 가장 중요한 것은 뷰 레이어의 이벤트를 구독한 다음 모델이나 뷰를 호출하여 사용자 작업을 완료하는 것입니다. 페이지에서는 컨트롤러가 아무 것도 출력하지 않고 응답합니다. 페이지는 처리를 수행하지 않고 요청을 수신하고 요청을 처리하기 위해 호출할 모델의 메서드를 결정한 다음 반환된 데이터를 표시하기 위해 호출할 뷰의 메서드를 결정합니다. .

아래 그림과 같이 추가 및 삭제할 수 있는 간단한 드롭다운 상자 컨트롤을 구현해 보겠습니다.

코드는 다음과 같습니다.

/*
 模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法。模型有对数据直接访问的权利。
 模型不依赖 "视图" 和 "控制器", 也就是说 模型它不关心页面如何显示及如何被操作.
*/
function Mode(elems) {
  // 所有元素
  this._elems = elems;
 
  // 被选中元素的索引
  this._selectedIndex = -1;
 
  // 增加一项
  this.itemAdd = new Event(this);
 
  // 删除一项
  this.itemRemoved = new Event(this);
 
  this.selectedIndexChanged = new Event(this);
}
 
Mode.prototype = {
 
  constructor: 'Mode',
 
  // 获取所有的项
  getItems: function(){
    return [].concat(this._elems);
  },
  // 增加一项
  addItem: function(elem) {
    this._elems.push(elem);
    this.itemAdd.notify({elem:elem});
  },
  // 删除一项
  removeItem: function(index) {
    var item = this._elems[index];
    this._elems.splice(index,1);
    this.itemRemoved.notify({elem:item});
 
    if(index === this._selectedIndex) {
      this.setSelectedIndex(-1);
    }
  },
  getSelectedIndex: function(){
    return this._selectedIndex;
  },
  setSelectedIndex: function(index){
    var previousIndex = this._selectedIndex;
    this._selectedIndex = index;
    this.selectedIndexChanged.notify({previous : previousIndex});
  }
};
/*
 下面是观察者模式类,它又叫发布---订阅模式;它定义了对象间的一种一对多的关系，
 让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
*/
function Event(observer) {
  this._observer = observer;
  this._listeners = [];
}
Event.prototype = {
  constaructor: 'Event',
  attach : function(listeners) {
    this._listeners.push(listeners);
  },
  notify: function(objs){
    for(var i = 0,ilen = this._listeners.length; i ) {
      this._listeners[i](this._observer,objs);
    }
  }
};
 
/*
 * 视图显示模型数据，并触发UI事件。
 */
function View(model,elements){
  this._model = model;
  this._elements = elements;
 
  this.listModified = new Event(this);
  this.addButtonClicked = new Event(this);
  this.delButtonClicked = new Event(this);
  var that = this;
 
  // 绑定模型监听器
  this._model.itemAdd.attach(function(){
    that.rebuildList();
  });
  this._model.itemRemoved.attach(function(){
    that.rebuildList();
  });
 
  // 将监听器绑定到HTML控件上
  this._elements.list.change(function(e){
    that.listModified.notify({index: e.target.selectedIndex});
  });
  // 添加按钮绑定事件
  this._elements.addButton.click(function(e){
    that.addButtonClicked.notify();
  });
  // 删除按钮绑定事件
  this._elements.delButton.click(function(e){
    that.delButtonClicked.notify();
  });
}
View.prototype = {
  constructor: 'View',
  show: function(){
    this.rebuildList();
  },
  rebuildList: function(){
    var list = this._elements.list,
      items,
      key;
    list.html("");
    items = this._model.getItems();
    for(key in items) {
      if(items.hasOwnProperty(key)) {
        list.append('' +items[key]+ '');
      }
    }
    this._model.setSelectedIndex(-1);
  }
};
/*
 控制器响应用户操作，调用模型上的变化函数
 负责转发请求，对请求进行处理
*/
function Controller(model,view) {
  this._model = model;
  this._view = view;
  var that = this;
 
  this._view.listModified.attach(function(sender,args){
    that.updateSelected(args.index);
  });
  this._view.addButtonClicked.attach(function(){
    that.addItem();
  });
  this._view.delButtonClicked.attach(function(){
    that.delItem();
  });
}
Controller.prototype = {
  constructor: 'Controller',
 
  addItem: function(){
    var item = window.prompt('Add item:', '');
    if (item) {
      this._model.addItem(item);
    }
  },
 
  delItem: function(){
    var index = this._model.getSelectedIndex();
    if(index !== -1) {
      this._model.removeItem(index);
    }
  },
 
  updateSelected: function(index){
    this._model.setSelectedIndex(index);
  }
};

HTML 코드는 다음과 같습니다.

<select id="list" size="10" style="width: 10rem">select>br/>
<button id="plusBtn"> + button>
<button id="minusBtn"> - button>

페이지 초기화 코드는 다음과 같습니다.

$(function () {
  var model = new Mode(['PHP', 'JavaScript']),
   view = new View(model, {
    'list' : $('#list'), 
    'addButton' : $('#plusBtn'), 
    'delButton' : $('#minusBtn')
    }),
    controller = new Controller(model, view);    
    view.show();
});

코드 분석은 다음과 같습니다.

먼저 어떤 종류의 기능을 구현하고 싶은지 분석해 보겠습니다. 기본 기능은 다음과 같습니다.

사용자 입력 작업을 통해 항목을 선택한 후 항목을 추가하고 삭제할 수 있는 드롭다운 상자
물론 사용자가 해당 항목으로 전환하는 이벤트도 추가됩니다.

예를 들어 지금 데이터를 추가할 때 다음 코드와 같이 뷰 레이어에 청취 이벤트를 추가하세요.

// 添加按钮绑定事件
this._elements.addButton.click(function(e){
  that.addButtonClicked.notify();
});

그런 다음 관찰자 클래스 Event(이벤트 게시)에서 알림 메서드를 호출합니다. that.addButtonClicked.notify() 우리 모두 알고 있듯이 관찰자 모드는 게시-구독 모드라고도 하며 여러 관찰자 개체가 이벤트를 모니터링할 수 있습니다. 특정 이벤트가 동시에 발생하며, 테마 객체가 변경되면 해당 객체에 종속된 모든 객체에 알림이 전송됩니다.
따라서 제어 계층(컨트롤러)에서 다음 코드를 사용하여 게시자를 모니터링할 수 있습니다.

this._view.addButtonClicked.attach(function(){
  that.addItem();
});

그런 다음 자체 메소드 addItem()을 호출합니다. 코드는 다음과 같습니다.

addItem: function(){
  var item = window.prompt('Add item:', '');
  if (item) {
    this._model.addItem(item);
  }
}

모델 레이어(model)의 addItem() 메소드를 호출합니다. 모델(모델 레이어)의 addItem() 메소드 코드는 다음과 같습니다.

// 增加一项
addItem: function(elem) {
  this._elems.push(elem);
  this.itemAdd.notify({elem:elem});
},

위 코드는 항목을 추가하고 this.itemAdd를 통해 메시지를 게시한 후 뷰 레이어(View)에서 다음 코드를 통해 메시지를 모니터링합니다.

// 绑定模型监听器
this._model.itemAdd.attach(function(){
   that.rebuildList();
});

최종적으로 모델(Model)의 데이터를 모니터링한 후 자체 메소드인buildList()를 즉시 호출하여 페이지의 데이터를 업데이트합니다.

모델 레이어(Model)는 주로 비즈니스 데이터 캡슐화 작업을 담당합니다. 뷰 레이어(View)는 주로 이벤트 작업을 게시하고 모델 레이어의 데이터를 모니터링합니다. 모델 레이어의 데이터가 변경되면 페이지 작업을 적시에 업데이트하고 최종적으로 컨트롤 레이어(Controller)에 표시합니다. 뷰 계층(View) 이벤트를 모니터링하고 모델 계층(Model)의 메서드를 호출하여 모델 계층 데이터가 업데이트된 후 마지막으로 뷰 계층(View)이 게시됩니다. 모델 레이어(Model)의 데이터 변경을 모니터링하여 페이지를 업데이트합니다. 위는 MVC의 기본 프로세스입니다.
MVC의 장점:
  1. 낮은 결합도: 뷰 레이어와 비즈니스 레이어가 분리되어 페이지에 표시되는 내용이 변경되면 모델을 건드릴 필요 없이 뷰 레이어에서 직접 변경할 수 있습니다. 레이어 및 컨트롤 레이어의 코드, 즉 뷰 레이어, 모델 레이어 및 컨트롤 레이어
이미 분리되어 있으므로 데이터 계층과 애플리케이션 계층의 비즈니스 규칙을 쉽게 변경할 수 있습니다.
​​   2. 유지 관리성: 뷰 레이어와 비즈니스 로직 레이어를 분리하면 웹 애플리케이션을 더 쉽게 유지하고 수정할 수 있습니다.
MVC의 단점:
개인적으로 나는 이것이 대규모 프로젝트에 적합하고 중소 규모 프로젝트에는 적합하지 않다고 생각합니다. 왜냐하면 간단한 추가, 삭제 및 수정 작업을 달성하려면 약간의 JS 코드만 필요하지만 MVC 모드 코드의 양이 필요하기 때문입니다. 크게 증가했습니다.
물론, 캡슐화된 MVC 라이브러리나 프레임워크를 사용하는 것이 더 좋을 것입니다.

이상은 JavaScript의 MVC 패턴 구현 방법과 그 장단점을 자세히 분석한 내용으로, 모든 분들의 학습에 도움이 되기를 바랍니다.