【JavaScript设计模式与开发实践】第八章-发布订阅模式

[Kelichao]

实例网站登录

• 网站登录后，会通过异步请求拿到数据，然后对页面各部分比如购物车，订单，用户名，搜藏等进行渲染,使函数解耦，不需要在原函数处添加代码。

这里普通的方式需要改登录模块的代码

如果此时别人添加了一个收获地址的模块，就需要动你的登录模块代码

// 登录模块的代码
// 目前的模式，组装模式
login.succ(function (data) {

    // 这是针对具体实现编程的典型例子，针对具体实现编程是不被赞同的。
    header.setAvatar(data.avatar); // 设置header 模块的头像
    nav.setAvatar(data.avatar); // 设置导航模块的头像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新购物车列表
});

// 如果又增加了一个收货地址的模块,需要不断堆积木
login.succ(function (data) {
    header.setAvatar(data.avatar);
    nav.setAvatar(data.avatar);
    message.refresh();
    cart.refresh();
    address.refresh(); // 既增加这行代码，又要在别的地方增加函数
});

JQuery订阅模式实例

        $("#loginBtn").click(function() {
            obj.trigger("aaa");
        });

        var obj = $({});

        obj.on("aaa", function () {
            console.log(111111111111);
        })

        obj.on("aaa", function () {
            console.log(222222222222);
        })