前端 – 我们的笔记

Element Plus 下拉框懒加载

需求背景

常见的需求中经常有下拉框作为搜索的条件之一，我们需要先调接口拉取数据供用户进行选择。当遇到数据量大，或考虑到随着时间推移，数据量会变得庞大的情况，通常接口会采取分页设计。

最佳实践

默认先只拉取第一页数据，供用户选择
当用户滚动至数据末尾，拉取下一页数据（数据懒加载）
支持关键词搜索
支持一键清空

实现细节

Vue项目我们团队基本上统一使用Element UI / Element Plus，本次针对 Element Plus的Select组件实现了公共方法 – 自定义指令完成懒加载。（Vue 3适用）

使用

// 引入
import vLoadMore from "@/utils/loadMore"

// 绑定指令
<el-select v-load-more="loadMoreData"></el-select>

原理

基于Element Plus Select组件滚动区域，监听滚动是否到达底部

懒加载逻辑

当元素内容的总高度 – 已滚动的高度 <= 元素的可见区域高度，代表当前滚动位置已经接近或到达底部，此时调用父组件传入回调方法即可。

初始状态

滚动到底部

Element Plus Select组件滚动区域选择

当页面中只用到一个下拉框，你可以直接使用类名定位。

当页面中有多个下拉框，上面的方法会导致数据错乱。查看Select DOM可以发现，不同的下拉框记录了不同的control id

而control id可以定位到对应的下拉框。举例：平台选择器的control id是”el-id-6389-3″，对应的下拉框DOM id也是”el-id-6389-3″

因此，我们可以利用以上属性定位到Select组件的实际滚动区域。

代码

/* Element Plus
   Select组件 自定义指令-触底加载更多
   使用：
       1. 页面中引入
       ```
        import vLoadMore from "@/utils/loadMore"
       ```
       2. 绑定自定义指令
       ```
       <el-select v-load-more="loadMoreData"></el-select>
       ```
 */
const vLoadMore = {
    mounted(el, binding) {
        const child = el.querySelector('.el-select__input')
        const id = child.getAttribute('aria-controls')
        const popper = document.getElementById(id)
        const SELECT_DOM = popper.parentElement

        SELECT_DOM.addEventListener('scroll', function () {
            const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
            if (CONDITION) {
                binding.value()
            }
        })
    }
}

export default vLoadMore

离开页面时调接口

场景：当前页面正在执行异步任务，当用户点击导航栏或直接关闭页面时，需调接口取消任务，减少资源浪费。

问题：如果在beforeunload事件中调ajax 请求，则会出现浏览器cancel掉请求的情况。

解决：使用sendBeacon方法，适用于发送少量数据到服务器。

Navigator.sendBeacon()
这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 unload 事件处理器中产生的异步 XMLHttpRequest。

Vue 3代码如下

<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

// 取消任务的API函数
function cancelTask() {
  navigator.sendBeacon('/api/cancel-task', JSON.stringify({ task: 'taskId' }));
}

onMounted(() => {
  // 添加 beforeunload 事件监听器
  window.addEventListener('beforeunload', cancelTask);
});

onBeforeUnmount(() => {
  // 组件卸载前移除监听器
  window.removeEventListener('beforeunload', cancelTask);
});
</script>

迁移monorepo保留原仓库提交记录

将代码仓库转移到monorepo如果直接将代码复制到大仓中就会丢失原本的代码提交记录。而大多数情况下我们希望保留提交记录以方便后期问题定位等情况。

在原仓库中进行以下操作，这里注意文件移动需要时间，确保全部文件移动完成后再进行下一步提交操作

# 移动文件
git mv -k * projects/{你的项目名}
git mv -k .* projects/{你的项目名} 

# 提交仓库
git commit && git push

在迁移目标仓库中进行以下操作

git remote add -f my-app {原仓库git地址}

git merge my-app/{分支名} --allow-unrelated-histories

git remote remove my-app
git push

parseInt

parseInt永远将输入解析为字符串

parseInt({toString: () => 2, valueOf: () => 1}); // -> 2
Number({toString: () => 2, valueOf: () => 1}); // -> 1

