JS设计模式

JS中的设计模式就是一种思想，基于这种思想可以有效的管理我们的代码 设计模式就是"锦上添花"，其实如果不使用设计模式，我们也可以实现日常的项目开发，但是就会造成代码冗余，可读性差等

  设计模式
   
    

    
   
     5. 观察者设计模式
     +...
     设计模式就是一种思想，基于这种思想可以有效的管理我们的代码 设计模式就是"锦上添花"！！

1.单例设计模式 解决了全局变量污染的问题，还可以保证模块间方法的相互访问[最早的模块化开发的思想]

 //单例模式  避免多人开发使用相同变量造成变量污染
    let AModule = (function() {
        let name = '磊仔';
        let age = 25;
        const query = () => {}
        window.query = query;
        /* 暴露API */
        //将局部声明函数暴露/挂在window上  供其他模块使用
        //还是可能导致全局变量的污染
        /* 返回对象-外层变量接收 */
        return {
            name,
            query,
        }
    })();
    (function() {
        let name = 'aaa';
        AModule.query();
    })();

2. 工厂设计模式

1.利用函数封装的特点 把重复做的事情封装起来实现"低耦合高内聚"：减少页面中冗余代码 提高代码重复使用率，提高开发效率
2.在JQ源码中基于工厂模式实现把jQuery当做普通方法执行，也可以创造一个实例

    //工厂模式
    let person = {
        name: '张三',
        age: 25,
    }
    let person1 = {
            name: '张三',
            age: 25,
        } //遇到需要重复创造对象
    const factory = function factory(name, age) {
            return {
                name,
                age,
            }
        } //相当于一个工厂  避免重复进行一些操作

工厂模式第二种方式 工厂中转 普通函数执行正常情况下无法创造一个实例 需要经过中转

 (function() {
     var jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context)
            //返回一个init的实例 init原型指向jQuery.fn的原型 也相当于创造了一个jquery实例
     }
      jQuery.fn = jQuery.prototype = {
          //供实例调用的公共属性方法
     }
       var init = jQuery.fn.init = function(selector, context) {
          //...
    }
     init.prototype = jQuery.fn
           /* 暴露API */
     window.jQuery = window.$ = jQuery;
})();
$('.box'); //jQuery('.box');  把闭包中的jQuery当做普通函数执行

3. 构造函数模式

充分利用面向对象思想 有效地实现了实例与实例之间的"独立性"以及"共有性",适用于插件组件封装 例如：我们的Swiper轮播图插件，Swiper本身就是一个类，VUE也是一个类 每一次使用都会创建一个实例

  const fn = function fn(aa, bb) {
            this.name = aa;
            this.age = bb;
        }
   let fn1 = new fn('张三',20)

4. Promise承诺者设计模式 基于Promise和async/await可以有效管理异步编程的代码 防止回调地狱

//Promise
    let p1 = new Promise((resolve, resject) => {
        resolve();
    }).then(data => {
        console.log(data);
    }, err => {
        console.log(err);
    }).catch(err => {
        console.log(err);
    });
    //async await
  const query = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve({ code: 0, data: [10, 20, 30] });
                reject('请求失败');
            }, 2000);
        });
    };

    (async function aa() {
        await query();
        console.log('请求成功');
    })().catch(err => {
        console.log(err);
    })

5.发布订阅设计模式 || 观察者设计模式

    /* 发布订阅模式 */
    let ary = []; //事件池 事件名单
    const on = function on(fn) {
        ary.push(fn); //向名单中添加
    }
    const off = function off(fn) {
        ary.filter(item => item != fn); //将指定事件删除
    }
    const emit = function emit() {
            ary.forEach(item => {
                item();
            })
        }