有感而发,NestJS循环依赖。角色依赖了权限,权限依赖了角色模块。使用了循环依赖导入。
但是,在角色模块的服务里使用权限模块里的service方法时,就会提示导入的权限模块不正确。
但是,把角色里调用权限模块的方法逻辑删了。就正常了。
但是这段逻辑放角色控制器里调用并不会报错。
就很奇妙,所以,还是得避免使用循环依赖。我查阅了文档后才得知官网不推荐这么做。

NestJS开发者们,希望不要和我一样。尽量避免循环依赖吧

img.png
img_1.png
img_2.png

首先看下面这段代码。

img.png

遇见了一个需求,需要在部门选择的时候,
名称前面加上一级部门
但是,很多地方都用到了这个封装的组件。如何让这个地方优雅的处理掉。
又不影响到别的地方捏?
我想到了一个点子。子组件判断父组件有没有传递插槽。
如果传了的话,就给elOption传递处理选择显示的插槽。

经过我一番查阅文档和百度,发现setup语法糖没法实现。只能改成setup加return那种。
setup函数里第二个参数中去接收slot插槽。然后利用jsx的灵活性就能够优雅地实现需求了。
为啥要用jsx?因为template中给Eloption传递插槽没法用对象的方式,只要对应上了插槽名
Eloption就会渲染。
代码见下图

img.png
img.png
代码详情

emj

    如图所示,element-plus中所带的,这些折叠屏
    折叠行、这些功能可能并不是我们想要的。
    最近有一个需求,就是表格如果超出了某行,遍将多余的行数给进行折叠。
    那么,有什么办法能够给element-plus添加易于维护的拓展代码吗?
    
    我也自行百度过一番,但是百度上的答案,很明显并不是我想要的。
    经过我一番思索,想到了css的序号选择器。序号选择器专门写一个子元素超过3隐藏的类型名。
    
    样式如下
    
    .el-folding > tr:nth-child(n + 4) {
        display: none;
    }
    .el-folding-line {
        transition-duration: 200ms;
        cursor: pointer;
        border-bottom: 1px solid var(--el-table-border-color);
    }
    .el-folding-line:active {
        background-color: #F5F6FB;
    }
    .el-folding-extends {
        /*cursor: pointer;*/
        transition-duration: 400ms;
    }
    .el-folding-extends.rotate {
        cursor: pointer;
        transform: rotate(180deg);
    }
    
    如何让这个功能易于使用和维护,我这里想到了使用vue的自定义指令
    
      // element-table折叠指令
      app.directive('elfold', (el, binding) => {
        const elBody = el.querySelector(".el-table__body>tbody")
        const elBodyC = elBody.children
        if (elBodyC.length > 3) {
          // 给表格添加只展示三行的类名
          if (el.querySelector('.rotate')) {
            elBody.classList.remove('el-folding')
          } else {
            elBody.classList.add('el-folding')
          }
          // 判断有没有创建过面板
          const foldingLine = el.querySelector('.el-folding-line')
          if (foldingLine) {
            if (el?.removeElement) {
              el.removeElement(foldingLine)
            }
          }
          if (!foldingLine) {
            // 创建折叠面板元素
            const extendsTop = document.createElement('div')
            extendsTop.className = "flex-ct p5 el-folding-line"
            const extendsTopButton = document.createElement('i')
            extendsTopButton.className = "fa fa-angle-down el-folding-extends"
            extendsTopButton.style.fontSize = "30px"
            extendsTop.append(extendsTopButton)
            el.append(extendsTop)
            // 控制变量
            let controller = true
            extendsTop.addEventListener('click', () => {
              if (controller) {
                extendsTopButton.classList.add('rotate')
                elBody.classList.remove('el-folding')
              } else {
                extendsTopButton.classList.remove('rotate')
                elBody.classList.add('el-folding')
              }
              controller = !controller
            })
          }
        } else {
          elBody.classList.remove('el-folding')
        }
      })
    
    诺,最后的效果就如图所示了。

emj
emj
emj

    const arr = [1, 2, 3, 4, 5]
    arr.unshift(0)
    比如像上面那两行代码, 大家都知道数组是有下标的。
    如果往输入前面插入一个元素,那么后面的所有元素下标整体都是会往后移动的。
    这个数组的下标移动,一旦数据量过多的话,就会造成很严重的性能损耗。

    例如: 物联网项目,一个设备的模板,数据量大的可能有几千个参数。
    如果把第一个删除删除了,后面恐怖的数据量的下标前移,会给页面造成大概一秒钟的卡顿感。

    再比如一些滑动加载的页面,那个页面还具有,自己的文章能右滑删除的功能。
    如果存放文章的数据到达了一定数量,用户再删除文章,如果我们重新请求接口,加载列表。
    这样显然,用户的体验是更不好的。一般在接口请求删除成功后,对本地的那个文章在进行删除。
    但是,显然有时候也会造成不好的体验。

    这个时候链表这种数据结构, 再配合上es6的迭代器就很合适了。

    代码见以下链接

双端循环链表

  前端加载某些过大的静态文件,而且还是无法被浏览器缓存的资源时。每次都要浪费很多时间。
比如three.js需要使用的建模文件。如果只有几十kb,几MB的话倒还好。
如果模型文件十多M,甚至是几百多M的话。每次关闭网页再重新打开,就又重新加载一遍。
长时间的重复等待实在是倒人胃口。

  这个时候就可以用indexDB将这些大型文件存起来。避免重复加载这些资源,而倒人胃口。
  关于这个问题,我自己钻研了一下,并且封装了一个操作IndexDB的方法(详情见文章下链接)。
  有一说一,这个东西比MongoDB难用。不能够直接新建表,必须每次在升级数据版本的时候,触发的周期里
才能去新建。实在是,太难受了。

emj
IndexDB使用方法

0%