• 发布订阅者模式

    发布订阅者模式

    概念以及DOM0和DOM2级

    设计模式思想：发布订阅

    单例设计模式、构造函数、promise设计模式……

    设计模式不是代码，是一种设计思想。有效地进行管理代码

    设计模式不是具体的某个知识点，是一种编程思想。

    发布订阅：我未来要做什么事情

    概念：在未来某一时刻我要去做很多事情，先把事情列出成计划清单，当时刻到来时一件一件按照清单执行。

    其实是跟dom2级事件学的。

    dom0级和2级的区别

    jQuery的发布订阅

    $.Callbacks

    基于ES6封装自己的发布订阅库

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>subscribe</title>
    6. </head>
    7. <body>
    8.     <button id="btn">点击我</button>
    9.     <script>
    10.         (function(){
    11.             class Subscribe{
    12.                 constructor(){
    13.                     this.pond=[]
    14.                 }
    15.                 add(func){
    16.                     // 类型校验
    17.                     if(typeof func !=='function') return;
    18.                     const isExist=this.pond.some(item=>item === func);
    19.                     if(!isExist){
    20.                         this.pond.push(func)
    21.                     }
    22.                 }
    23.                 remove(func){
    24.                     const index=this.pond.findIndex(item===func)
    25.                     if(index>-1){
    26.                         this.pond(index,1)
    27.                     }
    28.  
    29.                 }
    30.                 fire(...args){
    31.                     this.pond.forEach(func=>func.call(this,...args))
    32.                 }
    33.  
    34.             }
    35.             function _Subscribe() {
    36.                 return new Subscribe()
    37.             }
    38.             window._Subscribe=_Subscribe;
    39.             // return function () {
    40.             //     return new Subscribe();
    41.             // }
    42.         })();
    43.         const s1=new _Subscribe();
    44.         function fn1(){
    45.             console.log(1)
    46.         }
    47.         function fn2(){
    48.             console.log(2)
    49.         }
    50.         function fn3(){
    51.             console.log(3)
    52.         }
    53.         s1.add(fn1)
    54.         s1.add(fn1)
    55.         s1.add(fn2)
    56.         s1.add(fn3)
    57.         btn.addEventListener('click',function () {
    58.             s1.fire()
    59.         })
    60.     </script>
    61. </body>
    62. </html>
    63.

    解决数组塌陷问题*

    在添加移除中，产生的经典问题：数组塌陷问题

    export default / import

    真实项目中的应用场景：

    某一时刻我要去做很多事情，先创建一个事件池，到那一时刻事件池通知执行；想做什么事情往事件池中加方法/移除方法，来管控整个业务逻辑。

    promise用异步解决

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>subscribe</title>
    6. </head>
    7. <body>
    8.     <button id="btn">点击我</button>
    9.     <script>
    10.         (function(){
    11.             class Subscribe{
    12.                 constructor(){
    13.                     this.pond=[]
    14.                 }
    15.                 add(func){
    16.                     // 类型校验
    17.                     if(typeof func !=='function') return;
    18.                     const isExist=this.pond.some(item=>item === func);
    19.                     if(!isExist){
    20.                         this.pond.push(func)
    21.                     }
    22.                 }
    23.                 remove(func){
    24.                     const index=this.pond.findIndex(item=>item===func)
    25.                     if(index>-1){
    26.                         // this.pond.splice(index,1)
    27.                         this.pond[index]=null
    28.                     }
    29.  
    30.                 }
    31.                 fire(...args){
    32.                     // this.pond.forEach((func,index)=>{
    33.                     //
    34.                     // })
    35.                     const length=this.pond.length;
    36.                     for(let i=0;i<length;i++){
    37.                         const func=this.pond[i]
    38.                         if(typeof func !== 'function'){
    39.                             // 此时去移除
    40.                             this.pond.splice(i,1)
    41.                             i--;
    42.                             continue;
    43.                         }
    44.                         func.call(this,...args)
    45.                     }
    46.                 }
    47.  
    48.             }
    49.             function _Subscribe() {
    50.                 return new Subscribe()
    51.             }
    52.             window._Subscribe=_Subscribe;
    53.             // return function () {
    54.             //     return new Subscribe();
    55.             // }
    56.         })();
    57.         const s1=new _Subscribe();
    58.         function fn1(){
    59.             console.log(1)
    60.         }
    61.         function fn2(){
    62.             console.log(2)
    63.             s1.remove(fn1)
    64.         }
    65.         function fn3(){
    66.             console.log(3)
    67.         }
    68.         function fn4(){
    69.             console.log(4)
    70.         }
    71.         s1.add(fn1)
    72.         // s1.add(fn1)
    73.         s1.add(fn2)
    74.         s1.add(fn3)
    75.         s1.add(fn4)
    76.         btn.addEventListener('click',function () {
    77.             s1.fire()
    78.         })
    79.     </script>
    80. </body>
    81. </html>
    82.

  • 相关阅读:
    配置Webpack Dev Server 实战操作方法步骤
    Java毕业设计源代码评教评分教务管理系统springboot
    一款免费轻量级web报表工具
    poj 1742 coins
    C++s简单实现Scoket编程
    人大与加拿大女王大学金融硕士——人生最好的贵人，就是努力向上的自己
    【web应用系统实践】第四章作业
    【业务知识】发票系统设计知识学习一
    我的阿里云盘资源搜索引擎首次试运行
    两种形式的import
  • 原文地址：https://blog.csdn.net/betterangela/article/details/128062562