西柚
西柚
发布于 2024-07-11 / 7 阅读
1
0

设计模式

1.单例模式 :保证一个类只有一个实例,并提供一个访问它的全局访问点

let singleTon = (function () {

            let _instance = null

            function Foo() {

                this.prop = "实例的属性"

            }

            Foo.prototype.fun = function () {

                console.log("原型对象上的方法");

            }

            let foo = new Foo()

            return {

                getInstance: function () {

                    if (!_instance) {

                        _instance = new Foo()

                    }

                    return _instance;

                }

            }

        })()

console.log(singleTon.getInstance() == singleTon.getInstance());

2.观察者模式: (发布订阅者模式) 定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都将得到通知.

// 对象版

let observer = {

            on(eventName, callBack) {  // 订阅事件

                if (this.obj === undefined) {

                    Object.defineProperty(this, "obj", {

                        value: {},

                        enumerable: false

                    })

                    // this.obj = {} // 不考虑Object.assign()

                }

                if(this.obj[eventName] === undefined) {

                    this.obj[eventName] = [callBack]

                }else {

                    this.obj[eventName].push(callBack)

                }

            },

            emit(eventName) {          // 发布事件

                if(this.obj[eventName]) {

                    this.obj[eventName].forEach(element => {

                        element()

                    });

                }

            },

            remove(eventName, callBack) {  // 移除事件

                if(this.obj[eventName]) {

                    this.obj[eventName].forEach((element,index) => {

                        if(element == callBack) {

                            this.obj[eventName].splice(index,1)

                        }

                    });

                }

            }

        }

        observer.on("test",function() {

            console.log("test1");

        })

        observer.on("test",function() {

            console.log("test2");

        })

        observer.on("test",function() {

            console.log("test3");

        });

        function foo() {

            console.log("移除的事件");

        }

        observer.on("test",foo);

        observer.remove('test',foo)

        observer.emit("test")

// 构造函数版

function MessageCenter() {

            var _messages = {};

            // 对于regist方法,它只负责注册消息,就只接收一个注册消息的类型(标识)参数就好了。

            this.regist = function (msgType) {

                // 判断是否重复注册

                if (typeof _messages[msgType] === 'undefined') {

                    _messages[msgType] = [];    // 数组中会存放订阅者

                } else {

                    console.log('这个消息已经注册过了');

                }

            }

            // 对于subscribe方法,需要订阅者和已经注册了的消息进行绑定,msgType是要被绑定的消息类型,subFn是订阅者得到消息后的处理函数

            this.subscribe = function (msgType, subFn) {

                // 判断是否有这个消息

                if (typeof _messages[msgType] !== 'undefined') {

                    _messages[msgType].push(subFn);

                } else {

                    console.log('这个消息还没注册过,无法订阅')

                }

            }

            // 最后我们实现下fire这个方法,就是去发布某条消息,并通知订阅这条消息的所有订阅者函数

            this.fire = function (msgType, args) {

                // msgType是消息类型或者说是消息标识,而args可以设置这条消息的附加信息

                // 还是发布消息时,判断下有没有这条消息

                if (typeof _messages[msgType] === 'undefined') {

                    console.log('没有这条消息,无法发布');

                    return false;

                }

                _messages[msgType].forEach(function (sub) {

                    sub();

                })

            }

        }

        var msgCenter = new MessageCenter();

        msgCenter.regist('A');  // 注册事件

        msgCenter.subscribe('A', subscribeFn); // 添加订阅者

        function subscribeFn(events) {

            console.log(events.type, events.args);  // A, fire msg

        }

       

        msgCenter.subscribe('A', subscribeFn2);

        function subscribeFn2(events) {

            console.log("2号也订阅了A");  // A, fire msg

        }

       

        setTimeout(function () {

            msgCenter.fire('A', 'fire msg');

        }, 1000);


评论