JavaScript全解析-设计模式

心已赠人 2023-09-27 22:12 29阅读 0赞

●为了解决一类问题给出的 简洁而优化 的解决方案  
●设计模式不是规则，是程序员开发过程中的经验总结

单例模式  
●一个构造函数一生只有一个 实例对象

单例模式变形  
●利用闭包和自执行函数结合的方式实现

案例-自定义弹出层  
结构

<div class="dialog">
            
            <div class="top">
                <p>提示</p>
                <span>X</span>
            </div>
            
            <div class="content">
                真实内容
            </div>
            
            <div class="bottom">
                <button>确定</button>
            </div>
        </div>
    
    
    复制代码

样式

.dialog {
                width: 600px;
                height: 360px;
                border-top: 1px solid #ccc;
                border-left: 1px solid #ccc;
                box-shadow: 1px 2px 2px 0px #ccc;
                background-color: #fff;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                display: flex;
                flex-direction: column;
                border-radius: 15px;
            }
            .dialog > .top {
                height: 45px;
                background-color: skyblue;
                display: flex;
                box-sizing: border-box;
                justify-content: space-between;
                padding: 0 20px;
                align-items: center;
                border-bottom: 1px solid #ccc;
                border-radius: 15px 15px 0 0;
            }
            .dialog > .top > p {
                font-size: 22px;
                font-weight: 700;
                color: #fff;
            }
            .dialog > .top > span {
                cursor: pointer;
            }
            .dialog > .bottom {
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-top: 1px solid #ccc;
            }
            .dialog > .bottom > button {
                font-size: 20px;
                padding: 0 10px;
                cursor: pointer;
            }
            .dialog > .content {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
            }
    
    
    复制代码

交互

// 书写单例模式代码
    const Dialog = (function () {
    
        // 构造函数体
        class Dialog {
            constructor () {
                this.dialog = document.createElement('div')
                // 顶部面板
                this.top = null
                // 面板内的文本
                this.desc = null
                // 中间的内容区域
                this.content = null
                // 底部
                this.bottom = null
      
      
                // 面本内的文本
                this.descText = '提示'
                // 提示文本内容
                this.title = '你好 世界'
                // 颜色和文本你对照表
                this.list = [
                {
                    name: 'success',
                    descText: '成功',
                    bgColor: 'green'
                },
                {
                    name: 'danger',
                    descText: '危险',
                    bgColor: 'red'
                },
                {
                    name: 'warning',
                    descText: '警告',
                    bgColor: 'orange'
                },
                {
                    name: 'default',
                    descText: '提示',
                    bgColor: '#fff'
                },
                {
                    name: 'info',
                    descText: '信息',
                    bgColor: 'skyblue'
                }
                ]
        
                this.single()
            }
        
            // 只执行一次
            single () {
                this.creHTML()
                this.setCss()
                this.bindEvent()
            }
      
            // 创建整体结构
            creHTML () {
                // 创建 top 结构
                this.top = document.createElement('div')
                this.desc = document.createElement('p')
                this.desc.innerText = this.descText
                this.span = document.createElement('span')
                this.span.innerText = 'X'
                // 把 p 和 span 插入到 top 内
                this.top.appendChild(this.desc)
                this.top.appendChild(this.span)
      
      
                // 创建内容结构
                this.content = document.createElement('div')
                this.content.innerText = this.title
        
                // 创建底部结构
                this.bottom = document.createElement('div')
                this.btn = document.createElement('button')
                this.btn.innerText = '确定'
                this.bottom.appendChild(this.btn)
      
                // 把创建好的结构插入到 dialog 内
                this.dialog.appendChild(this.top)
                this.dialog.appendChild(this.content)
                this.dialog.appendChild(this.bottom)
        
                // 把创建好的 dialog 结构插入到 页面内
                document.body.appendChild(this.dialog)
            }
      
            // 设置 css 样式
            setCss () {
                // 给 dialog 设置样式
                setStyles(this.dialog, {
                    width: '600px',
                    height: '360px',
                    'border-top': '1px solid #ccc',
                    'border-left': '1px solid #ccc',
                    'box-shadow': '1px 2px 2px 0px #ccc',
                    'background-color': '#fff',
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    margin: 'auto',
                    display: 'flex',
                    'flex-direction': 'column',
                    'border-radius': '15px',
                })
      
                // 给 top 设置样式
                setStyles(this.top, {
                    height: '45px',
                    'background-color': 'skyblue',
                    display: 'flex',
                    'box-sizing': 'border-box',
                    'justify-content': 'space-between',
                    padding: '0 20px',
                    'align-items': 'center',
                    'border-bottom': '1px solid #ccc',
                    'border-radius': '15px 15px 0 0'
                })
      
                // 给 content 设置样式
                setStyles(this.content, {
                    flex: 1,
                    display: 'flex',
                    'justify-content': 'center',
                    'align-items': 'center',
                    'font-size': '20px'
                })
      
                // 给 bottom 设置样式
                setStyles(this.bottom, {
                    height: '45px',
                    display: 'flex',
                    'align-items': 'center',
                    'justify-content': 'center',
                    'border-top': '1px solid #ccc'
                })
      
                // 给 面板提示 设置样式
                setStyles(this.desc, {
                    'font-size': '22px',
                    'font-weight': 700
                })
      
                // 给 面板的 关闭按钮
                setStyles(this.span, {
                    cursor: 'pointer'
                })
      
                // 底部按钮
                setStyles(this.btn, {
                    'font-size': '20px',
                    padding: '0 10px',
                    cursor: 'pointer'
                })
            }
      
            // 事件绑定
            bindEvent () {
                this.btn.addEventListener('click', () => {
                    this.dialog.style.display = 'none'
                })
                this.span.addEventListener('click', () => {
                   this.dialog.style.display = 'none'
                })
            }
      
            // 每次都要执行
            init (title = '', type = 'default') {
                // 根据你的 文本 和 关键字 设置内容
                // 1. 根据类型获取到对照表内的对应信息
                const info = this.list.find(item => item.name === type) || { name: 'default', descText: '提示', bgColor: '#fff' }
                // 2. 根据 info 的内容开始设置
                this.top.style.backgroundColor = info.bgColor
                this.desc.innerText = info.descText
                this.descText = info.descText
                this.content.innerText = title
                this.title = title
      
                // 让 dialog 显示出来
                this.dialog.style.display = 'flex'
            }
        }
      
        // 功能函数
        function setStyles(ele, styles) {
            for (let k in styles) {
                ele.style[k] = styles[k]
            }
        }
      
        // 单例模式核心代码
        let instance = null
        return function (...arg) {
            if (!instance) instance = new Dialog()
            instance.init(...arg)
            return instance
        }
      })()
    
    
    复制代码

