单例模式
点击查看代码
<script>
// 单例模式 => 自始至终都只能创建一个对象 让对象唯一存在
let Wife = (function(){
class Person{
constructor(name){
this.name = name
}
}
let instance = null
function getInstance(name){
// 获取实例的方法
if(!instance) instance = new Person(name)
return instance
}
// 返回创建实例函数
return getInstance
})()
// 单例模式
const w1 = Wife("冰冰")
const w2 = Wife("菲菲")
console.log(w1); //冰冰
console.log(w2); //冰冰
console.log(w1 === w2); //true
</script>
使用单例模式实现一个简易版的vuex3
<body>
<button onclick="fn1()">++</button>
<button onclick="fn2()">--</button>
<p></p>
<script>
// 使用单例模式实现一个简易版的vuex3
let Utils = (function(){
// 存储数据的
let state = {
count:1
}
// 操作数据
function mutation(payload){
// 如果payload => increment 我们就让state.count++
switch(payload){
case "increment":
state.count++
break
case "decrement":
state.count--
break
}
// 如果payload => decrement 我们就让state.count--
}
// 将数据返回到外部
function getState(){
return state //返回一个对象
}
return { //返回两个函数构成的对象
mutation,
getState
}
})()
console.log(Utils === Utils);
// 获取仓库里面的数据源
function fn(){
const p = document.querySelector("p")
// 获取数据源
p.innerHTML = Utils.getState().count
}
fn()
// 点击++ 让仓库里面的数据++
function fn1(){
// 让仓库里面的count++
Utils.mutation("increment")
// 渲染到页面
fn()
}
// 点击-- 让仓库里面的数据--
function fn2(){
// 让仓库里面的count--
Utils.mutation("decrement")
// 渲染到页面
fn()
}
</script>
</body>
组合模式
点击查看代码
策略模式
点击查看代码
观察者模式
点击查看代码