2022第四季度分享会

烤焦肉
138 阅读4分钟

环境变量在日常项目中的应用

.env 文件原理

参考自掘金文章：# 面试官：项目中常用的 .env 文件原理是什么？如何实现？

  1. 读取 .env 文件
  2. 解析 .env 文件拆成键值对的对象形式
  3. 赋值到 process.env 上
  4. 最后返回解析后得到的对象
  5. 可由用户自定义路径
  6. 可由用户自定义解析编码规则

总结 dotenv 库的原理。用 fs.readFileSync 读取 .env 文件，并解析文件为键值对形式的对象，将最终结果对象遍历赋值到 process.env 上。

.env文件在项目中的应用

背景：省厅领导侧看板，要求实现省厅平安家园建设成效的功能，并在基础上做修改。

  • 1->搬运了建设成效的代码，并做出修改。
  • 2->部署阶段后端提出，领导侧看板和建设成效不能部署在一个环境上，必须分开。同时不能影响平安家园的建设成效。于是为了节省时间打了一个子包部署在平安家园下。
  • 3->部署后发现现场有一个VR的页面可以直接打开使用，但是不一定稳定，要求优先使用打开现场的VR链接，保留本地的VR功能。于是添加了一个环境变量，在打包的时候，打两次包。（这里采用添加环境变量，而不是再增加一个.env文件，完全是因为再增加一个无法成功打包，具体是什么原因还没有研究过 QAQ ）
  • 4->可以看到，.env.new文件添加了一个node_env变量，原因是通过命令--mode new意思是设置node打包的环境为new 而不是production,影响了原本开发中用production判断的逻辑。
  • 5->以上问题都是比较容易发现和快速解决的，可以认为使用的成本比较低。

image.png

image.png

image.png

input实时搜索踩坑记

背景：在基线视频广场基础上进行功能开发的过程中遇到现场反馈搜索框闪动过于频繁，并且光标跳动到最后的问题。

解决光标跳动到最后的问题

  • 怀疑是刷新搜索结果后，页面重绘导致的光标从文字中间跳动到最后
    • 通过把结果栏移动到一个单独的组件里面，确实减少了光标跳动到最后的问题（现场和本地都不会复现了，这里说是减少了，是因为有文章说这确实是input框会出现的问题，应该在某种魔鬼的测试下会出现）

image.png

解决现场反馈的闪动过于频繁的问题

  • 这个我当然熟悉，不就是写个节流嘛
    • 于是我在原本输入框的值变化就请求的基础上加上防抖节流函数

image.png

下面挂上防抖节流的区别

// 防抖（在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。）
function debounce(fun, delay) { 
    return function (args) { 
        let that = this 
        let _args = args 
        // 这会发生什么？每次调用函数的时候原本要调用的都被清空了，停下来才能真正被调用
        // 比如:连续输入123456789，这段时间持续了10s都不会请求
        clearTimeout(fun.id) 
        fun.id = setTimeout(function () { 
            fun.call(that, _args) 
        }, delay) 
    }
}
// 节流（规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。）
function throttle(func, delay) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        // 如果调用函数的时候未达到间隔时间就不会发生调用
        // 比如：我输入123，只调用了第一次1
        if (now - previous > delay) {
            func.apply(context, args);
            previous = now;
        }
    }
}

这时候问题并没有完全解决，我忽略了一个问题……

接口返回数据的时间是不可控的…… 前端先后发送了值为1，2的请求，但是后端返回的顺序为2，1。于是产生了bug。 解决：判断返回的请求是否是最新的请求

image.png

参考过的文章（但保留怀疑态度）：input实时搜索，以最后一次结果展示

看板文件结构分享

在和hik看板项目的开发中总结出较为通用，变化方便，易于合作，等等等优点的看板结构 个人认为非常适合公安看板的开发，分享出来万一也适合其它看板呢。

原型

avatar
文章
阅读
粉丝