发布订阅模式

<!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">
        <title>Document</title>
    </head>
    <body>
        <script>
            /* 
                发布订阅模式
                例子: 去书店买书
                没有设计模式 就是面向过程
                    => 去到书店 , 问有没有书 , 没有就回去了,
                    => 过一会儿 , 在去书店问问有没有书 , 没有就回去
                    => 过一会儿 , 在去书店问问有没有书 , 没有就回去
                    => 过一会儿 , 在去书店问问有没有书 , 没有就回去
                    => 过一会儿 , 在去书店问问有没有书 , 没有就回去
                    => 过一会儿 , 在去书店问问有没有书 , 没有就回去
                    => 过一会儿 , 在去书店问问有没有书 , 没有就回去
                    => .....
                    => 过一会儿 , 去到书店问问有没有书 , 有了 , 买回去
                发布订阅模式
                    => 去到书店 , 问有没有书 , 没有的话留下一个电话号码 , 有了给我打电话
                    => 回去等待电话
                    => 接到电话了去到书店把书买回去
    
                发布订阅: 把你想要做的事情都写好(也就是注册到on函数中) , 将来一触发(就是执行了trigger函数)就都做完了
            */
    
            // 代码实现
            class Observer{
                constructor(status){
                    // 表示你的初始状态 , 将来一旦这个状态发生了改变我们要触发
                    // 也就是一旦有书了要通知人来买
                    this.status = status
    
                    // 定义个消息盒子 , 记录的都有谁和我定了书
                    // 定了几本书 , 都有那些书 , 是不是要记录上啊
                    this.message = {}
                }
    
                // 在原型上定义几个方法
                // 这个表示注册一个事件
                // 下面函数调用了传递了实参 , 我们这里要接受形参
                on (type,fn) {
                    // type 事件类型
                    // fn   事件处理函数
                    // 接下来我们要绑定在message内部
                    // 我们要判断message内部有没有type这个类型
                    // 如果没有我们就让它称为一个数组
                    if(!this.message[type]) this.message[type] = []
                    // 之后我们向向消息盒子内添加函数
                    this.message[type].push(fn)
                }
    
                // 这个表示取消这个事件
                // 也要接收两个参数
                off (type , fn) {
                    // 这个时候我们也要先判断消息盒子中有没有这个类型
                    // 如果没有 , 我们就什么都不用做了
                    if(!this.message[type]) return
                    // 代码能执行到这里说名有这个函数
                    // 那我们就解绑这个函数就好了
                    // 如何解绑呢?
                    this.message[type] = this.message[type].filter(item => item !== fn) // 把不一样的重新赋值 , 那就把一样的筛出去了
                }
    
                // 触发事件
                trigger (type) {
                    // 首先要判断有没有这个事件 , 如果没有就什么都不做了
                    if(!this.message[type]) return
                    // 代码能执行到这里说明有这个事件
                    // 那接下来就触发这个事件就好了
                    // 里面就是每一个函数 , 直接调用就可以了
                    this.message[type].forEach(item => item())
                }
            }
    
            // 实例化个对象
            // 这就是一个第三方 , 你可以把这个当做是书店的店员
            const o = new Observer('没有')
            // console.log(o);
    
            // 准备几个函数
            function handlerA() { console.log('handlerA');}
            function handlerB() { console.log('handlerB');}
            function handlerC() { console.log('handlerC');}
    
            // 向o 上注册一个事件
            // js这本书来了 , 执行handlerA这个函数
            o.on('js',handlerA)
            o.on('js',handlerB)
            o.on('css',handlerA)
            o.on('css',handlerC)
            o.on('html',handlerB)
            o.on('html',handlerC)
            console.log(o);
    
            // 向 o 取消一个事件注册
            // 也就是我从别的地方买到这本书了 , 不要在给我打电话了
            o.off('js',handlerA)
    
            // 都注册好了以后由店员来触发这个事件
            o.trigger('js') // 表示js这本书来了 , 这样就触发了这个函数
            
        </script>
    </body>
    </html>
    
    
    复制代码

