资讯专栏INFORMATION COLUMN

javascript 观察者(发布订阅)模式详解

anonymoussf / 1894人阅读

摘要:写给读者的话本人是千千万万前端小白中的一员,所以对前端小白的痛苦感同身受,面对一个新的知识点,很多时候感到束手无策。

写给读者的话

本人是千千万万前端小白中的一员,所以对前端小白的痛苦感同身受,面对一个新的知识点,很多时候感到束手无策。网上搜资料,有的不全,有的看不懂,所以本人作为小白,很有义务将自己觉得理解了的知识点尽可能的解释的通熟易懂,恨不得一个字一个字的解释。但是别人的终究是别人的,把它变成自己的才是正道,希望此文能帮助像我一样的人更好的理解mvc,一起加油吧

先上demo代码,下面有详尽分析

index.js

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($(""));
            }
        }
        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




    
    MVC


    
MVC模式说明:

model层和view层都继承了观察者类,观察者类中包含订阅和发布方法

model层定义了底层操作,包括对数据的增删改查

view层绑定了增删改事件,一旦所绑定的事件发生,就调用观察者类中的发布方法发布消息;同时又订阅了model层数据的变动,一旦所订阅的model层的数据发生变化,就调用view层自身方法更新数据显示

controller层订阅了view层的增删改事件,一旦所订阅的事件发布了,就调用自身的方法经过业务逻辑的处理,调用相应的model层的方法

针对代码做具体分析:

见下图:

首先页面加载执行初始化代码,执行完成后页面上会有一个列表,里面包含两个选项:PHP和Javascript,然后底下有"+"和"-"两个按钮,以点击"+"为例,流程分析开始:

首先定义了一个观察者Event构造函数

view层中绑定了增删改事件,同时订阅了model层数据改动事件;

我们点击"+"号按钮,触发了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($(""));
            }
        }
        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的优点:

耦合性低:视图层和业务层分离了,如果页面上显示改变的话,直接在视图层更改即可,不用动模型层和控制层上的代码;也就是视图层 与 模型层和控制层

已经分离了;所以很容易改变应用层的数据层和业务规则。

可维护性:分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。

MVC的缺点:

个人觉得适合于大型项目,对于中小型项目并不适合,因为要实现一个简单的增删改操作,只需要一点点JS代码,但是MVC模式代码量明显增加了。

希望此文对你有帮助,如有疑问和错误,请告诉我,谢谢!

参考资料:

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82541.html

相关文章

  • JavaScript 发布-订阅模式

    摘要:发布订阅模式订阅者把自己想订阅的事件注册到调度中心,当发布者发布该事件到调度中心,也就是该事件触发时,由调度中心统一调度订阅者注册到调度中心的处理代码。 发布-订阅模式,看似陌生,其实不然。工作中经常会用到,例如 Node.js EventEmitter 中的 on 和 emit 方法;Vue 中的 $on 和 $emit 方法。他们都使用了发布-订阅模式,让开发变得更加高效方便。 一...

    13651657101 评论0 收藏0
  • JavaScript设计模式发布-订阅模式察者模式)-Part1

    摘要:设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式 《JavaScript设计模式与开发实践》读书笔记。 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时,所有依赖它的对象都将得到通知。 例...

    muzhuyu 评论0 收藏0
  • JavaScript 设计模式(六):察者模式发布订阅模式

    摘要:观察者模式维护单一事件对应多个依赖该事件的对象关系发布订阅维护多个事件主题及依赖各事件主题的对象之间的关系观察者模式是目标对象直接触发通知全部通知,观察对象被迫接收通知。 观察者模式(Observer) 观察者模式:定义了对象间一种一对多的依赖关系,当目标对象 Subject 的状态发生改变时,所有依赖它的对象 Observer 都会得到通知。 简单点:女神有男朋友了,朋友圈晒个图,甜...

    bingo 评论0 收藏0
  • JavaScript 察者模式

    摘要:生活中的观察者模式就如我们在专卖店预定商品如苹果手机,我们会向专卖店提交预定申请,然后店家受申请,正常这样就完事了。中的观察者模式在中观察者模式的实现主要用事件模型。缺点使用全局的观察者模式会明显降低对象之间的联系。 观察者模式又叫做发布-订阅模式。这是一种一对多的对象依赖关系,当被依赖的对象的状态发生改变时,所有依赖于它的对象都将得到通知。 生活中的观察者模式 就如我们在专卖店预定商...

    zhigoo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<