js设计模式

最新推荐文章于 2024-05-19 02:32:57 发布
最新推荐文章于 2024-05-19 02:32:57 发布
阅读量270 收藏
点赞数 1
文章标签： javascript 设计模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46372132/article/details/133798852
版权

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

方式二:

  // 写法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

单例模式对话框案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
    <!-- <div class="dialog">
        <div class="header">
            <div class="title">标题</div>
            <div class="close">关闭</div>
        </div>
        <div class="content"></div>
    </div> -->
    <script>
        class Dialog {
            constructor() {
                this.el = null
                this.el = document.createElement("div")
                this.el.className = "dialog"
                let strHTML = `
                <div class="header">
                    <div class="title">标题</div>
                    <div class="close">关闭</div>
                </div>
                <div class="content"></div>
                `
                this.el.innerHTML = strHTML
                document.body.appendChild(this.el)
                this.close()
            }
            // init() {
                // this.el = document.createElement("div")
                // this.el.className = "dialog"
                // let strHTML = `
                // <div class="header">
                //     <div class="title">标题</div>
                //     <div class="close">关闭</div>
                // </div>
                // <div class="content"></div>
                // `
                // 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>

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()//女

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);

4.订阅者模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>

5.代理模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>

6.装饰器模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>

7.策略模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>

8.适配器模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</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>
qq_46372132
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript设计模式.pdf
10-02
JavaScript设计模式.pdf
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 852
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
vue2流星雨（可调角度）
m0_46961166的博客
05-17 271
新建StarBackground.vue组件。在需要使用的页面引用。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。
Typescript 哲学 - ts模块使用最佳实践
gu2022_3_5_21_23的博客
05-13 209
ts的作用域 默认是全局（global），这也是为什么在 两个ts文件声明同一个变量报错变量名冲突，解决方法是使某个文件以模块的形式存在（文件顶层使用 export 、import ）比如 jquery 库使用js写的，引入 jquery依赖时 全局便有了一个全局变量。语法可以在模块中添加全局声明。，这时可以声明一个 全局的 变量声明对 其访问的属性进行控制。1、（可以通过 /// 语法分割为多个文件）隔离代码的作用域范围、较好的代码组织形式。块中的内容会被视为全局声明。ts 的全局作用域的应用场景。
JavaScript函数进阶（1）——递归和堆栈
qq_60624992的博客
05-16 400
当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用。有关正在运行的函数的执行过程的相关信息被存储在其。通过迭代的思路来实现，使用循环来实现。通过函数来不断调用自身来实现。
【MySQL精通之路】AdminAPI-使用
最新发布
Anakki的博客
05-19 613
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 185
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
Vue原理学习:vdom 和 diff算法(基于snabbdom)
m0_74989367的博客
05-15 1221
diff 算法是一个很广泛的，前端常见的例如文本 diff ，json 对象 diff ，还有这里的“树 diff”。文本 diff ，例如 linux 的 diff 命令json diff ，例如树 diff ，如 vdom diffdiff 两棵树的时间复杂度是O(n^3)（不可用的复杂度），例如遍历 Tree1 ，每个节点都要和 Tree2 对比针对 Tree1 的节点，遍历 Tree2 每个节点和它对比重新排序但是，vdom diff 算法做了几个改进，让复杂度变为O(n)只比较同一层级。
基于springboot+vue+Mysql的交流互动系统
老卓爱爪哇 的博客
05-15 1044
对于本交流互动系统的设计来说，系统开发主要是采用java语言技术，在整个系统的设计中应用MySQL数据库来完成数据存储，具体根据交流互动系统的现状来进行开发的，具体根据现实的需求来实现交流互动系统网络化的管理，各类信息有序地进行存储，进入交流互动系统页面之后，方可开始操作主控界面，主要功能包括管理员：首页、个人中心、用户管理、帖子分类管理、帖子信息管理、聚会信息管理、报名信息管理、系统管理，用户；首页、个人中心、帖子信息管理、报名信息管理、我的收藏管理，前台首页；首页、帖子信息、聚会信息、个人中心、后台管理
React: memo
卡卡西：一个擅长拷贝的前端程序员
05-14 524
React.memo 允许组件在 props 没有改变的情况下跳过重新渲染。
笔记：前端知识梳理
weixin_46691179的博客
05-17 206
让JavaScript能够在目标机器上能够正常运行的一种实现方式，浏览器不同，JavaScript引擎的实现也不同，如：谷歌的v8、火狐的spidermonkey、IE的chakra、Edge的chakracore。：在v8引擎的基础上又新增了很多js库，换句话说：Node.js内置了自身实现的js变量和函数，功能类似C/C++的标准库。：脚本语言的标准，不同版本的标准称为ESx，如：ES5、ES6。：对ES标准的一种实现，ES标准的其他实现还有JScript。：Node.js的包（库）管理工具。
什么是JavaScript？
喵喵分享师
05-18 376
这是我从一个名为Mozilla Developer Network（简称MDN）的网站上找到的定义。如果你不熟悉MDN，我会在资源部分介绍它。MDN或Mozilla Developer Network是学习和参考JavaScript的最佳资源之一，当然这是我个人的看法。以下是我从MDN页面提取的定义：JavaScript，通常缩写为JS，是一种轻量级的、解释型的、面向对象的语言，具有一等函数。它作为Web页面的脚本语言而闻名，但也在许多非浏览器环境中使用。
JavaScript 设计模式
08-20
JavaScript 设计模式是在 JavaScript 编程中经常使用的一种代码组织和架构方法。设计模式可以帮助开发者解决常见的问题，并提供可复用的解决方案。 以下是一些常见的 JavaScript 设计模式： 1. 工厂模式（Factory ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值