JavaScript常用设计模式总结+代码实现

最新推荐文章于 2021-10-29 21:20:29 发布
最新推荐文章于 2021-10-29 21:20:29 发布
阅读量186 收藏 1
点赞数 1
分类专栏： JavaScript 设计模式 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csr_warrior/article/details/120386080
版权

1. 观察者模式

设计模式思路:

  • 变化的数据作为被观察者, 受改数据影响的元素/对象作为被观察者
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>观察者模式</title>
    <style>
        .container {
            width: 400px;
            background-color: mediumpurple;
            margin: 0 auto;
            overflow: hidden;
            text-align: center;
            padding: 30px
        }

        h2 {
            margin: 20px 0;
            color: indianred;
        }

        input {
            width: 80%;
            border-radius: 5px
        }

        .boxes {
            margin: 30px auto;
            width: 80%;
        }

        .box {
            width: 100%;
            height: 40px;
            background-color: #e5e6e4;
            border-radius: 10px;
            margin-bottom: 7px;
            line-height: 40px;
            font-weight: bold;
        }

        .active {
            background-color: #d2561c;
            color: #e5e6e4;
        }
    </style>

</head>
<body>
<div class="container">
    <h2>观察者模式实现</h2>
    <label>
        <input type="text">
    </label>
    <div class="boxes">
        <!-- <div class="box" id="a">包含a</div>
         <div class="box" id="b">包含b</div>-->
    </div>
</div>
<script type="text/javascript">

    /**
     * 表单的数据, 作为被观察者
     */
    class Input {
        constructor(el) {
            this.observers = [];
            el.addEventListener("input", e => {
                this.notifyAll(e.target.value);
            })
        }

        notifyAll(value) {
            this.observers.forEach(ob => {
                ob.notify(value)
            })
        }

        addObserver(observer) {
            this.observers.push(observer)
        }
    }

    /**
     * 观察者基类, 可用继承此类的方式定义观察者
     */
    class Observer extends DocumentFragment {
        constructor(txt) {
            super();
            this.div = document.createElement("div")
            this.div.className = "box"
            this.div.innerText = txt;
            document.querySelector(".boxes").appendChild(this.div)
        }

        notify(value) {
            this.div.classList.toggle('active', this.handle(value))
        }
    }

    /**
     * 观察者实现类
     */
    class DefaultObserver extends Observer {
        constructor(txt) {
            super(txt);
            this.txt = txt;
        }

        handle(value) {
            return value.indexOf(this.txt) !== -1
        }
    }

    class NumberObserver extends Observer {
        constructor(txt) {
            super(txt);
        }

        handle(value) {
            return /\d/.test(value)
        }
    }

    const ipt = new Input(document.querySelector("input"));
    ipt.addObserver(new DefaultObserver("a"));
    ipt.addObserver(new DefaultObserver("b"));
    ipt.addObserver(new DefaultObserver("c"));
    ipt.addObserver(new NumberObserver('包含数字'))

</script>
</body>
</html>

2. 单例模式

2.1 设计原则

  • 无论程序员手动创建多少个对象, 存在的示例永远都只有一个

2.2 实现思路

  1. 使用闭包的特性, 一个函数内部返回另一个函数;
  2. 如果示例没有被创建过, 那么调用用户传递进来的回调函数,进行对象的创建并返回; 且将结果赋值给返回函数外部的那个变量(result)
  3. 如果示例已经被创建, 那么result必然不为null, 直接将result返回就可以啦, 这样就不会在去创建一个新对象了

2.3 Code

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>闭包实现单例模式</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body>
<button id="btn">登录</button>
<script>
    console.log(window)
    const createLogin = function (a, b, c) {
        console.log(a, b, c)
        const div = document.createElement('div')
        div.innerHTML = "登录弹窗"
        div.style.display = "none"
        document.body.appendChild(div)
        return div
    }

    const getSingle = function (cb) {
        let result;
        return function () {
            return result || (result = cb.apply(this, arguments))
        }
    }

    const create = getSingle(createLogin)
    document.getElementById("btn").onclick = () => {
        const element = create(1, 2, 3)
        element.style = {
            display: "block",
            color: "red"
        }
    }
</script>
</body>
</html>

3. 适配器模式

3.1 目的

  1. 为了解决两个接口不兼容的情况
  2. 不需要改变已有的接口, 通过包装一层的方式实现两个接口之间的正常协作
/**
 * 适配器模式
 */

//已有地图的接口
const googleMap = {
        show() {
            console.log("rendering google map...");
        }
    }

const baiduMap = {
    display() {
        console.log("rendering baiduMap...")
    }
}

//已有的渲染接口
const renderMap = function (map) {
    if (map.show instanceof Function) {
        map.show()
    }
}

