最近了解的好用技术

nrm npm 镜像源管理工具

nrm（NPM registry manager）是 npm 的镜像源管理工具，使用它可以快速切换 npm 源。在下载和发布npm包是非常有用的。

js 复制代码

npm install -g nrm

nrm ls // 查看npm镜像源

nrm use 源 // 切换源

// 查看当前源
npm config get register

vscode插件市场

vscode插件市场，我们可以在上面看到最近插件的下载趋势，看这些插件的详情，然后再去vscode中搜索下载。

同步vscode配置

这个操作是非常有必要的，到一个新公司就可以同步到自己习惯的配置和设置还是很香的。

开启vscode内置的settings sync。选择登录方式（一般是github），然后进行拉取配置，遇见冲突手动解决即可。

获悉文章：VSCode官方的配置同步方案

js原生分组支持

以前分组都是通过reduce配合去搞分组的。

js 复制代码

const transformedData = Object.values(
  _dynamicList.reduce((acc, obj) => {
    const key = obj.timeYMD;
    if (!acc[key]) {
      acc[key] = {
        timeYMD: key,
        titleTime: obj['titleTime'],
        info: [],
      };
    }
    acc[key].info.push(...obj['info']);
    return acc;
  }, {}),
);

现在提供了Object.groupBy, Map.groupBy可以进行分组了。

js 复制代码

const inventory = [
  { name: "芦笋", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "樱桃", type: "水果", quantity: 5 },
  { name: "鱼", type: "肉", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* 结果是：
{
  蔬菜: [
    { name: "芦笋", type: "蔬菜", quantity: 5 },
  ],
  水果: [
    { name: "香蕉", type: "水果", quantity: 0 },
    { name: "樱桃", type: "水果", quantity: 5 }
  ],
  肉: [
    { name: "山羊", type: "肉", quantity: 23 },
    { name: "鱼", type: "肉", quantity: 22 }
  ]
}
*/

js 复制代码

const inventory = [
  { name: "芦笋", type: "蔬菜", quantity: 9 },
  { name: "香蕉", type: "水果", quantity: 5 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "樱桃", type: "水果", quantity: 12 },
  { name: "鱼", type: "肉", quantity: 22 },
];
const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy(inventory, ({ quantity }) =>
  quantity < 6 ? restock : sufficient,
);
console.log(result); // 返回一个分组后的map对象

返回值作为key，分组的数据作为值。获悉文章：JavaScript 终于原生支持数组分组了！

Network 面板发起 Mock 请求

后端接口调通后，我们可以直接删除本地选中的文件夹即可删除本地的拦截。

获悉文章：Chrome 117 重大更新：Network 面板就能发起 Mock 请求！！！

css变量相关操作

css变量定义和使用

以--开头，大小写敏感。
重复使用
语义化的标识
一般在根伪类:root下定义。
他的作用域也是可以被继承的。
使用var()获取定义的变量，第二个参数可以设置默认值，并且可以嵌套使用var()。
- 对于color来说虽然是无效值，但是对于css变量来说是有效值，所以不会使用第二个参数给定的默认值，只有当当前css变量没有定义时，他才会使用默认值。
- 如果默认值也没有给定，那么它将使用当前css的继承值和默认值
- var只接受最多两个参数。

html 复制代码

  <style>
    .container {
      /* --text-color: 汉字; */
      --my-background: red;
    }

    .container p {
      color: skyblue;
    }

    .container p {
      /* 
        - 对于color来说虽然是无效值，但是对于css变量来说是有效值，所以不会使用第二个参数给定的默认值
        - 只有当当前css变量没有定义时，他才会使用默认值。
        - 如果默认值也没有给定，那么它将使用当前css的继承值和默认值
        - var只接受最多两个参数。
      */
      color: var(--text-color,--my-background, blue);
    }

    /* css变量同css继承的作用域一样，只适用于嵌套。所以一般设置在:root */
    .other-container {
      font-size: var(--text-color);
    }
  </style>
  
  <div class="container">
    <p>this is p</p>
  </div>
  <div class="other-container">this is div</div>

js中操作css变量

获取的都是内联样式，没有则返回空字符串

[domElement].style.[propertyName]
[domElement].style.getPropertyValue(propertyName)

获取最终css样式值

getComputedStyle(div)[propertyName]

获取css变量

getComputedStyle(domElement).getPropertyValue(cssPropertyName)

~~获取当前dom节点本身定义的css变量~~ ~~- [domElement].style.getPropertyValue(cssPropertyName)~~

修改css变量

[domElement].style.setProperty(cssPropertyName, newCssPropertyValue)

html 复制代码

  <style>
    :root {
      --fontSize: 20px;
    }
    div {
      --bgcolor: red;
      background: var(--bgcolor) !important;
      font-size: var(--fontSize);
    }
  </style>
  
  <div id="div" style="background: yellow">背景</div>
  <button id="btn">修改css变量</button>
  
  <script>
    const btn = document.getElementById("btn")
    const div = document.getElementById("div")
    /**
     * 获取的都是内联样式，没有则返回空字符串
     * - [domElement].style.[propertyName]
     * - [domElement].style.getPropertyValue(propertyName) 
     * 
     * 获取最终css样式值
     * - getComputedStyle(div)[propertyName]
     * 
     * 获取css变量
     * - getComputedStyle(domElement).getPropertyValue(cssPropertyName)
     * 
     * 获取当前dom节点本身定义的css变量
     * - [domElement].style.getPropertyValue(cssPropertyName)
     * 
     * 修改css变量
     * - [domElement].style.setProperty(cssPropertyName, newCssPropertyValue)
     **/

    console.log(div.style.background) // yellow
    console.log("getComputedStyle(element)", getComputedStyle(div).backgroundColor)
    // 这个不能获取到css变量的值
    console.log(div.style.getPropertyValue("--bgcolor")) // ""
    console.log(div.style.getPropertyValue("--fontSize")) // ""
    console.log(div.style.getPropertyValue("background")) // yellow
    console.log(div.style["--fontSize"]) // undefined

    // 这个可以获取当前dom元素的css变量值，并且只要他使用到这个css变量,就可以获取到
    console.log(getComputedStyle(div).getPropertyValue("--bgcolor")) // red
    console.log(getComputedStyle(div).getPropertyValue("--fontSize")) // 20px

    btn.onclick = function() {
      // 修改css变量值 报错，只读属性不能赋值
      // getComputedStyle(div).setProperty("--fontSize", "100px")
      // 这种是可以的，即使当前css变量不是在自身dom中定义的
      div.style.setProperty("--fontSize", "200px")
    }
  </script>

获悉文章: css变量

往期文章

专栏文章

最近也在学习nestjs，有一起小伙伴的@我哦。