策略模式  
●也是设计模式的一种 , 也是相对来说用的比较多的一种  
●作用:  
○减少if条件的判断  
○就是把多种形式的内容罗列出来  
●核心  
○就是用一个数据结构 , 把各种操作记录下来  
○值存储的就是操作后的结果  
●例子  
○需求:  
=> 我已知一个购物总价 1356  
=> 需要根据折扣计算最终价格  
=> 折扣种类 8折 7折 300-20 500-50  
实现:  
=> 我们需要在标签上记录一个属性  
=> 能记录到我们的各种折扣  
=> 如果折扣有很多呢? 如果后期需要添加或者减少折扣呢?  
=> 这样操作就能麻烦  
●之前的实现方式

策略模式

// 我们利用的还是闭包
    const discount = (function () {
        // 留存一份数据结构
        const discountList = {
            // 这里的数据要如何设计
            // 需要有折扣类型和折扣以后的价格
            // 标识:能计算出最后的价格(这里的将来需要调用实现 , 也就是这里需要一个函数)
            '80%':function (total) { return (total * 0.8).toFixed(2) }
        }
        // 因为要使用闭包 , 我们需要返回一个函数
        function inner(total,type) {
            // 这里我们出计算方式
            // 这里需要根据传递进来的折扣查看discountList中有没有这个折扣就好了
            // 需要把 type 当做键来访问 discountList
            // 如果有返回的是一个函数 , 如果没有返回的是一个undefined
            // console.log(discountList[type]);
            // 判断有没有这个折扣 , 没有这个折扣就返回总价
            if (!discountList[type]) return total 
            // 代码能执行到这里说明是有这个折扣的
           return discountList[type](total) - 0
        }
        // 这里把inner函数当做一个对象来看待 , 向里面插入一些方法
        // 添加一个方法 , 专门用来向 discountList内添加折扣类型
        inner.add = function (type,fn) {
            // type:表示添加的折扣
            // fn: 是一个函数,用来计算出最后的价格
            // console.log(type);
            // console.log(fn);
            // 添加到 discountList中
            discountList[type] = fn
        }
        // 添加一个方法 , 用来删除一种折扣
        inner.remove = function (type) {
            // 删除掉这个折扣
            delete discountList[type]
        }
        // 我们含可以把这个折扣的列表返回出去查看
        inner.getList = function () {
            return discountList
        }
        // 这里返回inner函数
        return inner
    })()
    // 将来使用
    // const res = discount('总价','折扣类型')
    const res = discount(1000,'80%')
    console.log(res);
    // 将来使用添加的折扣
    discount.add('300-20', price => price - parseInt(price / 300) * 20)
    // 添加完毕以后需要在下面计算
    const res1 = discount(1000,'300-20')
    console.log(res1);
    // 查看折扣列表
    const list = discount.getList()
    console.log(list);
    
    
    复制代码

