Skip to main content

5-1

1 整合一个工具集（百宝箱 jsbox）​

内部包含各种可用工具的集合，并开源，例如：

  • 选择颜色（polishedjs）
  • ts 转 json，等等
  • 在线 runner
  • 格式化
  • md 预览
  • 图片格式转化
  • 字体格式转化
  • 等等

2 业务​

[1][作为前端，我对业务的一点理解](https://juejin.cn/post/6876977166051966984)

3 扩展Window对象​

以下两种写法差异是什么？

// declare global {
//   interface Window {
//     tidioChatApi: {
//       readyEventWasFired: boolean
//       on(arg0: string, onTidioChatApiReady: () => void): unknown
//       open: () => void
//       close: () => void
//     }
//   }
// }

declare interface Window {
  tidioChatApi: {
    readyEventWasFired: boolean
    on(arg0: string, onTidioChatApiReady: () => void): unknown
    open: () => void
    close: () => void
  }
}

4 工具函数集​

TODO 收集常用工具

将数字格式化成K,M等格式

// 数字格式化成K,M等格式
export function KMFormatter(num: number | string, digits = 2): string {
  const value = parseFloat(String(num));
  if (isNaN(value)) {
    return num as string;
  }

  const si = [
    { value: 1, symbol: '' },
    { value: 1e3, symbol: 'K' },
    { value: 1e6, symbol: 'M' },
    { value: 1e9, symbol: 'G' },
    { value: 1e12, symbol: 'T' },
    { value: 1e15, symbol: 'P' },
    { value: 1e18, symbol: 'E' },
  ];
  
  // \.0+$ 表示匹配小数点后面所有的零，例如 .10000。
  // (\.\d*[1-9])0+$ 表示匹配最后一个零以及小数点前面的数字，例如 .32000。
  const rx = /\.0+$|(\.\d*[1-9])0+$/;
  let i;
  // eslint-disable-next-line no-plusplus
  for (i = si.length - 1; i > 0; i--) {
    if (value >= si[i].value) {
      break;
    }
  }
  return (value / si[i].value).toFixed(digits).replace(rx, '$1') + si[i].symbol;
}

5 封装​

  • 反思封装问题
  • 与第三方库之间需要隔离一层
  • 封装不动的，传入动态的

6 Javascript提取文章中的h标签生成文章目录​

[1][Javascript提取文章中的h标签生成文章目录](https://segmentfault.com/a/1190000040462508)

7 Nestjs在注入外部访问配置​

import * as fs from 'fs';

// eslint-disable-next-line @typescript-eslint/no-var-requires
require('dotenv').config();
//1.加载环境文件
// eslint-disable-next-line @typescript-eslint/no-var-requires
const envPath = require('path').join(process.cwd(), `/config/${process.env.NODE_ENV || 'dev'}.yaml`);
if (!fs.existsSync(envPath)) {
  console.log(envPath + ',file not found');
  process.exit(-1);
}
// eslint-disable-next-line @typescript-eslint/no-var-requires
const config = require('dotenv-yaml').config({ path: envPath }).parsed;

class ConfigService {
  public isProduction() {
    return false;
  }

  get<T>(key: string): T {
    return config[key];
  }

  public getRedisConfig() {
    return config.redis;
  }

  public getJwt() {
    return config.jwt;
  }

  public getConfig() {
    return config;
  }

  public websiteEndpoint() {
    return config.website?.endpoint;
  }

  getMongo(): { uri: string } {
    return config.mongo;
  }

  getRecaptchaSecretKey(): string {
    return config?.recaptcha?.secret_key;
  }
}

const configService = new ConfigService();

export { configService };

8 PNPM多包的项目中vue3无代码提示​

[1][【类型提示】使用pnpm命令创建的vite项目无法在vscode中获得组件类型提示](https://blog.csdn.net/m0_52409770/article/details/127734886)

9 nestjs 多包​

[1] https://docs.nestjs.com/cli/monorepo

[2] https://docs.nestjs.com/cli/libraries

[3][nestjs-monorepo](https://github.com/mikemajesty/nestjs-monorepo)

10 'digest' of undefined, in development environment​

可能digest指的window.crypto.subtle.digest是Web Crypto API。如果您使用的是基于 Chromium 的浏览器，根据此处的 Chromium 项目页面，该subtle属性只能用于安全来源：

对 WebCrypto API 的访问仅限于安全来源（即 https:// 页面）。

注意：在规范中，crypto.subtle 应该在不安全的上下文中未定义

因为digest是 , 的方法subtle，并且subtle是undefined，所以您会收到此错误

解决方案​

访问 localhost 即可

11 [NEXT] Cannot start nuxt: Cannot find module 'node_modules/vue-i18n/dist/vue-i18n.mjs'​

pnpm 装包时加上 shamefully-hoist 参数

12 prettier和eslint的ignore文件只能放在顶级目录​

TODO：原因

13 window,globalthis,self的差异​

TODO