一个常见的栗子

parseInt("apple"); // -> NaN
parseInt("apple", 16); // -> 10

上面这个例子是因为parseInt会一个个解析字符直到解析不了，所以解析十六进制中的a为10作为结果返回。

parseInt Infinity

parseInt("Infinity", 10); // -> NaN
// ...
parseInt("Infinity", 18); // -> NaN...
parseInt("Infinity", 19); // -> 18
// ...
parseInt("Infinity", 23); // -> 18...
parseInt("Infinity", 24); // -> 151176378
// ...
parseInt("Infinity", 29); // -> 385849803
parseInt("Infinity", 30); // -> 13693557269
// ...
parseInt("Infinity", 34); // -> 28872273981
parseInt("Infinity", 35); // -> 1201203301724
parseInt("Infinity", 36); // -> 1461559270678...
parseInt("Infinity", 37); // -> NaN

parseInt null

parseInt(null, 24); // -> 23

上面的结果都是一样的解析过程，按字母表排序，每个字符对应数字是固定的。比如，I对应18，在18进制中只能解析0-17，所以parseInt("Infinity", 18); // -> NaN，在19进制中就能解析出结果：parseInt("Infinity", 19); // -> 18

n对应23，在23进制中解析不了，只返回18，在24进制中就是18 * (24 ^ 5) + 23 * (24 ^ 4)+ 15 * (24 ^ 3)+ 18 * (24 ^ 2) + 23 * 24 + 18 = 151176378，其他依此类推。

八进制

parseInt("08"); // -> 8, 支持ES5
parseInt("08"); // -> 0, 不支持ES5

以0开头的数字可以被解析为10进制或8进制，ECMAScript 5规定为10进制，但不是所有浏览器都支持它。所以使用parseInt时指定进制是好习惯，有时可以避免不必要的bug。

浮点数

parseInt(0.000001); // -> 0
parseInt(0.0000001); // -> 1
parseInt(1/1999999); // -> 5

parseInt 接受一个字符串参数并返回一个指定基数的整数。 parseInt 还会去除字符串参数中第一个非数字之后的任何内容。0.000001转换为字符串后是"0.000001"，0.0000001转换后是"1e-7"，所以返回1，1/1999999转换后是5.00000250000125e-7，返回结果是5。

本地开发debug npm包

使用`pnpm`包管理

1. 在本地npm包目录下执行

pnpm link --global

2. 如果是cli，可直接在其他项目目录下调用

3. 如果需要在其他项目中引入npm包，在其他项目目录下执行

pnpm link --global npm-package-name

使用`npm`包管理

1. 在npm包目录下执行

npm link

2. 在其他目录使用

npm link 本地npm包绝对路径

官方文档：https://docs.npmjs.com/cli/v9/commands/npm-link

async/await class constructor

背景：期望在新建类时调后台接口对类进行配置，配置成功后才可以执行其他操作。

尝试封装类的构造函数为async/await，报错

Class constructor may not be an async method

原因：async函数返回值为promise，而构造函数返回值为object，同一个函数不可能返回值同时为promise和object

解决：参考 jQuery's ready()方法

1. 类实现

    class myClass {
        constructor () {

        }

        async ready (callback) {
            await yourHttpRequest()；
            // 回调函数绑定作用域
            callback.bind(this)();
        }
    }

2. 调用

    const myObj = new myClass();
    myObj.ready(function() {
        // 保证配置完才能执行其他操作
    });

参考：https://stackoverflow.com/questions/43431550/async-await-class-constructor

Vue 3 TypeScript项目报错类型{}不存在属性

搜了一下tsconfig.json文件需要配置"jsx": "preserve"，但我的config文件原先就有这个配置。因为项目一开始是可以正常报错的，迁移到大仓后就有问题了。中间也考虑了是否是配置文件位置的问题，调整了位置也没有解决问题。

最后看到tsconfig.json文件另一个报错“找不到node的类型定义文件”

原因是我没有安装@types/node，装上后重新打开IDE”类型{}不存在属性“和“找不到node的类型定义文件”报错都没有了。