//定义百度地图的适配器, 适配renderMap的show方法
const baiduMapAdapter = {
    show() {
        return baiduMap.display()
    }
}

//测试
renderMap(googleMap) //rendering google map...
renderMap(baiduMapAdapter) //rendering baiduMap...

4. 装饰模式

4.1 目的

  1. 不需要改变已有接口, 给对象添加额外的功能

4.2 实现

/**
 * 装饰模式
 */
function readonly(target, key, descriptor) {
    descriptor.writeable = false;
    return descriptor;
}

@readonly
class Man {
    name = "naruto"
}

let m = new Man()
m.name = "sasuke"

console.log(m.name)

5. 代理模式

5.1 目的

  1. 某些情况下,一个对象不适合或不能直接引用另一个对象, 而代理对象可以再两个对象之间起到中介的作用

5.2 实现

/**
 * 代理模式
 */

//示例1: 司机开车

class Car {
    drive(): string {
        return "driving"
    }
}

class Driver {
    public age: number;

    constructor(age: number) {
        this.age = age;
    }
}

class CarProxy {
    private driver: Driver;

    constructor(driver: Driver) {
        this.driver = driver;
    }

    drive(): string {
        if (this.driver.age < 18) {
            return "to yong to drive"
        }
        return new Car().drive();
    }
}

const driver = new Driver(19);
// @ts-ignore
const result = new CarProxy(driver).drive();

console.log(result);


//示例2: es6-proxy,在目标对象之间架设一层拦截
// @ts-ignore
const obj = {}

const proxy = new Proxy(obj, {
    get(target: {}, p: string | symbol, receiver: any): any {
        return Reflect.get(target, p, receiver)
    },
    set(target: {}, p: string | symbol, value: any, receiver: any): boolean {
        return Reflect.set(target, p, value, receiver)
    }
})


// @ts-ignore
proxy.count = 1;
// @ts-ignore
++proxy.count

// @ts-ignore
console.log(obj.count) //2

6. 发布, 订阅模式

6.1 目的

  • 实现对象间多对对的依赖关系
  • 通过事件中心管理多个事件
  • 目标对象并不直接通知观察者, 而是通过事件中心来派发通知

6.2 实现

//消息定义发布模式

declare interface IPubsub {
    list: Array<unknown>,
    addListener: (key: string, fn: Function) => void,
    publish: () => void
    removeListener: (key: string, fn: Function) => void | false
}

const shopObj: IPubsub = {
    //缓存列表,用来存放订阅函数
    list: [],
    //添加订阅者
    addListener: function (key, fn) {
        if (!this.list[key]) {
            this.list[key] = [];
        }
        this.list[key].push(fn);

    },
    //发布消息
    publish: function () {
        let key = Array.prototype.shift.call(arguments);
        const funcs = this.list[key];
        if (!funcs || funcs.length === 0) {
            console.log("no relevant subscriber")
            return
        }
        for (let i = 0; i < funcs.length; i++) {
            funcs[i].apply(this, arguments)
        }
    },
    //取消订阅

    removeListener(key: string, fn?: Function | null): void | false {
        const fns = this.list[key]
        if (fn === null) {
            fns.length = 0;
            return
        }
        if (!fns) {
            fns && (fns.length = 0);
            return false
        } else {
            for (let i = fns.length - 1; i >= 0; i--) {
                let _fn = fns[i]
                if (_fn === fn) {
                    fns.splice(i, 1)
                }
            }
        }
    }

}

//订阅者1
shopObj.addListener("xm", size => {
    console.log(`xm size is ${size}`)
})

//订阅者2
shopObj.addListener("张三", size => {
    console.log(`zhangsan size is ${size}`)
})

// @ts-ignore
//通知张三
shopObj.publish("张三", 120)

//张三取消订阅
shopObj.removeListener("张三", null)
// @ts-ignore
shopObj.publish("张三", 120)
//结果: no relevant subscriber

7. 策略模式

7.1 目的

  • 策略模式指的是定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。
  • 一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类/策略对象，策略类封装了具体 的算法，并负责具体的计算过程。 第二个部分是环境类Context，Context 接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明 Context中要维持对某个策略对象的引用。

7.2 实现: 模拟antd表单校验组件逻辑

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>表单校验策略</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .my-form {
            width: 400px;
            margin: 50px auto;
            text-align: justify
        }

        .my-form label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 0 15px;
        }

        .my-form label input {
            width: 280px;
        }
    </style>
