JavaScript_Basic 지식으로 MVC 패턴에 대해 이야기해 보세요.

원문: 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});
    }
};

이벤트 是一个简单的实现了观察者模式(관찰자 패턴)的类：

复system代码 代码如下:

함수 이벤트(발신자) {
    this._sender = 보낸 사람;
    this._listeners = [];
}

Event.prototype = {
    첨부 : 함수(리스너) {
        this._listeners.push(리스너);
    },

    알림: 함수(args) {
        var index;

        for (index = 0; index             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();
});

    버튼>
  -  버튼>