談談關於JavaScript 中的 MVC 模式_基礎知識

原文：Model-View-Controller (MVC) with JavaScript
作者：Alex@Net
譯：JavaScript 的 MVC 模式
譯者：justjavac

本文介紹了模型-視圖-控制器模式在 JavaScript 中的實作。

我喜歡 JavaScript，因為它是世界上最靈活的語言之一。 在 JavaScript 中，程式設計師可以根據自己的口味選擇程式設計風格：過程導向或物件導向。 如果你是重口味，JavaScript 一樣可以應付自如： 面向過程，面向對象，面向方面， 使用 JavaScript 開發人員甚至可以使用函數式程式設計技術。

這篇文章中，我的目標是寫一個簡單的 JavaScript 元件，來向大家展示 JavaScript 的強大。 該元件是一個可編輯的項目清單（HTML中的 select 標籤）：使用者可以選擇某一項並刪除它，或將新的項目新增至清單。 元件將由三個類別構成，分別對應著 MVC 設計模式的模型-視圖-控制器。

這篇文章只是一個簡單的指導。 如果你希望在實際的專案中使用它，你需要進行適當的修改。 我相信你擁有創建和運行 JavaScript 程式的一切：大腦，雙手，文字編輯器（如記事本），瀏覽器（例如​​我的最愛 Chrome）。

既然我們的程式碼要使用 MVC 模式，所以我在這裡簡單介紹一個這個設計模式。 MVC 模式的英文名稱是 Model-View-Controller pattern，顧名思義，其主要部分組成：

•模型Model()，用於儲存程式中所使用的資料;
•視圖(View)，以不同的表現形式呈現資料；
•控制器(Controller)，更新模型。
在維基百科對 MVC 體系結構的定義中，它由以下三個部分組成：

模型（Model） -「資料模型」（Model）用於封裝與應用程式的業務邏輯相關的資料以及對資料的處理方法。 「模型」有對資料直接存取的權力。 “模型”不依賴“視圖”和“控制器”，也就是說，模型不關心它會被如何顯示或如何被操作。

視圖（View） - 視圖層能夠實現資料有目的的顯示，通常是一個使用者介面元素。 在視圖中一般沒有程式上的邏輯。 在 Web 應用程式中的 MVC，通常會將顯示動態資料的 html 頁面稱為視圖。

控制器（Controller） - 處理和回應事件，通常是使用者操作，並監控模型上的變化，然後去修改視圖。

The data of the component is a list of items, in which one particular item can be selected and deleted. So, the model of the component is very simple - it is stored in an array property and selectyed it is:

我們將基於 MVC 實作一個資料列表元件，列表中的項目可以被選擇和刪除。 因此，組件模型是非常簡單的 - 它只需要兩個屬性：

1.陣列 _items 用來儲存所有元素
2.普通變數 _selectedIndex 用來儲存選定的元素索引
程式碼如下：

複製程式碼 程式碼如下:

/**
 * 模型。
 *
 * 模型儲存所有元素，並在狀態變更時通知觀察者（Observer）。
 */
function ListModel(items) {
    this._items = items;        // 所有元素
    this._selectedIndex = -1;   // 被選取元素的索引

    this.itemAdded = new Event(this);
    this.itemRemoved = new Event(this);
    this.selectedIndexChanged = new Event(this);ListModel.prototype = {

    getItems : function () {

        return [].concat(this._items);
    return [].concat(this._items);
    return [].concat(this._items);
    return []  

    addItem : 函數（項目）{

        this._items.push(item);
      
    removeItemAt ：函數（索引）{
        var item;

        item = this._items[index];
        this._items.splice(index, 1);

{pved.

        if (index === this._selectedIndex) {
             
    getSelectedIndex : function () {

        return this._selectedIndex;

    },

    setSelectedIndex : 函數（索引）{
        var previousIndex;

        previousIndex = this._selectedIndex;
        this._selectedIndex = index;
    this._selectedIndex = index;

 

    }
};

事件是一個簡單的實作了觀察者模式（Observer pattern）的類別：

複製程式碼

程式碼如下：function Event(sender) { . = 寄件者;    this._listeners = [];}

Event.prototype = {
    Attach : 函數（監聽器）{
        this._listeners.push(listener);
    this._listeners.push(listener);
    this._listeners.push(listener);    },

    通知：函數（參數）{
        var 索引；

        for (index = 0;index            >    }
};

查看類別需要定義互動控制器類，希望其次。 「加號」按鈕新增兩個項目，「減」刪除選取的項目。
一個View類別被綁定在一個Controller類別上，其中「…控制器處理使用者輸入事件，通常是透過一個註冊已註冊的回呼函數」（wikipedia.org）。
下面是View和Controller類別：

複製程式碼

程式碼如下：

/**
 * 視圖。
 *
 * 視圖顯示模型數據，並觸發 UI 事件。
 * 控制器用來處理這些使用者互動事件
 */
function ListView(model, elements) {
    this._model = model;
    this._elements._model = model;    this._elements = elements    this.listModified = new Event(this);
    this.addButtonClicked = new Event(this);
    this.delButtonClicked = new Event(this);

    var _this = this;

    // 綁定模型監聽器
    this._model.itemAdded.attach(function () {
        
    this._model.itemRemoved.attach(function () {

       _this.rebuildList();

   
    // 將監聽器綁定到 HTML 控制項上
    this._elements.list.change(function (e) {

        _this.listModified🎜>        _this.listModified.notify.{ index.

    });

    this._elements.addButton.click(function () {
        _this.addButtonClicked.notify();

    });

}

    this._elements.delButton.click(function () {

        _this.delButtonClicked.notify();

    });

ListView.prototype = {
    show : function () {

        this.rebuildList();

      this.rebuildList();
 
   重建List : function () {
        var list, items, key;

        list = this._elements.list;
        list.html('');

        items = this._model.getItems();
        for (key in items) {

              list.append($('; ' items[key] ''));

            }
        }

        this._model.setSelectedIndex(-1);
    }
};

/**
 * 控制器。
 *

 * 控制器回應使用者操作，呼叫模型上的變化函數。

 */
function ListController(model, view) {
    this._model = model;
    this._view = view;
;
;
;
;

;

;

;

;
;

    var _this = this;

    this._view.listModified.attach(function (sender, args) {
       _this.updateSelected(args.index);

   _this.updateSelected(args.index);

   _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('         this. _model.addItem(item);

        }

    },

    delItem : function () {
        var 索引;

        index = this._model.getSelectedIndex();

       if (index !== -1) {
 del  if. ());
        }
    },

    updateSelected : 函數（索引）{        this._model.setSelectedIndex(index);

   

當然，Model、View、Controller類別應該要被實例化。

以下是一個使用此 MVC 的完整程式碼：

複製程式碼程式碼如下：

$(function () {
    var model = new ListModel(['PHP', 'JavaScript']),

    view = new ListView(model, {
        'list' : $('#list'),
      ( '#minusBtn')
    }),

    控制器 = new ListController(模型, 檢視);       

    view.show();
});

    按鈕>
  -  按鈕>