前言：聊聊 JS 里那些常见的设计模式

说实话，前端老手们经常提到设计模式，听起来像高大上的东西。

可是其实它们就是一些代码写法的套路，帮你把乱七八糟的代码变得geng有章法。

今天咱们就随性地聊聊 JavaScript 常见的几大设计模式，顺便插播一下“为什么百度不收录”这件事。

单例模式

单例顾名思义，就是只Neng有一个实例。

比如全局状态管理、配置中心之类的场景。

实现方式Ke以是直接在类内部保存唯一实例，也Ke以用闭包来封装。

class Store {
  static #instance = null;
  static getInstance {
    if  Store.#instance = new Store;
    return Store.#instance;
  }
  constructor {
    if  throw new Error');
    this.state = {};
    this.listeners = ;
  }
  set {
    this.state = val;
    this.listeners.forEach);
  }
}

使用时：

const s1 = Store.getInstance;
const s2 = Store.getInstance;
console.log; // true

小技巧：懒加载版单例

不想一上来就实例化？那就等到真的需要的时候再创建吧。

工厂模式

工厂负责“造”对象，调用方只需要告诉它要造什么不必关心细节。

比如 UI 库里不同类型的组件，douKe以交给工厂统一生成。

class Button {
  constructor { this.label = opts.label; }
}
class Input {
  constructor { this.placeholder = opts.placeholder; }
}
class ComponentFactory {
  static create {
    if  return new Button;
    if  return new Input;
    throw new Error;
  }
}

使用示例：

const btn = ComponentFactory.create;
const inp = ComponentFactory.create;

模块模式

模块让我们把私有变量和公开接口隔离开来防止全局污染。

Zui经典的写法就是 IIFE + 闭包。

const CounterModule =  {
  let count = 0; // 私有
  return {
    inc { count++; },
    dec { count--; },
    get { return count; }
  };
});

ES6 的模块化

现在大家基本dou用 import / export，背后原理跟上面的思路是一致的，只是语法geng友好。

观察者模式

这玩意儿是“一对多”的通知机制，被观察者状态变化时会通知所有订阅者。

前端事件系统、Vue/React 的响应式原理dou离不开它。

class Subject {
  constructor { this.observers = ; }
  subscribe { this.observers.push; }
  unsubscribe {
    this.observers = this.observers.filter;
  }
  notify {
    this.observers.forEach);
  }
}

举个小案例：简易事件总线

const bus = new Subject;
bus.subscribe);
bus.subscribe);
bus.notify;
// 输出 A: hello world
//      B: hello world

策略模式

策略就是把一系列算法封装成独立可切换的对象，让业务代码在运行时自由选择。

比如表单校验、排序方式douKe以用策略来实现。

const strategies = {
  required { return value ? '' : '必填'; },
  email {
    const re = /^+@+\.+$/;
    return re.test ? '' : '邮箱格式错误';
  }
};
function validate {
   for  {
     const err = strategies;
     if  return err;
   }
   return '';
}

小贴士：动态添加新策略hen简单，只要往对象里塞函数就行啦。 装饰器模式

装饰器让我们在不修改原始对象的情况下给它添功Neng。

常见于给函数加日志、缓存等横切关注点。

function logger {
   return function  {
     console.log;
     const result = fn.apply;
     console.log;
     return result;
   };
}
function add{return a+b;}
const loggedAdd = logger;
loggedAdd;
// 控制台会先打印参数再打印返回值

代理模式

代理其实就是为另一个对象提供一个替身，控制对原对象的访问权限或Zuo额外处理。

E​S6 原生 Proxy 超强大，Ke以拦截几乎所有操作。

const target = { name: '张三' };
const handler = {
   get{
      console.log;
      return obj;
   },
   set{
      console.log;
      obj = value;
      return true;
   }
};
const proxyObj = new Proxy;
proxyObj.age = 30; // 设置属性 age 为 30
console.log; //读取属性 name 并输出 张三

P.S. 小心别把 Proxy 用得太花哨，否则调试会hen头疼，哈哈哈… "为什么百度不收录" 的小插曲 🤔

说实话，有时候你写了再好的文章，也可Neng被百度忽略掉，这到底是为啥呢？

# 内容质量不足#：Ru果文章太短或者缺乏实质性信息，爬虫会觉得价值不高。

# 重复内容#：Baidu 对重复度敏感，同一段文字出现在多个页面会被降权。

# 技术实现问题#：Sitemap 没配置好或者 robots.txt 把页面屏蔽了dou可Neng导致“不收录”。

# 外链与内部链接结构#：没有足够的入口链接，也会让搜索引擎找不到你的页面。

A 小技巧：

* 写长一点，多加点细节；

* 用自然语言描述核心概念；

* 确保页面Neng被爬虫正常访问；

中介者模式 & 职责链 简述 Mediator 中介者——让同事之间少点直接依赖吧！

class ChatRoom {
   constructor{ this.users=;}
   register{
      this.users.push;
      user.room=this;
   }
   broadcast{
      this.users.forEach u.receive;});
   }
}
class User{
   constructor{this.name=name;}
   send{this.room.broadcast;}
   receive{console.log;}
}
const room=new ChatRoom;
const alice=new User,bob=new User,carl=new User;
room.register;room.register;room.register;
alice.send;
/* 输出：
Bob 收到：大家好！
Carl 收到：大家好！
*/

COR——责任链让请求沿着链条传递，直到有人处理为止~

class Handler{
   setNext{this.next=handler;return handler;}
   handle{ifreturn this.next.handle;}
}
class AuthHandler extends Handler{
   handle{
      ifreturn '未登录';
      return super.handle;
   }
}
class RoleHandler extends Handler{
   handle{
      ifreturn '权限不足';
      return super.handle;
   }
}
class FinalHandler extends Handler{
   handle{return '业务成功执行';}
}
const chain=new AuthHandler
        .setNext)
        .setNext);
console.log); //业务成功执行
console.log); //未登录

P.S. 小结 & 温馨提醒 🎉

- 单例让全局资源只有一份，不要滥用哦，不然测试会变麻烦。

- 工厂把创建逻辑集中管理，让代码geng易 。 哈哈，你以后遇到新需求，只要改工厂就行了。

- 模块化是防止全局污染的根本手段，配合闭包NengZuo到真正的数据私有化。 不对不对，我刚才说的是 ES6 的 import/export geng简洁，对闭包还是要慎重使用。

- 想让组件之间解耦？观察者和发布-订阅是你的好伙伴。 咱就是说这两个名字听起来差不多，其实实现细节还是有区别的，你懂的。

- 策略、装饰、代理这些“高级玩意儿”，平时多练练小案例，就Neng在项目里自如切换了。 那个那个，有时候别忘了先考虑是否真的需要这些花哨结构，要不然代码反而geng乱。

...

---