[JavaScript知识库]JS设计模式

前言

JS设计模式是一种思想,更规范更合理的管理代码(方便维护,升级,扩展,开发)

单例设计模式

单例设计模式Singleton && Command 命令模式

• 最早期的编程化思想(同样的还有:AMD/CMD/commoJS/ES6Module)
• 避免全局变量污染,
• 实现模块之间的相互调用(提供了模块导出方案)

    //Object
    let obj = {}

    //------高级单例------
    //公共模块 utils
    let utils = (function () {
        function throttle(func, wait) {
            //....
        }
        return {
            throttle: throttle;
        }
    })()

    // a模块
    let AModule = (function () {
        utils.throttle();
        function fn() { };
        function query() { };
        return {
            query: query
        }
    })()
    //b模块
    let BMoudle = (function () {
        utils.throttle();
        function fn() { };
        AModule.query();
        return {}
    })()

Command 命令模式

在实际的开发过程中,我们还可以基于命令模式管控方法的执行顺序,从而有效的实现出对应的功能

    //b模块(实现当前模块下需要完成的所有功能)
    let BMoudle = (function () {
        utils.throttle();
        AModule.query();

        //获取数据的
        function getData() { };
        // 绑定数据的
        function binding() { };
        //处理事件的
        function handle() { };
        //处理其他事情的
        function fn() { };
        return {
            //模块的入口(相当于模块的大脑,控制模块的顺序)
            init() {
                getData();
                binding();
                handle();
                fn();
            }
        }
    })();
    BMoudle.init()

Constructor构造器模式

自定义类和实例 ,(站在面向对象的思想上去构建项目)

私有&公有的属性和方法,

编写公共类库&写一些插件组件,

每一次调用插件我们都是创造这个类的实例,即保证了每个实例之间,有自己的私有属性,互不影响也可以保证一些方法属性还是公用的,有效的避免了代码冗余

  // ES5
    function Fn() {
        this.xxx = xxx;
    }
    Fn.prototype = {
        constructor: Fn,
        query() { },
        //..
    }
    Fn.xxx = xxx;
    //es6 
    class Fn {
        constructor() {
            this.xxx = xxx;
        }
        query() { };
        static xxx() { };
    }
    let f1 = new Fn;
    let f2 = new Fn;

工厂模式Factory

简单的工厂模式(一个方法根据传递的参数不同,做了不同的处理)

   function factory(options) {
        if (options === null) options = {};
        if (!/^(object|function)$/i.test(typeof options)) options = {};
        let { type, payload } = options;
        if (type = 'MYSQL') {
            //...
            return;
        };
        if (type = 'SQLSERVER') {
            //....
            return;
        }
    }
    factory({
        type: 'SQLSERVER',
        payload: {
            root: '',
            pass: '',
            select: ''
        }
    })

JQ中的工厂模式(加工转换)

 (function () {
        function jQuery(selector, content) {
            return new jQuery.fn.init(selector, content)
        }
        jQuery.fn = jQuery.prototype = {
            constructor: jQuery,
            //.....
        };

        //中间转换
        function init(selector, content, root) { }
        jQuery.fn.init = init;
        init.prototype = jQuery.fn;

        if (typeof window !== 'undefined') {
            window.$ = w.jQuery = jQuery
        }
    })()
    // $()--->jQuery的实例

发布订阅设计模式 publish&subscribe

自定义事件的一种方案 灵感来源于 addEventListener DOM2事件绑定,

• 给当前元素的某一个事件行为,绑定多个不同的方法(事件池机制)
• 当事件行为触发的时候,会依次通知事件池中的方法执行
• 支持内置事件(标准事件,)例如 click dbclick mouseenter...

扫盲:dom0级事件绑定原理:给元素对象对应的事件行为的私有属性赋值,dom2往事件池里添加方法

 (function () {
        //自己创造的事件池
        let pond = [];

        //向事件池中注入方法
        function subscribe(func) {
            //去重处理
            if (!pond.includes(func)) {
                pond.push(func)
            }
            //每一次执行,返回的方法是用来移除当前这个新增的这个方法的
            return function unsubscribe() {
                pond = pond.filter(item => item !== func)
            }

        }
        //通知事件池中的方法执行
        subscribe.fire = function fire(...params) {
            pond.forEach(item => {
                if (typeof item === 'function') {
                    item(...params)
                }
            })
        }
        window.subscribe = subscribe
    })();
    let unsubscribe1 = subscribe(function () {
        console.log(1, arguments);
    });
    subscribe(function () {
        console.log(2, arguments);
    });
    subscribe(function () {
        console.log(3);
        unsubscribe1();
    });
    subscribe(function () {
        console.log(4);
    });
    setTimeout(() => {
        subscribe.fire(10, 20, 30)
    }, 1000)
    setTimeout(() => {
        subscribe.fire(10, 20, 30)
    }, 2000)