携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

• 本文参加了由公众号@若川视野 发起的每周源码共读活动，  点击了解详情一起参与。

简单讲 classNames、read-pkg、antd-message组件、quick-lru、taroのci

26 classNames

我：www.yuque.com/ruochuan12/…

川：www.yuque.com/ruochuan12/…

作用

把对象数组等解析成字符串。bool为false的置为空字符串，对象属性是true的就加入，数组打平后判断。

classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

原理

1.创个数组 2.遍历参数，假值跳过，数字或字符直接加，对象遍历且值为真就加，数组递归且值为真就加 3.数组join成字符串

学

数组递归判断：

if (Array.isArray(arg)) {
				if (arg.length) {
                    // 递归
					var inner = classNames.apply(null, arg);
					if (inner) {
                        // 总结果
						classes.push(inner);
					}
				}

27 read-pkg

我：www.yuque.com/ruochuan12/…

川：www.yuque.com/ruochuan12/…

作用

由于es模块里无法直接require('package.json')，所以要用依赖

import {readPackage, readPackageSync} from 'read-pkg';
// 同步和异步
const package_ = await readPackage();
const package_ = await readPackage({cwd: rootCwd});
const package_ = readPackageSync();
const package_ = readPackageSync({cwd: rootCwd});

提案是有了：

import configData from './config.json' assert { type: "json" };

原理

拼接路径，获取文件，解析

// 异步
import fs, {promises as fsPromises} from 'node:fs';
const filePath = path.resolve(cwd, 'package.json');
const json = JSON.parse(await fsPromises.readFile(filePath, 'utf8'));
// 同步
const filePath = path.resolve(cwd, 'package.json');
const json = parseJson(fs.readFileSync(filePath, 'utf8'));

学

异步文件读取：import fs, {promises as fsPromises} from 'node:fs';await fsPromises.readFile。。。

同步：fs.readFileSync(filePath, 'utf8')

parse错误拦截：

try {
			return JSON.parse(string, reviver);
		} catch (error) {
			fallback(string, reviver);
			throw error;
		}

28 message组件

我：www.yuque.com/ruochuan12/…

川：www.yuque.com/ruochuan12/…

作用

弱提示组件，我看的antd版本的

原理

api有open，config，destroy方法，info，success等调的是open

open方法执行notice方法，生成notice组件

组件由默认样式和内容组成 <div className={${noticePrefixCls}-content}>{content}</div>

29 quick-lru

我：www.yuque.com/ruochuan12/…

川：www.yuque.com/ruochuan12/…

作用

lru：最近最少缓存

原理

这是个用map对象来进行lru的模拟，不同于链表，用两个cache进行存储，原理复杂，我觉得反人类，不想深究

学

从lc的题目中 https://leetcode.cn/problems/lru-cache/ 可以知道

用map存新值时，容量爆满时，删的是第一个，存的时候是存后边

容量爆满删掉map第一个键 可以通过map.keys().next().value得到。

存新key时 删除后重设，map键值最后边的是最新的，和以往的思路是相反的

30 taroのci

我：www.yuque.com/ruochuan12/…

川：www.yuque.com/ruochuan12/…

作用

使用@tarojs/plugin-mini-ci进行微信、字节、支付宝、百度各种小程序的ci，也就是打包上传

原理

配置文件搜集各大平台项目id，路径

通过命令行 找到要打包的平台 taro build --type weapp

以微信为例：open是使用微信开发者打开项目，预览和上传则交给官方库miniprogram-ci来处理