</head>
<body>
<div class="my-form">
    <form action="">
        <label for="usrName">
            <span>请输入用户名:</span>
            <input type="text" id="usrName" name="usrName">
        </label>
        <label for="pwd">
            <span>请输入密码: </span>
            <input type="password" id="pwd" name="password">
        </label>
        <label for="email">
            <span>请输入邮箱: </span>
            <input type="text" id="email" name="email">
        </label>
        <label for="tel">
            <span>请输入手机号: </span>
            <input type="text" id="tel" name="tel">
        </label>
        <button type="submit">提交表单</button>
    </form>
</div>
<script src="./StrategyMode.js"></script>
</body>
</html>

/**
 * 策略模式. 实现表单验证的策略
 */

//策略对象,封装了具体的表单验证的算法逻辑
const ruleMap = {
        notNull(val: string, msg: string): string {
            if (!val.trim()) {
                return msg;
            }
        },
        isEmail(val: string, msg: string): string {
            const ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (!ePattern.test(val)) {
                return msg;
            }
        },
        isPassword(val: string, msg: string): string {
            const pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
            if (!pPattern.test(val)) {
                return msg;
            }
        },
        isTel(val: string, msg: string): string {
            const mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if (!mPattern.test(msg)) {
                return msg;
            }
        }
    }

//环境类, 接受用户输入的数据
class Validator {
    private caches: Function[];

    constructor() {
        this.caches = []
    }

    addRules(ruleKey: string, ...args): void {
        const ruleFunc = ruleMap[ruleKey]
        this.caches.push(function () {
            return ruleFunc(...args)
        })
    }

    validate() {
        const errList = [];
        this.caches.forEach(fn => {
                const result = fn();
                if (result) {
                    //说明有错误信息
                    errList.push(result)
                }
            }
        )
        if (errList.length !== 0) {
            return Promise.reject(errList)
        } else {
            return Promise.resolve("验证通过!")
        }
    }
}

//表单绑定提交事件
const form: HTMLFormElement = document.querySelector(".my-form form")