案例-收银台

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        body {
          padding-left: 200px;
        }
    
        input, button {
          outline: none;
        }
    
        ul, li {
          list-style: none;
        }
    
        .addSale, .calc {
          width: 200px;
          height: 33px;
          background-color: skyblue;
          color: #fff;
          cursor: pointer;
          border: none;
          margin: 30px;
        }
    
        input {
          width: 300px;
          height: 30px;
          padding-left: 20px;
          font-size: 22px;
          display: block;
          margin: 20px;
        }
    
        ul {
          display: flex;
          margin: 20px;
        }
    
        ul > li {
          width: 120px;
          height: 120px;
          background-color: orange;
          margin: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 30px;
          cursor: pointer;
        }
    
        ul > li.active {
          background-color: skyblue;
        }
    
        p {
          font-size: 100px;
          color: red;
          margin: 20px;
        }
    
      </style>
    </head>
    <body>
    
      <button class="addSale">添加折扣类型</button>
    
      
      <input type="text">
    
      
      <ul>
        <li class="active">1111</li>
        <li>1111</li>
        <li>1111</li>
      </ul>
    
      <button class="calc">计算总价</button>
    
      
      <p>0.00</p>
    
    
      折扣名称(显示在按钮上的文本): <input type="text" class="type">
      计算方式(总价以 x 表示): <input type="text" class="method">
    
      <script>
        /*
          收银台
        */
    
        // 0. 获取元素
        const ulBox = document.querySelector('ul')
        const calcBtn = document.querySelector('.calc')
        const totalInp = document.querySelector('input')
        const pBox = document.querySelector('p')
    
        const addBtn = document.querySelector('.addSale')
        const nameInp = document.querySelector('.type')
        const methodInp = document.querySelector('.method')
    
        // 0. 以策略模式的形式准备一个 折扣记录
        const calcPrice = (function () {
    
          // 折扣列表
          const calcList = {
            '80%': function (total) { return (total * 0.8).toFixed(2) },
            '70%': function (total) { return (total * 0.7).toFixed(2) }
          }
    
          function inner(total, type) {
            if (!calcList[type]) return '0.00'
    
            return calcList[type](total)
          }
    
          inner.add = function (type, fn) {
            calcList[type] = fn
          }
    
          inner.remove = function (type) {
            delete calcList[type]
          }
    
          inner.getList = function () {
            return calcList
          }
    
          return inner
        })()
    
        // 0. 准备变量
        let type = ''
    
        // 1. 拿到当前所有的折扣渲染 li
        // 将来一旦折扣添加了, 需要重新渲染 li
        bindHtml()
        function bindHtml() {
          // 1-1. 拿到折扣类型列表
          const list = calcPrice.getList()
    
          // 1-2. 利用 list 渲染 li
          let str = ''
          for (let k in list) {
            str += `
              <li data-type="${ k }">${ k }</li>
            `
          }
    
          ulBox.innerHTML = str
        }
    
    
        // 2. 折扣类型的选择(排他)
        tab()
        function tab() {
          ulBox.addEventListener('click', e => {
            if (e.target.nodeName !== 'LI') return
    
            // 所有的没有类名
            for (let i = 0; i < ulBox.children.length; i++) {
              ulBox.children[i].classList.remove('active')
            }
    
            // 当前这个有类名
            e.target.classList.add('active')
    
            // 记录下当前的折扣类型
            type = e.target.dataset.type
          })
        }
    
        // 3. 结算按钮的事件
        calcBtn.addEventListener('click', () => {
          // 3-1. 拿到总价
          const totalPrice = totalInp.value - 0
    
          // 3-2. 计算最终价格
          const resultPrice = calcPrice(totalPrice, type)
    
          // 3-3. 把最终价渲染
          pBox.innerText = resultPrice
        })
    
        // 4. 添加折扣
        // 我们只能期望用户给我们两个内容
        //   折扣名称
        //   计算方式
        addBtn.addEventListener('click', () => {
    
          // 4-1. 拿到折扣名称
          const name = nameInp.value
    
          // 4-2. 拿到公式
          // 开始组装
          const r = '(parseInt(' + methodInp.value + ')).toFixed(2)'
    
          // 语法: eval(字符串)
          // 作用: 把该字符串当做js代码来执行
          // const res = eval(r)
    
          // 开始添加了
          calcPrice.add(name, x => eval(r))
    
          // 4-3. 从新渲染一遍 li
          bindHtml()
    
          // 4-4. 把两个文本框清空
          nameInp.value = ''
          methodInp.value = ''
        })
      </script>
    </body>
    </html>
    
    
    
    复制代码

模块模式  
●要是设计模式中的一种  
● 模块模式可以指定类想暴露的属性和方法，并且不会污染全局。采用闭包的形式

// 定义个自执行函数
    var Person = (function() {
        // 定义一个变量
        var name = 'rose'
        // 定义一个函数(方法)
        function sayName() {
            console.log('我的名字是:',name)
        }
        // 返回一个对象
        // 因为是自执行函数 , Person得到的就是一个对象
        // return {
        //     name: name,
        //     sayName: sayName
        // }
        return {
            name,
            sayName
        }
    })()
    // 使用
    console.log(Person);
    Person.sayName()