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>
- 注意 数组 和 字符串 常用转化
- 设计模式 验证
