js设计模式

19.设计模式(csdn)

1.单例模式

方式一:

   // 写法1 
        class Singleton {
            constructor() {
            }
        }
        // 闭包的模式
        Singleton.getInstance = (function () {
            let instance;
            return function () {
                if (!instance) {
                    instance = new Singleton()
                }
                return instance
            }
        })();
        var s1 = new Singleton.getInstance()
        var s2 = new Singleton.getInstance()
            console.log(s1 == s2);//true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方式二:

  // 写法2 静态方法new实例
        class Person{
            static getInstance(){
                if (!Person.instance) {
                    Person.instance=new Person()
                }
                return Person.instance
            }
        }
        var p1=Person.getInstance()
        var p2=Person.getInstance()
        console.log(p1==p2);//true
1
2
3
4
5
6
7
8
9
10
11
12

单例模式对话框案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .dialog {
            width: 500px;
            height: 350px;
            border: 1px solid #000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        .header {
            height: 40px;
            display: flex;
            background-color: #ccc;
            justify-content: space-between;
            align-items: center;
            line-height: 40px;
        }

        .close {
            width: 50px;
            height: 40px;
            background-color: orange;
            text-align: center;
            line-height: 40px;

        }
    style>
head>

<body>
    
    <script>
        class Dialog {
            constructor() {
                this.el = null
                this.el = document.createElement("div")
                this.el.className = "dialog"
                let strHTML = `
                
                    标题
                    关闭
                
                
                `
                this.el.innerHTML = strHTML
                document.body.appendChild(this.el)
                this.close()
            }
            // init() {
                // this.el = document.createElement("div")
                // this.el.className = "dialog"
                // let strHTML = `
                // 
                //     标题
                //     关闭
                // 
                // 
                // `
                // this.el.innerHTML = strHTML
                // document.body.appendChild(this.el)
                // this.close()
            // }
            show(options){
                this.el.style.display="block"
                this.el.querySelector(".title").innerHTML=options.title
            }
            hide(){

                this.el.style.display="none"
            }
            close(){
                let self=this
                this.el.addEventListener("click",function(e){
                    if (!e.target.className=="close") {
                        return
                    }
                    self.hide()
                })
            }
        }
        Dialog.getInstance = (function () {
            let instance
            return function () {
                if (!instance) {
                    instance = new Dialog()
                    // instance.init()
                }
                return instance
            }
        })()
       new Dialog.getInstance()
       new Dialog.getInstance().show({
        title:"小小易啊"
       })
       setTimeout(function(){
        new Dialog.getInstance().hide()
       },5000)
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

2.工厂模式

    // 工厂模式1
        function animal(o) {
            var obj = new Object()
            obj.name = o.name
            obj.age = o.age
            return obj
        }
        var cat = animal({ name: "cat", age: 2 })
        var dog = animal({ name: "dog", age: 2 })
        // 工厂模式2
        class Man {
            getName() {
                console.log("男");
            }
        }
        class Woman {
            getName() {
                console.log("女");
            }
        }
        class Factory {
            static create(type) {
                switch (type) {
                    case Man.name:
                        return new Man()
                        break;
                    case Woman.name:
                        return new Woman()
                        break;
                    default:
                        break;
                }
            }
        }
        var m=Factory.create("Man")
        m.getName()//男
        var w=Factory.create("Woman")
        w.getName()//女
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3.构造者模式

 // 构造器模式1
        function car(color, speed, price) {
            this.color = color
            this.speed = speed
            this.price = price
            this.showColor = function () {
                console.log(this.color);
            }
        }
        var c = new car("yellow", "200", 500)
        c.showColor()
        // 构造器模式2
        // 1.产品
        class Computer{
            constructor(name,cpu,memory,storage){
                this.name=name
                this.cpu=cpu
                this.memory=memory
                this.storage=storage
            }
        }
        // 2.构造产品的工厂
        class ComputerBuilder{
            setName(name){
                this.name=name
                return this
            }
            setCpu(num){
                this.cpu=num
                return this
            }
            setMemory(num){
                this.memory=num
                return this
            }
            setStorage(num){
                this.storage=num
                return this
            }
            builder(){
                return new Computer(this.name,this.cpu,this.memory,this.storage)
            }
        }
        // 3.给别人传参数，他帮我们找产品
        let pc=new ComputerBuilder()
        .setName("华为")
        .setCpu("I9")
        .setMemory("16G")
        .setStorage("2T")
        console.log(pc);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

4.订阅者模式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    style>
head>

