1、工厂模式（常用） ?
Creator 是个 工厂 产生 众多的 Product
网络异常，图片无法展示
|
new 相关 ？网络异常，图片无法展示|这是 JS 常用 场景 需要熟悉 知道这个 就足够！
网络异常，图片无法展示
|
java 工厂模式
网络异常，图片无法展示
|
- 自己画一下
网络异常，图片无法展示
|
代码 展示
class Product { constructor(name){ this.name = name } init(){ alert('init') } fn1(){ alert('fn1') } fn2(){ alert('fn2') } } class Creator{ create(name){ return new Product(name) } } // test let creator = new Creator() let p = creator.create('p1') p.init() // init p.fn1() // fn1 p.fn2() // fn2 复制代码
- 可以 弹出 内容
非常 重要的 实际应用 场景部分
网络异常，图片无法展示
|
jQuery ?
网络异常，图片无法展示
|
return new jQuery(selector)网络异常，图片无法展示|React.createElement ?
网络异常，图片无法展示
|
网络异常，图片无法展示
|
我们需要知道 这个 React.createElement 做了 什么？
网络异常，图片无法展示
|
Vue 异步组件
网络异常，图片无法展示
|
验证
网络异常，图片无法展示
|
2、单例模式（常用） ?
注意 每次 获取的东西也是相同的 ， 即 ===js 常规使用 闭包 + 立即执行函数 实现十分重要的思想： 如果没有则初始化 如果有则使用网络异常，图片无法展示|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
java 版本 演示
网络异常，图片无法展示
|
网络异常，图片无法展示
|
js 版本 利用闭包 但必须 注释 因为 外部new 不会报错
网络异常，图片无法展示
|
网络异常，图片无法展示
|
- 代码 展示 一下
class SingleObject{ login(){ console.log('login...') } } SingleObject.getInstance = (function () { let instance return function () { if(!instance){ instance = new SingleObject() } return instance } })() // test const obj1 = SingleObject.getInstance() obj1.login() const obj2 = SingleObject.getInstance() obj2.login() // 单例模式 两者必须相同 console.log('obj1 ?=== obj2', obj1 === obj2) 复制代码
- 执行 结果
网络异常，图片无法展示
|
- 不能控制的情况
// 无法完全控制 const obj3 = new SingleObject() console.log('obj1 ?=== obj3', obj1 === obj3) // obj1 ?=== obj3 false 复制代码
*单例模式 场景
网络异常，图片无法展示
|
网络异常，图片无法展示
|
- 代码 展示
class LoginStatus { constructor(){ this.state = 'hide' } show(){ if(this.state === 'show'){ alert('已经显示') return } this.state = 'show' console.log('登录框显示成功') } hide(){ if(this.state === 'hide'){ alert('已经隐藏') return } this.state = 'hide' console.log('登录框隐藏成功') } } LoginStatus.getInstance = (function () { let instance return function () { if(!instance){ instance = new LoginStatus() } return instance } })() // test let login1 = LoginStatus.getInstance() login1.show() // 登录框显示成功 let login2 = LoginStatus.getInstance() login2.hide() // 登录框隐藏成功 console.log(login1 === login2) // true 复制代码
网络异常，图片无法展示
|
网络异常，图片无法展示
|
3、适配器模式（常用） ?
新 老代码 不兼容 优先考虑 适配器解决 不要 强制 全局替换
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
- 代码 演示
class Adaptee{ specificRequest(){ return '美国标准插头' } } class Target{ constructor(){ this.adaptee = new Adaptee() } request(){ return `${this.adaptee.specificRequest()} - 转化器 - 中国标准插头` } } let target = new Target() let res = target.request() console.log(res) // 美国标准插头 - 转化器 - 中国标准插头 复制代码
- 结果 非常 nice
网络异常，图片无法展示
|
- 补充手动画一遍
网络异常，图片无法展示
|
使用场景 展示 重要 ！
网络异常，图片无法展示
|
网络异常，图片无法展示
|
新 老代码 不兼容 优先考虑 适配器解决 不要 强制 全局替换
网络异常，图片无法展示
|
- 执行 适配后 代码 会走到 上面的 ajax 方法 中
- 代码展示 vue computed
1、引用 vue cdn 2、起一个 http-server 服务 3、实现一个 字符串 逆序效果 复制代码
<body> <div id="test"> <p>{{message}}</p> <p>{{reversemessage}}</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el: "#test", data: { message: "Hello World", }, computed: { reversemessage: function () { // 先转为数组 然后 反转 再转为 字符串 return this.message.split("").reverse().join(""); }, }, }); </script> 复制代码
- 注意 数组 和 字符串 常用转化
网络异常，图片无法展示
|
- 设计模式 验证
网络异常，图片无法展示
|