// npm
npm i @types/node --save-dev

// pnpm
pnpm add @types/node

微信小程序保存图片到本地相册

2022/10/29 更新

可以利用canvas来绕过下载图片到本地受微信下载白名单的限制

方案：

canvas 绘制图片
wx.canvasToTempFilePath拿临时路径
wx.saveImageToPhotosAlbum 保存图片

代码片段：https://developers.weixin.qq.com/s/iKZ2ymm87uDj

原文章

小程序使用wx.saveImageToPhotosAlbum保存图片到本地相册，该方法不能直接保存网络路径地址

如果页面渲染的图片链接是网络地址，可以通过wx.downloadFile获取文件的本地路径 / 临时文件路径后，再调用保存图片方法

除了保存图片到本地，如果还需要用到图片其他信息，可以使用wx.getImageInfo，该方法是对wx.downloadFile方法的封装，也会返回图片的本地路径，两个方法都需要先在管理后台配置下载白名单。

Element Plus自定义命名空间

使用Vue 3 + Element Plus开发新项目时，因为要引入的公共组件是Vue 2 + Element UI实现的。同一个项目中既有Element UI，又有Element Plus，会造成CSS冲突。

官方给出的解决方案是给Element Plus修改命名空间，如：原来的都是el-开头，我们可以改成ep-开头。

使用 ElConfigProvider 包装您的根组件

<!-- App.vue -->
<template>
  <el-config-provider namespace="ep">
    <!-- ... -->
  </el-config-provider>
</template>

在src目录下创建 styles/element/index.scss

// styles/element/index.scss
// we can add this to custom namespace, default is 'el'
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);
// ...

在 vite.config.ts 中导入 styles/element/index.scss

import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  // ...
})

完全按照教程在全新的项目中试验会发现虽然类名都变成ep-开头了，但是element 源码中的类依然是el-

原因：

官方教程中使用了~别名，如果你在vite / webpack中没有配置～别名，自定义命名空间就不会生效
如果是全部导入，需要在styles/element/index.scss中引入Element源码

// we can add this to custom namespace, default is 'el'
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
  $namespace: "ep"
);

@use "element-plus/theme-chalk/src/index.scss" as *;

注意：如果是按需导入组件，需要使用ElementPlusResolver，具体配置参考官方模版

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ]
})

修改 WordPress Twenty Fifteen 主题页脚以增加备案号

感觉 Twenty Fifteen（2015）这个主题挺简洁，甚合我意。不过发现这个主题页脚没有提供可视化的设置，于是乎只能在主题编辑器上面看看页脚的源码（footer.php）怎么写的：

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

	</div><!-- .site-content -->

	<footer id="colophon" class="site-footer">
		<div class="site-info">
			<?php
				/**
				 * Fires before the Twenty Fifteen footer text for footer customization.
				 *
				 * @since Twenty Fifteen 1.0
				 */
				do_action( 'twentyfifteen_credits' );
			?>
			<?php
			if ( function_exists( 'the_privacy_policy_link' ) ) {
				the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
			}
			?>
			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>" class="imprint">
				<?php
				/* translators: %s: WordPress */
				printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' );
				?>
			</a>
		</div><!-- .site-info -->
	</footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

注意到第 23 行这里提供了一个钩子可以注入代码，如果在子主题里使用这个方法注入的话，就不需要修改原主题页脚的代码，这样的话代码量小，后期升级兼容性也更好。

那么就新建一个子主题，在 functions.php 这里加载：

add_action( 'twentyfifteen_credits', 'custom_footer_provider' );
function custom_footer_provider() {
	printf( '<a class="imprint" href="%s" target="_blank">%s</a>', 'https://beian.miit.gov.cn/', '粤ICP备XXX号-X' );
}

此时页脚已经可以显示备案号了，不过和原有的“自豪地采用WordPress”文字挤在一起，不太好看。注意到这两个元素其实是在一个 <div class="site-info"></div> 里的，那么只需要在 style.css 里面设置一下 flex 布局：

.site-info {
	display: flex;
	justify-content: space-between;
}

此时两个文字已经贴靠两边显示了。