JavaScript的设计者 js设计模式有哪些

转载

云端创新者 2023-09-19 08:37:48

文章标签 JavaScript的设计者 javascript jQuery List 工厂模式 文章分类 JavaScript 前端开发

什么是设计模式
设计模式就是一种思想，用来规范编程的代码的，让代码更整洁清晰维护扩展等等。

1.单例设计模式和命令模式

是早期的模块化编程，历史：
AMD(require.js)
CMD(sea.js)/common.js(node)
ES6 module
用于业务逻辑处理
思想：基于单独的实例，来管理一个模块的内容，实现模块之间的独立划分，以及模块之间方法的相互调用。
单例模式就是暴露方法，命令模式是控制这些方法谁先执行，谁后执行。

let SearchModule = (function () {
    let body = document.body;
    function queryData() {}
    function bindHTML() {}
    function handle() {}
    return {
        // init相当于大脑，可以控制谁先执行，谁后执行 （这就是命令模式）
        init: function () {
            queryData();
            bindHTML();
            handle();
        }
    };
})();
SearchModule.init();

但是单例没法满足这种诉求：单独的私有的容器，执行的方法还是同一个，但是每一次修改都是改自己的容器里面的变量，于是出现了constructor构造器模式。

2. constructor构造器模式

构造器可以创造一大类，很多实例，每一个实例都有自己私有的方法和属性，同时可以通过prototype来添加公有的属性和方法
类&实例
私有&公有属性方法
插件组件封装

AModule:类「构造函数」
class AModule {
    constructor() {
        // this->每个类的实例
        this.arr = [];
    }
    // 原型上 公共的属性和方法
    change(val) {
        this.arr.push(val);
        console.log(this.arr);
    }
}
let A1 = new AModule;
let A2 = new AModule;
console.log(A1, A2);
console.log(A1 === A2); //->false
console.log(A1.arr === A2.arr); //->false
console.log(A1.change === A2.change); //->true
A1.change(10);
A2.change(20);

3.factory mode工厂模式

项目：一个产品调用数据库，根据量级或者需求等不同的因素，我们需要让产品切换调用到不同的数据库中 oracle sqlserver mysql -> DB层，根据逻辑或者标识，能切换连接的数据库
工厂模式：工厂可以帮助我们实现调用的切换，或者实现一些中转的处理。

简单的工厂模式

function factory(options) {
    options = options || {};
    let {
        type,
        payload
    } = options;
    if (type === 'array') {
        // 执行A，完成一个逻辑
        return;
    }
    // 执行B，完成另外的逻辑
}
factory({
    type: 'array',
    payload: 100
});
factory({
    type: 'object',
    payload: 'candy'
});

jq中的工厂模式

(function () {
    var jQuery = function (selector, context) {
        // 创建init类的实例
        return new jQuery.fn.init(selector, context);
    };
    jQuery.fn = jQuery.prototype = {
        // ...
    };

    // 需要工厂的转换
    var init = jQuery.fn.init = function (selector, context, root) {};
    init.prototype = jQuery.fn;

    window.$ = jQuery;
})();
$('xxx'); //-> jQuery('xxx') 创建JQ类的实例，调取jQuery.fn原型上的方法

4.Observer观察者模式

观察者一定要有update方法，目标可以对观察者执行一系列的操作即管理观察者。

// 观察者模式:vue2.0响应式原理...
class Observer {
    update(message) {
        // 消息触达，通知update执行
        console.log('消息接收！', message);
    }
}
class Demo {
    update(message) {
        console.log('消息接收！', message);
    }
}

//目标 
class ObserverList {
    constructor() {
        this.observerList = [];
    }
    add(observer) {
        this.observerList.push(observer);
        return this;
    }
    remove(observer) {
        this.observerList = this.observerList.filter(ob => ob !== observer);
        return this;
    }
    get(index) {
        return this.observerList[index];
    }
    count() {
        return this.observerList.length;
    }
}
class Subject {
    observers = new ObserverList;
    add(observer) {
        this.observers.add(observer);
    }
    remove(observer) {
        this.observers.remove(observer);
    }
    notify(...params) {
        for (let i = 0; i < this.observers.count(); i++) {
            let item = this.observers.get(i);
            item.update(...params);
        }
    }
}

let sub = new Subject;
sub.add(new Observer);
sub.add(new Observer);
sub.add(new Demo);
setTimeout(() => {
    sub.notify('hello everybody');
}, 1000);

5.Mediator中介者模式

JavaScript的设计者 js设计模式有哪些_工厂模式

中介者模式和观察者模式区别如上图。

// 中介者
let mediator = (function() {
    let topics = {};
    // 订阅：订阅A组件中的某个方法
    let subscribe = function subscribe(topic, callback) {
        !topics[topic] ? topics[topic] = [] : null;
        topics[topic].push({
            context: this,
            callback
        });
    };
    // 发布：B组件中到某个阶段，可以通知之前订阅的方法执行
    let publish = function publish(topic, ...params) {
        if (!topics[topic]) return;
        topics[topic].forEach(item => {
            let {
                callback,
                context
            } = item;
            callback.call(context, ...params);
        });
    };

    return {
        subscribe,
        publish
    };
})();