NestJs关于循环依赖
有感而发,NestJS循环依赖。角色依赖了权限,权限依赖了角色模块。使用了循环依赖导入。 但是,在角色模块的服务里使用权限模块里的service方法时,就会提示导入的权限模块不正确。 但是,把角色里调用权限模块的方法逻辑删了。就正常了。 但是这段逻辑放角色控制器里调用并不会报错。 就很奇妙,所以,还是得避免使用循环依赖。我查阅了文档后才得知官网不推荐这么做。 NestJS开发者们,希望不要和我一样。尽量避免循环依赖吧
有感而发,NestJS循环依赖。角色依赖了权限,权限依赖了角色模块。使用了循环依赖导入。 但是,在角色模块的服务里使用权限模块里的service方法时,就会提示导入的权限模块不正确。 但是,把角色里调用权限模块的方法逻辑删了。就正常了。 但是这段逻辑放角色控制器里调用并不会报错。 就很奇妙,所以,还是得避免使用循环依赖。我查阅了文档后才得知官网不推荐这么做。 NestJS开发者们,希望不要和我一样。尽量避免循环依赖吧
首先看下面这段代码。
遇见了一个需求,需要在部门选择的时候, 名称前面加上一级部门 但是,很多地方都用到了这个封装的组件。如何让这个地方优雅的处理掉。 又不影响到别的地方捏? 我想到了一个点子。子组件判断父组件有没有传递插槽。 如果传了的话,就给elOption传递处理选择显示的插槽。 经过我一番查阅文档和百度,发现setup语法糖没法实现。只能改成setup加return那种。 setup函数里第二个参数中去接收slot插槽。然后利用jsx的灵活性就能够优雅地实现需求了。 为啥要用jsx?因为template中给Eloption传递插槽没法用对象的方式,只要对应上了插槽名 Eloption就会渲染。 代码见下图
如图所示,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') } })
诺,最后的效果就如图所示了。
const arr = [1, 2, 3, 4, 5] arr.unshift(0)
比如像上面那两行代码, 大家都知道数组是有下标的。 如果往输入前面插入一个元素,那么后面的所有元素下标整体都是会往后移动的。 这个数组的下标移动,一旦数据量过多的话,就会造成很严重的性能损耗。 例如: 物联网项目,一个设备的模板,数据量大的可能有几千个参数。 如果把第一个删除删除了,后面恐怖的数据量的下标前移,会给页面造成大概一秒钟的卡顿感。 再比如一些滑动加载的页面,那个页面还具有,自己的文章能右滑删除的功能。 如果存放文章的数据到达了一定数量,用户再删除文章,如果我们重新请求接口,加载列表。 这样显然,用户的体验是更不好的。一般在接口请求删除成功后,对本地的那个文章在进行删除。 但是,显然有时候也会造成不好的体验。 这个时候链表这种数据结构, 再配合上es6的迭代器就很合适了。 代码见以下链接
前端加载某些过大的静态文件,而且还是无法被浏览器缓存的资源时。每次都要浪费很多时间。 比如three.js需要使用的建模文件。如果只有几十kb,几MB的话倒还好。 如果模型文件十多M,甚至是几百多M的话。每次关闭网页再重新打开,就又重新加载一遍。 长时间的重复等待实在是倒人胃口。 这个时候就可以用indexDB将这些大型文件存起来。避免重复加载这些资源,而倒人胃口。 关于这个问题,我自己钻研了一下,并且封装了一个操作IndexDB的方法(详情见文章下链接)。 有一说一,这个东西比MongoDB难用。不能够直接新建表,必须每次在升级数据版本的时候,触发的周期里 才能去新建。实在是,太难受了。