<body>
    <div class="box box1">
        <button>发送消息button>
    div>
    <div class="box box2">
        <button id="no">拒绝接收button>
        <div class="msg">div>
    div>
    <div class="box box3">
        <div class="msg">div>
    div>
    <script>
        // 把一个个div,理解为一个个组件,组件之间通信可以使用订阅者模式
        const obServer = {
            list: {},
            $on(event, callback) {
                // 如果指定的属性名称不存在,就给他一个空数组
                if (this.list[event] == undefined) {
                    this.list[event] = []
                }
                this.list[event].push(callback)
            },
            $off(event, callback) {
                if (this.list[event] == undefined) {
                    return
                }
                // 拿着传入的函数,去指定的数组里面找,并且返回下标
                let index = this.list[event].findIndex((item) => {
                    item == callback
                })
                if (index == -1) {
                    return
                }
                this.list[event].splice(index, 1)
            },
            $emit(emit, o) {
                // 判断是否有值,没有就终止
                if (!this.list[event]) {
                    return
                }
                // 有就遍历
                this.list[event].forEach(item => {
                    item.call(null, o)
                });
            }
        }
        var oBtn = document.querySelector("button")
        var oMsg = document.querySelectorAll(".msg")
        oBtn.onclick = function () {
            obServer.$emit("send", "我发送消息")
        }
        const fn1 = (str) => {
            oMsg[0].innerHTML = str
        }
        obServer.$on("send", fn1)
        const fn2 = (str) => {
            oMsg[1].innerHTML = str
        }
        obServer.$on("send", fn2)
        // 解绑
        var no = document.querySelector("#no")
        no.onclick = function () {
            obServer.$off("send", fn1)
        }
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

5.代理模式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        const oImage = (function () {
            // 自执行函数,默认执行,就创建一个图片,并且添加到页面上
            var oImg = document.createElement("img")
            document.body.appendChild(oImg)
            return {
                setSrc(url) {
                    oImg.src = url
                }
            }
        })()
        // 2.代理
        const proxyImage = (() => {
            // 1.创建一个img对象
            const img = new Image()
            // 2.给img设置url路径,就会去加载,如果加载成功,就会执行onload事件
            img.onload = function () {
                // 有效图片
                oImage.setSrc(this.src)
            }
            return {
                setSrc(url) {
                    oImage.setSrc("./img/loading.gif")
                    img.src = url
                }
            }
        })()
        // 代理操作
        proxyImage.setSrc("https://img1.baidu.com/it/u=3320660778,1222820597&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=734")
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

6.装饰器模式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        // 装饰器模式:不破坏原来的代码,可以对原来的代码进行功能'增强'
        function oldFunction() {
            console.log("我是老的方法");
        }
        var _oldFunction = oldFunction
        function newFunction() {
            _oldFunction()
            console.log("我是新添加的方法");
        }
        oldFunction()
        newFunction()

        // ES6类的实现装饰器模式
        class OldFunction {
            show() {
                console.log("我是老的方法类");
            }
        }
        // 装饰器
        class Decorator {
            constructor(cls) {
                this.oldCls = cls
            }
            newFunction(){
                console.log("我是新添加的方法类");
            }
            show(){
                this.newFunction()
                this.oldCls.show()
            }
        }
        new Decorator(new OldFunction).show()
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

7.策略模式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <script>
        // 规则对象
        const Rules = {
            "A": function (num) {
                return num * (1 + 0.9)
            },
            "B": function (num) {
                return num * (1 + 0.6)
            },
            add(level, callback) {
                this[level] = callback
            },
            remove(level) {
                if (this[level]) {
                    delete this[level]
                }
            }
        }
        // 使用规则
        function useCalcRules(level, num) {
            //如果规则,可以执行
            if (Rules[level]) {
                return Rules[level].call(null, num)
            }
        }
        console.log(useCalcRules("A",1000));
        // 定义规则
        const fn1 = function (num) {
            return num * 0.01
        }
        // 添加规则
        Rules.add("F", fn1)
        // 使用规则
        console.log(useCalcRules("F",1000));
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

8.适配器模式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        class PluginA{
            getName(){
                console.log("我是插件A");
            }
        }
        class PluginB{
            getName(){
                console.log("我是插件B");
            }
        }
        class Target{
            constructor(Plugin){
                this.plugin=new Plugin
                console.log(this);
                
            }
            getName(){
                this.plugin.getName()
            }
        }
        new Target(PluginA).getName()
        new Target(PluginB).getName()
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关阅读:
金仓数据库 Pro*C 迁移指南（3. KingbaseES Pr*oc 对 Oracle Pro*c 的兼容）
java计算机毕业设计ssm求职与招聘网站的设计与实现
 重装系统后没声音如何解决
 前端开发：JS中向对象中添加对象的方法
 Python学习笔记--Python关键字yield
swm34s基于RT-Thread系统使用SDIO驱动读写SD卡
 在input元素下面做一个弹出框，点击弹出框弹出框不消失，点击其他地方弹出框消失
 MATLAB小技巧（19）矩阵分析--主成分分析
 Python编程集合
 剑指 Offer 27. 二叉树的镜像
原文地址：https://blog.csdn.net/qq_46372132/article/details/133798852