javascript 觀察者(發佈訂閱)模式詳解

時間  2019-12-06
標籤 javascript 觀察者 發佈 訂閱 模式 詳解 欄目 JavaScript 简体版
原文   原文鏈接

寫給讀者的話

本人是千千萬萬前端小白中的一員，因此對前端小白的痛苦感同身受，面對一個新的知識點，不少時候感到一籌莫展。網上搜資料，有的不全，有的看不懂，因此本人做爲小白，頗有義務將本身以爲理解了的知識點儘量的解釋的通熟易懂，巴不得一個字一個字的解釋。可是別人的終究是別人的，把它變成本身的纔是正道，但願此文能幫助像我同樣的人更好的理解mvc，一塊兒加油吧javascript

先上demo代碼，下面有詳盡分析

index.jshtml

function Event(sender) {
    this._sender = sender;
    this._listeners = [];
}

Event.prototype = {
    constructor : Event,
    attach: function (listener) {
        this._listeners.push(listener);
    },
    notify: function (args) {
        var index;

        for (index = 0; index < this._listeners.length; index += 1) {
            this._listeners[index](this._sender, args);
        }
    }
};

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 = {
    constructor : ListModel,
    getItems: function () {
        return [].concat(this._items);
    },

    addItem: function (item) {
        this._items.push(item);
        this.itemAdded.notify({
            item: item
        });
    },

    removeItemAt: function (index) {
        var item;

        item = this._items[index];
        this._items.splice(index, 1);
        this.itemRemoved.notify({
            item: item
        });
        if (index === this._selectedIndex) {
            this.setSelectedIndex(-1);
        }
    },

    getSelectedIndex: function () {
        return this._selectedIndex;
    },

    setSelectedIndex: function (index) {
        var previousIndex;

        previousIndex = this._selectedIndex;
        this._selectedIndex = index;
        this.selectedIndexChanged.notify({
            previous: previousIndex
        });
    }
};