form.addEventListener("submit", (event) => {
    event.preventDefault();
    event.stopPropagation();
    let formData = new FormData(form)
    console.log(formData)
    const validator = new Validator();
    validator.addRules("notNull", formData.get("usrName"), "请输入用户名")
    validator.addRules("isEmail", formData.get("email"), "邮箱格式不正确")
    validator.addRules("isPassword", formData.get("password"), "密码格式不正确")
    validator.addRules("isTel", formData.get("tel"), "手机号格式不正确")

    validator.validate().then((res) => {
        console.log(res)
    }).catch(error => {
        console.log(error)
    })

})
NSC丶warrior
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript常用设计模式与设计原则总结
qq_42259940的博客
08-12 200
单一职责原则 SRP 【定义】单一职责原则的定义是‘引起变化的原因’，如果你有两个原因去修改一个方法，说明这个方法有两个职责，承担的职责越多你需要修改他的可能性就越大，修改代码总是件危险的事情，特别是两个职责耦合在一起的时候一句话概括：一个对象（方法）只做一件事 【优点】降低了单个类或者对象的复杂度，按照职责把对象分解成更小的粒度，这有助于代码的复用，也有利于进行单元测试。当一个职责需要变更的时候，不会影响到其他的职责。 【缺点】增加编码复杂度，同时增加对象之间联系的难度（要明确的是，并不是所有的职责都应.
40种javascript设计模式总结及实例代码演示
林中路
09-27 1428
40种javascript设计模式总结及实例代码演示 前言 讲设计模式的书很多，但是专讲js设计模式的书不多，比较著名的就是曾琛老师的《javascript设计模式与开发实践》，里面讲了14种javascript设计模式以及这些设计模式所遵循的几大编码原则。 无意中发现了百度张容铭的《javascript设计模式》一书，竟然讲了40种设计模式。 尽管也同意曾琛老师说的，由于js中本来一切都是对象...
前端代码编码和设计规范系列——JavaScript编程规范
caogenxie的专栏
07-15 4298
良好的编程规范对于软件的开发与维护，至关重要！他不仅可以提高代码的可读性、可靠性、有效性、健壮性，而且利于帮助开发人员开发和维护代码。对于一个团队协作的项目来说，人员的变动，一个良好的编程规范，有助于后续开发者和新手快速了解项目代码所要表现的含义。
关于js处理的一些公用代码收集.(代码+demo)
striker_un的专栏
04-01 718
关于js字符串的.prototype 的一个扩展.// JavaScript Document String.prototype.Trim=function()...{return   this.replace(/(^s*)|(s*$)/g,"");}    String.prototype.cleanStyle=function()...{         var html =this 
JavaScript前端代码规范
q_qman的博客
03-15 1116
HTML篇 #1. 标准模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <lin
Javascript 公共代码(可重用)
weixin_33858249的博客
11-20 91
1 //----------------------------------start公共变量------------------------------- 2 var postType = "POST"; 3 var getType = "GET"; 4 var jsonType = "json"; 5 var xmlType = "xml"; 6 var ...
《Javascript 设计模式》课程代码源码
最新发布
04-21
JavaScript设计模式是编程实践中的一种重要思想，它提供了一套经过时间考验的最佳实践，用来解决常见的编程问题和提高代码的可维护性、可扩展性和可复用性。在本《JavaScript设计模式》课程的源码中，我们可以深入...
常用的javascript设计模式
01-21
设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统...
javascript常用的设计模式
10-20
JavaScript设计模式是编程实践中一种非常重要的思想，它们是解决特定问题的模板，帮助开发者写出可维护、可扩展、易于理解的代码。本文将详细介绍四种常用的设计模式：单例模式、工厂模式、适配模式和外观模式。 ...
详解js中的几种常用设计模式
10-15
JavaScript 语言中有多种设计模式，本文将详解工厂模式和构造函数模式两种常用的设计模式。 工厂模式 工厂模式是一种创建型设计模式，它提供了一种创建对象的方式，而无需指定创建对象的具体类别。工厂模式解决了...
Js设计模式_发布订阅者模式
qq_41916378的博客
08-04 705
（本篇文章是我在早高峰上班地铁上刷到了一篇公众号发布的文章，感觉讲的非常好，特分享给大家。每天坚持学习，感谢公众号大佬的分享，公众号：nodejs全栈开发） 首先我们用一个示例来演示一下什么是观察者模式，有这样一个场景，在一个院子里，有一个小偷，和若干条狗，小偷只要一行动，狗就会叫，狗叫的动作是依赖小偷的，如果小偷不行动，狗是不会叫的，也就是说狗的叫的状态依赖小偷的行动，小偷的行动状态发生变化，依赖小偷的狗都会受到影响，从而发出叫声。 这个场景用代码来展示的话如下： // 第一版 class Thi
Javascript框架设计思路图
weixin_34358365的博客
02-17 493
这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创！！！ 一、简介: 1、市面上主流的JS框架,大多数是由一个个模块组合而成,模块化是大多数让软件所遵循的一种设计模式,就是定义清晰的接口把若干模块组合起来 2、模块也分很多种类,他们也有不同的功能,有些模块必须在文件一家在就需要执行,有些模块则在需要时才执行,有些模块则可有可无,毫无存在感. 3、种子模...
Pongo网页版JavaScript源代码及设计思路
weixin_33806914的博客
06-14 142
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript设计模式_前端5大常见设计模式、代码一看你就懂！
weixin_39938855的博客
11-14 71
前言今天主要介绍一下我们平常会经常用到的设计模式，设计模式总的来说有23种，而设计模式在前端中又该怎么运用呢，接下来主要对比较前端中常见的设计模式做一个介绍。设计模式的定义设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。比如java和javascript，在Java这种静态编译型语言中，无法动态地给已存在的对象添加职责...
理解JavaScript中的设计模式
terryhuang的专栏
03-13 524
简介：可靠的设计模式是可维护软件的基石，如果你曾参与技术面试，很有可能被问到关于设计模式的这类东西。下面这个指南中，我们将学习一些今天就可以用得着的设计模式。 什么是设计模式？ 简单来说，设计模式就是对特定类型问题重用的软件解决方案，这些问题在软件开发的时候经常会碰到，通过很多年的实践，专家对一些相似地问题总结出一些方法，这些方法就封装成为一种设计模式，所以： 模式是一种经验证的用于解决软件
JavaScript之算法设计思想
阿花的博客
10-29 1392
排序算法 一、冒泡排序 二、选择排序 三、插入排序 四、归并排序 五、快速排序 查找方法 一、顺序查找 二、二分查找 算法设计思想 一、动态规划 二、分而治之 三、贪心算法 四、回溯算法
聊聊javascript语言的设计思想
mashibing_web的博客
11-16 468
javascript语言是什么设计模式设计出来的？ 作为前端工程师的你，相信对于javascript的掌握是必不可少的技能，那么你知道多少种设计模式呢？你有了解哪些设计模式呢。首先我们需要知道设计模式不是javascript独有模式、在众多语言中、都存在设计模式、所以、设计模式是一种编程思想、设计模式Design pattern）代表了最佳方案，这些模式通常被有经验的面向对象编程的程序员所使用、设计模式是软件开发人员在面临编程问题时候的一种解决方案，这些方案都会是经过许许多多的优秀程序员试验并改进而来的，
常用的Javascript设计模式小结
11-23
在JavaScript设计模式中，单例模式是一个常用的模式。单例模式的定义是确保一个类只有一个实例被创建，但由于JavaScript是一种“无类”语言，所以很多文章中将一个对象字面量（{}）看做是一个单例模式。实际上，在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值