function ListView(model, elements) {
    this._model = model;
    this._elements = elements;

    this.listModified = new Event(this);
    this.addButtonClicked = new Event(this);
    this.delButtonClicked = new Event(this);

    var _this = this;

    // attach model listeners
    this._model.itemAdded.attach(function () {
        _this.rebuildList();
    });
    this._model.itemRemoved.attach(function () {
        _this.rebuildList();
    });

    // attach listeners to HTML controls
    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 = {
    constructor : ListView,
    show: function () {
        this.rebuildList();
    },

    rebuildList: function () {
        var list, items, key;

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

        items = this._model.getItems();
        for (key in items) {
            if (items.hasOwnProperty(key)) {
                list.append($('<option>' + items[key] + '</option>'));
            }
        }
        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._view.addButtonClicked.attach(function () {
        _this.addItem();
    });

    this._view.delButtonClicked.attach(function () {
        _this.delItem();
    });
}

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

    delItem: function () {
        var index;

        index = this._model.getSelectedIndex();
        if (index !== -1) {
            this._model.removeItemAt(this._model.getSelectedIndex());
        }
    },

    updateSelected: function (index) {
        this._model.setSelectedIndex(index);
    }
};

$(function () {
    var model = new ListModel(['PHP', 'JavaScript']),
        view = new ListView(model, {
            'list': $('#list'),
            'addButton': $('#plusBtn'),
            'delButton': $('#minusBtn')
        }),
        controller = new ListController(model, view);

    view.show();
});

index.html前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVC</title>
</head>
<body>
    <select id="list" size="10" style="width: 10rem"></select><br/>
    <button id="plusBtn">  +  </button>
    <button id="minusBtn">  -  </button>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script src="index.js"></script>
</html>

MVC模式說明：

  1. model層和view層都繼承了觀察者類，觀察者類中包含訂閱和發佈方法
  2. model層定義了底層操做，包括對數據的增刪改查
  3. view層綁定了增刪改事件，一旦所綁定的事件發生，就調用觀察者類中的發佈方法發佈消息；同時又訂閱了model層數據的變更，一旦所訂閱的model層的數據發生變化，就調用view層自身方法更新數據顯示
  4. controller層訂閱了view層的增刪改事件，一旦所訂閱的事件發佈了，就調用自身的方法通過業務邏輯的處理，調用相應的model層的方法

針對代碼作具體分析：

見下圖：java

圖片描述

首先頁面加載執行初始化代碼，執行完成後頁面上會有一個列表，裏面包含兩個選項：PHP和Javascript，而後底下有"+"和"-"兩個按鈕，以點擊"+"爲例，流程分析開始：jquery

  1. 首先定義了一個觀察者Event構造函數
  2. view層中綁定了增刪改事件，同時訂閱了model層數據改動事件;
  3. 咱們點擊"+"號按鈕，觸發了view層中的addButton的click事件，而後addButtonClicked調用觀察者構造函數的發佈方法notify()發佈消息，代碼以下：
this._elements.addButton.click(function () {
        _this.addButtonClicked.notify();
    });
4.因爲在controller層中訂閱了view層的addButtonClicked發佈的消息，將addItem()保存在其對應的listener數組中，因此此時執行_this.addItem()，代碼以下： 
this._view.addButtonClicked.attach(function () {
        _this.addItem();
    });
5.在controller層中的addItem()方法中，若是有item輸入，就調用model層中的addItem(item)並傳入item，代碼以下： 
addItem: function () {
        var item = window.prompt('Add item:', '');
        if (item) {
           this._model.addItem(item);
        }
    }
6.在model層中的itemAdd()方法中，獲取到controller層中傳過來的item以後，將其保存到this.item數組中，而後model層中的item調用notify()發佈消息，代碼以下： 
addItem: function (item) {
        this._items.push(item);
        this.itemAdded.notify({
            item: item
        });
    }
7.因爲在view層中訂閱了model層的itemAdd發佈的消息，將rebuildList()保存在其對應的listener數組中，因此此時執行_this.rebuildList()，代碼以下： 
this._model.itemAdded.attach(function () {
        _this.rebuildList();
    });
8.view層中的rebuildList()乾的事情就是每次都先清空列表內容，而後從新獲取內容，再循環添加到列表中，最後調用model層中的setSelectedIndex(-1)把選中項的index還原爲-1，代碼以下： 
rebuildList: function () {
        var list, items, key;
        list = this._elements.list;
        list.html('');
        items = this._model.getItems();
        for (key in items) {
            if (items.hasOwnProperty(key)) {
                list.append($('<option>' + items[key] + '</option>'));
            }
        }
        this._model.setSelectedIndex(-1);
    }
9.model層中的setSelectedIndex()乾的事情就是把上一次的選中項的index和當前選中項的index進行交換，而後model層中的selectedIndexChanged調用notify()發佈消息，代碼以下： 
setSelectedIndex: function (index) {
        var previousIndex;
        previousIndex = this._selectedIndex;
        this._selectedIndex = index;
        this.selectedIndexChanged.notify({
            previous: previousIndex
        });
    }
10.你會發現view層中沒有對selectedIndexChanged的訂閱，那寫起來幹嗎呢？就是留着之後進行擴展用的，你能夠繼續按照這個模式寫下去

MVC的優勢：

  1. 耦合性低：視圖層和業務層分離了，若是頁面上顯示改變的話，直接在視圖層更改便可，不用動模型層和控制層上的代碼;也就是視圖層 與 模型層和控制層

已經分離了;因此很容易改變應用層的數據層和業務規則。web

  1. 可維護性：分離視圖層和業務邏輯層也使得WEB應用更易於維護和修改。

MVC的缺點：

我的以爲適合於大型項目，對於中小型項目並不適合，由於要實現一個簡單的增刪改操做，只須要一點點JS代碼，可是MVC模式代碼量明顯增長了。數組

但願此文對你有幫助，若有疑問和錯誤，請告訴我，謝謝！mvc

參考資料：

https://alexatnet.com/article...app

http://web.jobbole.com/84945/函數

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程