背景

在半年前的某一天，一个运行一年的项目被人提了建议，希望有一个tabs页面，因为他需要多个页面找东西。

我：滚，自己开浏览器标签页（此处吹牛逼）

项目经理：我审核的时候也需要看别人提交的数据是否正确，我也需要看，很多人提了建议

我：作为一个合格的外包，肯定以项目经理体验为主（狗头保命）

1 React的Keepalive

简单实现React KeepAlive不依赖第三方库(附源码)React KeepAlive 实现，不依赖第三方库，支持 - 掘金
神说要有光《React通关秘籍》

....还有一些没有收藏的keepalive实现

代码不想多赘述，我找了很多资料基本思路讲一下

基本是通过react-router来实现

• 弄一个map来存储{path:<OutLet|useOutlet>}


• 然后根据当前路由path来决定哪些组件需要渲染，不渲染的hidden


• 然后在最外层布局套一层Tabs布局用react的context来传递

出现的问题是：

就是当依赖项是一个公共数据的时候，useEffect会触发，如图片中的searchParams同名的key、存在state内存中的同名key之类的

详情页打开多个，地址栏清一色pkId的情况

使用的是ant design pro v6，也是看到有加配置就可以用Keepalive，大家可以掘金找找，我测试过也是有一样的问题，但是和目前能找到功能差不多了，免去自己封装

看很多react Keepalive的实现目前是还没找到什么方案，也皮厚的找过神光，但是要是知道我是被人忽悠了，绝对不会去打扰大佬

tip：先自己敲，再问，不要让自己陷于蠢逼的尴尬

发现问题后，我去问日常开发Vue的童鞋们，因为我两年没写vue了，我说：你们是怎么实现tabs布局的，Vue的Keepalive是怎么实现只有显示哪个页面，别的组件存储而不运行watch的，然后说了一下我在react开发tabs的时候尴尬。

Vueer：vue不会有这个问题，自带的Keepalive封装的很完美，react没有这个功能吗？

就这样我信了半年,但是这个bug我说，我只能到这种程度了，要是说新项目还可以再useEffect再封装一层自定义的hooks，增加一点心智负担，让别人用封装的来，再useEffect内做判断是否是显示的path之类的。

这边年来反正这个功能做了一个开关，项目经理自己用，别人要是没问也不告诉别人有开发这东西，嘿嘿嘿

之所以又捞起来是别的几个项目也有人问，然后问我能不能迁移给别的项目，那他妈不得王炸，别的项目有的还是umi3没升级的。

2 vue3的Keepalive

先说结论吧：vue的Keepalive也能解决这个问题，纯属胡扯

实在想不到什么好的方案，闲余时间，就用vue写了一个demo，想看看vue是怎么实现的，因为react除了就是hidden，或者超出overflow 然后切换是平移像轮播图一样，实在想不出什么方案能保存原本的数据了。

<template>

  home

  <ul>

    <li v-for="item in router.getRoutes().filter(r=>r.path!=='/')" @click="liHandler(item)">

      {{ item.path }}

    </li>

  </ul>

</template>

<script lang="ts" setup>

import {useRouter} from "vue-router";



const router = useRouter()



const liHandler = (route) => {

  router.push({name: route.name, query: {path: route.path}})

}

</script>

简单来个demo的目录结构和代码，代码是会有问题的代码，不用细看...

两年没写vue还是遇到几个坑，先记录一下

2.1 vue3的routerview不能写在keepAlive内

// home.vue

<template>

  <!--  <RouterView v-slot="{Component}">-->

  <!--    <KeepAlive>-->

  <!--      <component :is="Component"/>-->

  <!--    </KeepAlive>-->

  <!--  </RouterView>-->



  <KeepAlive>

    <RouterView></RouterView>

  </KeepAlive>

</template>

注释掉的是正确的，这里不提一嘴，vue的console.log的体验感很ok，下面列的就是正确的，我还去百度了为啥Keepalive无效，直到截这张图写这文的时候才看到，人家都谢了，哈哈哈哈

2.2 router.push地址不变

主要原因是路由创建的是
createMemoryHistory 这玩意不知道是啥 没用过，我是复制vueRoute官网demo的，一开始没注意，改成createWebHistory就好

import {createRouter, createWebHistory} from "vue-router";



const routes = [

    {path: "/", component: () => import("./components/Home.vue")},

    {path: "/aaa", component: () => import("./components/Aaa.vue"), name: 'aaa'},

    {path: "/bbb", component: () => import("./components/Bbb.vue"), name: 'bbb'},

    {path: "/ccc", component: () => import("./components/Ccc.vue"), name: 'ccc'},

    {path: "/ddd", component: () => import("./components/Ddd.vue"), name: 'ddd'},

]

const router = createRouter({

    history: createWebHistory(),

    routes,

})



export default router

2.3 router.push不拼接?传参

router.push(path, query: {path}})

一开始是这么写的，用path+query，这个问题纯粹弱智了，太久没写有点菜，改成name+query就行

2.4 vue Keepalive测试

我先点了去aaa，然后返回首页点ccc，这里可以看到，aaa页面的watch触发了！触发了！触发了！

然后去看了下源码，简约版如下

const KeepAliveImpl = {

  name: `KeepAlive`,



  // 私有属性 标记 该组件是一个KeepAlive组件

  __isKeepAlive: true,

  props: {

    // 用于匹配需要缓存的组件

    include: [String, RegExp, Array],

    // 用于匹配不需要缓存的组件

    exclude: [String, RegExp, Array],

    // 用于设置缓存上线

    max: [String, Number]

  },

  setup(props, { slots }) {

    // 省略部分代码...



    // 返回一个函数

    return () => {

      if (!slots.default) {

        return null

      }

      

      // 省略部分代码...

      

      // 获取子节点

      const children = slots.default()

      // 获取第一个子节点

      const rawVNode = children[0]

      // 返回原始Vnode

      return rawVNode

    }

  }

}

这不就是存下来了children，但是有个有意思的是

前面说过，react是通过缓存住组件，然后用hidden来控制展示哪个隐藏哪个，vue这边的dom渲染出来不是。

官网也说了动态组件是会卸载的

3 分析一波

直接用光哥的代码跑起来，这么一比可以看出来dom上的差异

然后把代码的显示改成判断语句渲染，测试一下

测试图：

然后去首页，再回到/bbb，发现数字又变回0了

先来看下React的渲染，通过卡颂大佬的文章，找到了react在render阶段

500行左右

这是判断是mountd还是update的一个标志，然而我们已经卸载了，这里肯定是null，那么就会去创建组建，仅仅是创建。

而vue因为自身有keepalive，在render阶段，是有对标志为keepalive的做patch的逻辑

所以keepalive的组件不会再走created和mounted，而是直接进行diff进行parch

总结

• 公共参数无论是vue还是react都会被监听到


• react想要实现像vue一样的效果只能等react官方适配

也是有提过啦

在Web开发中，将HTML页面转换为PDF文件是一项常见的需求。无论是生成报告、发票、还是其他任何需要打印或以PDF格式分发的文档，开发者都需要一个既简单又可靠的解决方案。幸运的是，pdfmake.js库以其轻量级、高性能和易用性，成为了许多开发者的首选。本文将介绍如何使用这个拥有11K Star的GitHub项目来实现HTML到PDF的转换。

什么是pdfmake.js

pdfmake.js是一个基于JavaScript的库，用于在客户端和服务器端生成PDF文档。它允许开发者使用HTML和CSS来设计PDF文档的布局和样式，使得创建复杂的PDF文档变得异常简单。

为什么选择pdfmake.js

• pdfmake.js的文件大小仅为11KB（压缩后），这使得它成为Web应用中一个非常轻量级的解决方案


• 拥有超过11K Star的GitHub项目，pdfmake.js得到了广泛的社区支持和认可，稳定性和可靠性值得信任


• 功能丰富，它支持表格、列表、图片、样式、页眉页脚等多种元素，几乎可以满足所有PDF文档的需求。


• pdfmake.js可以轻松集成到任何现有的Web应用中，无论是使用Node.js、Angular、React还是Vue.js。

快速开始

安装

通过npm安装pdfmake.js非常简单：

npm install pdfmake

或者，如果你使用yarn：

yarn add pdfmake

创建PDF文档

创建一个PDF文档只需要几个简单的步骤：

import  pdfMake from 'pdfmake/build/pdfmake';



//引入中文字体，避免转换的PDF中文乱码

pdfMake.fonts = {

    AlibabaPuHuiTi: {

        normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',

        bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',

        italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',

        bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'

    }

};

const dd = {

  content: [

    'Hello, 我是程序员凌览',

    { text: 'This is a simple PDF document.', fontSize: 12 },

    { text: 'It is generated using pdfmake.js.', bold: true }

  ],

  //设置默认字体

  defaultStyle: {

    font: 'AlibabaPuHuiTi'

  },

};

const pdf = pdfMake.createPdf(dd);

pdf.getBlob((buffer) => {

   const file = new File([blob], filename, { type: blob.type })

   //上传服务器

});



//或直接下载

pdf.download('文件名.pdf')

生成的pdf效果：

想动手体验，请访问pdfmake.org/playground.…。

html-to-pdfmake 强强联合

当PDF文档内容非固定，content字段内的结构要随时可变，不能再像下方代码块一样写死，html-to-pdfmake即为解决这类问题而产生的。

const dd = {

  content: [

    'Hello, 我是程序员凌览',

    { text: 'This is a simple PDF document.', fontSize: 12 },

    { text: 'It is generated using pdfmake.js.', bold: true }

  ],

  //设置默认字体

  defaultStyle: {

    font: 'AlibabaPuHuiTi'

  },

};

安装

通过npm安装：

npm install html-to-pdfmake

或者，如果你使用yarn：

yarn add html-to-pdfmake

HTML字符串转pdfmake格式

import  pdfMake from 'pdfmake/build/pdfmake';

import  htmlToPdfmake from 'html-to-pdfmake';



//引入中文字体，避免转换的PDF中文乱码

pdfMake.fonts = {

    AlibabaPuHuiTi: {

        normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',

        bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',

        italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',

        bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'

    }

};



//它会返回pdfmake需要的数据结构

const html = htmlToPdfmake(`

  <div>

    <h1>程序员凌览</h1>

    <p>

      This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,

      and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.

    </p>

  </div>

`);

const dd = {

  content:html.content, 

  //设置默认字体

  defaultStyle: {

      font: 'AlibabaPuHuiTi'

  },

};

const pdf = pdfMake.createPdf(dd);

pdf.download()

生成的pdf效果：

添加图片要额外设置:

const ret = htmlToPdfmake(`<img src="https://picsum.photos/seed/picsum/200">`, {

  imagesByReference:true

});

// 'ret' contains:

//  {

//    "content":[

//      [

//        {

//          "nodeName":"IMG",

//          "image":"img_ref_0",

//          "style":["html-img"]

//        }

//      ]

//    ],

//    "images":{

//      "img_ref_0":"https://picsum.photos/seed/picsum/200"

//    }

//  }



const dd = {

  content:ret.content,

  images:ret.images

}

pdfMake.createPdf(dd).download();

最后

通过上述步骤，我们可以看到pdfmake.js及其配套工具html-to-pdfmake为Web开发者提供了一个强大而灵活的工具，以满足各种PDF文档生成的需求。无论是静态内容还是动态生成的内容，这个组合都能提供简洁而高效的解决方案。

程序员凌览的技术网站linglan01.cn/；关注公粽号【程序员凌览】回复"1"，获取编程电子书

哈喽，大家好 我是 xy👨🏻‍💻。今天和大家来聊一聊大屏可视化适配过程中的痛点以及怎么去解决这些痛点！！！

前言

开发过大屏可视化应用的前端工程师们通常会有这样的共识：

在可视化开发过程中，最具有挑战性的并非各种图表的配置与效果展示，而是如何确保大屏在不同尺寸的屏幕上都能实现良好的适配。

原始解决方案

起初比较流行的三大解决方式：

rem 方案

• 动态设置 HTML 根字体大小和 body 字体大小，配合百分比或者 vw/vh 实现容器宽高、字体大小、位移的动态调整

vw/vh 方案

• 将像素值（px）按比例换算为视口宽度（vw）和视口高度（vh），能够实时计算图表尺寸、字体大小等

scale 方案

• 根据宽高比例进行动态缩放，代码简洁，几行代码即可解决，但是遇到一些地图或者 Canvas 中的点击事件，可能会存在错位问题，需要做针对性的调整适配

以上三种方式，都能够实现大屏的基本适配！

但是在开发过程中需要对每个字体和容器去做相应的计算调整，相对来说较为繁琐，而且在团队协作过程中也容易出现问题。

那么有没有一种方式，只需要简单的一些配置，就能完全搞定大屏在不同尺寸的屏幕上都能实现良好的适配？

以下给大家推荐三个方案，只需要简单的几行代码配置，可以完全解决大屏开发中的适配问题，让你效率翻倍！！！

autofit.js

autofit.js 基于比例缩放原理，通过动态调整容器的宽度和高度来实现全屏填充，避免元素的挤压或拉伸。

autofit.js 提供了一种简单而有效的方法来实现网页的自适应设计，尤其适合需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。

安装：

npm i autofit.js

配置：

import autofit from 'autofit.js';

onMounted(() => {

    autofit.init({

        el: '#page',

        dw: 375,

        dh: 667

    })

})

   * - 传入对象，对象中的属性如下：

   * - el（可选）：渲染的元素，默认是 "body"

   * - dw（可选）：设计稿的宽度，默认是 1920

   * - dh（可选）：设计稿的高度，默认是 1080

   * - resize（可选）：是否监听resize事件，默认是 true

   * - ignore(可选)：忽略缩放的元素（该元素将反向缩放），参数见readme.md

   * - transition（可选）：过渡时间，默认是 0

   * - delay（可选）：延迟，默认是 0

源码地址

Github 地址：https://github.com/995231030/autofit.js

v-scale-screen

大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题），如果是 React 开发者，可以使用 r-scale-screen。

安装：

npm install v-scale-screen

# or

yarn add v-scale-screen

配置：

<template>

  <v-scale-screen width="1920" height="1080">

    <div>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

    </div>

  </v-scale-screen>

</template>



<script>

import { defineComponent } from 'vue'

import VScaleScreen from 'v-scale-screen'



export default defineComponent({

  name: 'Test',

  components: {

    VScaleScreen

  }

})

</script>

源码地址

github 地址：https://github.com/Alfred-Skyblue/v-scale-screen

FitScreen

一种基于缩放的大屏自适应解决方案的基本方法，一切都是基于设计草图的像素尺寸，通过缩放进行适配，一切都变得如此简单。

支持 vue2、vue3 以及 react，可以适用于任何框架，只要一点点代码。

安装：

npm install @fit-screen/vue

# or

yarn add @fit-screen/vue

# or

pnpm install @fit-screen/vue

配置：

<script setup>

import FitScreen from '@fit-screen/vue'

</script>



<template>

  <FitScreen :width="1920" :height="1080" mode="fit">

    <div>

      <a href="https://vitejs.dev" target="_blank">

        <img src="/vite.svg" class="logo" alt="Vite logo">

      </a>

      <a href="https://vuejs.org/" target="_blank">

        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">

      </a>

    </div>

    <HelloWorld msg="Vite + Vue" />

  </FitScreen>

</template>

源码地址

github 地址：https://github.com/jp-liu/fit-screen

最后，如果大家有更好的适配方案，欢迎在评论区留言一起学习交流！👏

最后

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：前端开发爱好者 回复加群，一起学习前端技能 公众号内包含很多实战精选资源教程，欢迎关注

前言

不知大家有没有留意过，当前大部分 App 或网页中，很少存在允许用户完全自定义要展示信息的颜色的功能。

例如在钉钉的自定义表情中，只允许用户从一组预设的配色中随机切换：

再比如笔记应用 Notion 虽然允许用户改变文本颜色，但也只允许在一组预设色值中选取：

原因无它，配色，不是一件容易事。

对于大众用户而言，没什么颜色理论知识，很可能挑出来的颜色在应用中很难看、看不清，这会极大的影响用户的使用体验（即使是用户自己造成的）。

因此大部分产品选择的做法是提供一组预先检验过的、不会对用户阅读造成困扰的颜色，放在应用中供用户挑选。

今天我来斗胆挑战一下这个业界难题。

在这篇文章中将会探讨两个具体问题：

文本颜色自适应背景色

在下面这张图中，文本的颜色默认都是黑色的，背景色设置了多个明暗不同的颜色。可以看到对于暗色的背景色，此时文本可阅读性特别差（不太明显，想看清楚会很累）。

如果能够自动根据背景色的明暗，决定使用白色还是黑色的文本，那便是实现了文本颜色的自适应了。

首先介绍下借助第三方库实现的方案。

第三方库实现

color 是 JavaScript 生态中在颜色处理方面最流行的库，它有诸多功能：颜色空间转换、颜色通道分解、获取对比度、颜色混合……

在文本颜色自适应这个场景中，最为方便的两个 API 是 isDark() 和 isLight() ，它们分别用来表示一个颜色是否为深色、是否为浅色。

实际应用：

import Color from 'color'



const BgColors = ['#f87171', '#fef08a', '#042f2e', ...]

export default function Page() {

  return (

    <main>

      {BgColors.map((bg) => (

        <div

          style={{

            background: bg,

	          // 根据背景是否为深色决定文本用白色还是黑色

            color: Color(bg).isDark() ? 'white' : 'black'

          }}

        >

          恍恍惚惚

        </div>

      ))}

    </main>

  )

}

实际效果：

很 Nice ～

下面再来看下使用 CSS 的解决方案。

mix-blend-mode: difference

mix-blend-mode: difference 用于指定一个元素的颜色与背景色进行「差值」混合，可以使用如下公式表达：

# || 表示取绝对值

# 最终元素显示的颜色 = |元素原有的颜色 - 背景色|

result_color = | element_color - background_color |

例如：

• 文本颜色为白色 rgb(255 255 255) 背景色为蓝色 rgb(0 0 255) ，最终文本颜色为黄色 rgb(255 255 0)


• 文本颜色为黑色 rgb(0 0 0) ，此时无论背景色是什么颜色，最终文本的颜色一定和背景色完全相同，因为 | 0 - x | = x

下面来看个实际的 demo，这里我们让文本颜色为 rbg(255, 255, 255)，背景色动态调整：

可以看到这个方案会有如下问题：

• 当背景色为灰色时，文本的颜色和背景色很相似，对比度低，可阅读性差


• 当背景色为彩色时，混合出来的颜色也是彩色，而且颜色比较脏，不太美观

CSS 相对颜色

以 CSS 颜色函数 rgb() 举例，相对颜色的语法是通过 from 关键词扩展了该函数的能力：

color: rgb(from red r g b);

由于 red 的 RGB 是 (255, 0, 0) ，因此后面的 r g b 值分别为 255 0 0 。对于 r g b 还可以调用 calc() 或其他 CSS 函数进一步处理。

除了 rgb() ， rgba() hsl() hwb() lch() 等等 CSS 颜色函数都是支持相对颜色语法的。

CSS 相对颜色语法带来的能力有调节亮度、调节饱和度、获取反转色、获取补充色……其中反转色就可以用于文本颜色自适应的场景中。

在上面 Demo 上，使用如下规则使文本的颜色为背景色的反转色：

color: rgb(from var(--bg) calc(255 - r) calc(255 - g) calc(255 - b));

实际效果：

可以看到虽然能一定程度上提升可阅读性，但是有些反转色奇奇怪怪的，和背景色搭配起来实在不美观，并不是特别推荐使用。

color-constract

color-constract() 可以说是最适合文本颜色自适应场景的 CSS 函数了，用法简单，效果好！

color: color-constract(var(--bg) vs color1, color2, ...);

它的作用即从 vs 右边的一堆色值中，挑选一个和 vs 左边的色值对比度最大的返回。

如 color-constract(#ccc vs #000, #fff) ，由于 #ccc 是个浅灰色，色值和 #000 对比度更大，因此这个函数会返回 #000 。

很美好。

但是！这个函数现在几乎不能用！

目前只有 Safari 中能使用，而且必须开启相关的实验性功能 Flag 。

完全允许用户自定义主题色

让文本的颜色根据背景色自适应，本质是在背景色（background）未知、前景色（foreground）有限的情况下，选择一个合适的前景色，使页面的可读性得到保障。

在上面的 Demo 中，背景色有淡紫色、淡黄色、深绿色、深棕色……前景色即文本的颜色只会有白色、黑色两种情况，依据背景色的明暗决定使用白色还是黑色。

相反的，我们讨论下前景色未知、背景色有限的情况。

看下这个实际应用场景：

在这款应用中，支持明、暗两种主题，明亮主题为左边的白色（#FFFFFF），暗夜主题为右边的深蓝色（#020617），这是两个背景色；标签主题色（即前景色）支持用户自己设定，图中以红色（#FF0000）为例。

通过截图可以看到，红色在这两种背景色上展示效果都还不错，主要是因为他们的对比度足够。

• 红色 vs 白色，对比度：3.998


• 红色 vs 深蓝色，对比度：5.045

要使页面的可读性得到保障，对比度至少要 > 3。

如果允许用户完全自定义前景色，就不可避免的出现用户选择的颜色和背景色的对比度 < 3，这时页面阅读起来会很费力，影响用户体验。

下面给出两种解决方案。

及时给出提示

允许用户完全自定义，意味着用户可以从色盘上选取任意颜色。当用户选取的颜色和背景色对比度 < 3 时，界面上可以给出适当提示，让用户自己决定用一个「难看的颜色」还是遵从应用的建议，选择一个对比度合理，在当前应用中可以和背景色合理搭配的颜色。

实际效果：

相关代码并没有太多难点，主要还是借助 color 库，通过 color1.contrast(color2) 获取两个颜色之间的对比度实现，这里就不放代码了。

自动计算对比度安全的颜色

另一种解决方案，就有点「强制」的意思了：在用户从色盘选色时，实时计算色值和背景色的对比度，如果 < 3 了，就使用 color.lightness() API 逐步的调整颜色的明暗，确保最后界面上使用的是安全对比度的色值。

核心代码：

function calcLightColor(originColor: string) {

  const white = Color('#fff')

  let c = Color(originColor)

  // 对比度 < 3，循环迭代使颜色越来越暗

  while (c.contrast(white) < 3) {

    // lightness() 可以读取/赋值颜色的 HSL 中的亮度值

    // 如果是计算暗夜模式下的安全前景色，这里应该是 + 1，即让颜色越来越亮

    c = c.lightness(c.lightness() - 1)

  }

  return c.hex()

}



function calcDarkColor(originColor: string() {

	// ...

}

实际效果：

可以看到当用户选择了偏白的颜色时，明亮主题中实际使用的是灰色作为前景色，当用户选了择偏黑的颜色时，也有同样的自适应处理。

总结

在 2024 年的今天，CSS 看似已经足够强大，但是在颜色自适应类似的需求中还是略显不足，还好有 color 这个方便的 JavaScript 库帮助我们实现类似的需求。

无论背景色未知，还是前景色未知，只要设计界面时通过各种手段能保证前景色和背景色的对比度 > 3，那就可以保证界面的可阅读性。当然了，这里的安全对比度阈值是可以调整的，设为 3.5、3.75 都是可以的，但也非常不建议低于 3。

微信PC端输入框支持图片、文件、文字、Emoji四种消息类型，本篇文章就这四种类型的消息输入进行实现。我们选用HTML5新增标签属性contenteditable来实现。

contenteditable属性

contenteditable是一个全局属性，表示当前元素可编辑。

该属性拥有一下三个属性值：

• true或空字符串: 表示元素可编辑


• false: 表示元素不可编辑


• plaintext-only: 表示只有原始文本可编辑，禁用富文本编辑

给div元素添加contenteditable, 将元素变为可编辑的状态

<div contenteditable></div>

文字输入

当鼠标聚焦在输入框内时，会有outline展示，所以要去掉该样式

<!-- index.html -->

<div contenteditable class="editor"></div>

.editor:focus {

    outline:none;

}

此时文本就可以正常输入了

图片输入

图片输入分为两部分

• 截图粘贴


• 图片文件复制粘贴

有的浏览器是直接支持截图图片的粘贴的，不过图片文件的复制粘贴就不是我们想要的效果(会把图片粘贴成一个文件的图标俺不是展示图片)。

我们这里要自己做一个图片的粘贴展示，以兼容所有的浏览器。

这里我们使用浏览器提供的粘贴事件paste来实现

paste事件函数中存在e.clipboardData.files 属性，该属性是一个数组，当该数组大于0时，就证明用户粘贴的是文件；通过判断 file 的 type 属性是否为image/... 来确定粘贴的内容是否为图片。

const editor = document.querySelector(".editor");



/**

 * 处理粘贴图片

 * @param {File} imageFile 图片文件

 */

function handleImage(imageFile) {

  // 创建文件读取器

  const reader = new FileReader();

  // 读取完成

  reader.onload = (e) => {

    // 创建img标签

    const img = new Image();

    img.src = e.target.result;

    editor.appendChild(img);

  };



  reader.readAsDataURL(imageFile);

}



// 添加paste事件

editor.addEventListener("paste", (e) => {

  const files = e.clipboardData.files;

  const filesLen = files.length;

  console.log("files", files);

  // 粘贴内用是否存在文件

  if (filesLen > 0) {

    //禁止默认事件

    e.preventDefault();

    for (let i = 0; i < filesLen; i++) {

      const file = files[i];

      if (file.type.indexOf("image") === 0) {

        // 粘贴的文件为图片

        handleImage(file);

        continue;

      }

      // 粘贴内容是普通文件

    }

  }

});

现在就可以粘贴图片了，无论是截图的图片还是复制的文件图片都可以粘贴到文本框内了。

现在存在的问题就是，图片尺寸太大，会按原尺寸展示图片。微信输入框展示的尺寸为最大宽高150x150

.image {

    max-width: 150px;

    max-height: 150px;

}

现在图片的粘贴展示部分就是解释正常的了

细心的同学注意到了，粘贴图片后光标不会向后移动，这是因为我们禁用了粘贴的默认事件，这里需要我们手动处理光标；因为我们使用了appendChild 将图片插入到了输入框的最后面，就会出现无论光标在哪里，粘贴的图片都是出现在输入框的最后面，我们希望的是在光标所在的地方粘贴内容，接下来我们处理一下光标。

光标处理

处理光标主要以来两个WebAPI , Selection和 Range

• Selection：Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。通过window.getSelection() 获取 Selection 对象。 具体可查阅MDN-Selection


• Range：Range 接口表示一个包含节点与文本节点的一部分的文档片段。可以使用 Document.createRange 方法创建 Range。也可以用 Selection对象的 getRangeAt()方法或者 Document对象的caretRangeFromPoint() 方法获取 Range 对象。具体可查阅MDN-Range

我们使用window.getSelection获取当前位置，通过 getRangeAt()获取当前选中的范围，将选中的内容删除，再把我们自己的内容插入到当前的 Range 中，就实现了文件的输入。在这时插入的文件是选中状态的，所以要将选择范围折叠到结束位置，即在粘贴文本的后面显示光标。

/**

 *  将指定节点插入到光标位置

 * @param {DOM} fileDom dom节点

 */

function insertNode(dom) {

  // 获取光标

  const selection = window.getSelection();

  // 获取选中的内容

  const range = selection.getRangeAt(0);

  // 删除选中的内容

  range.deleteContents();

  // 将节点插入范围最前面添加节点

  range.insertNode(dom);

  // 将光标移到选中范围的最后面

  selection.collapseToEnd();

}

/**

 * 处理粘贴图片

 * @param {File} imageFile 图片文件

 */

function handleImage(imageFile) {

  // 创建文件读取器

  const reader = new FileReader();

  // 读取完成

  reader.onload = (e) => {

    // 创建img标签

    const img = new Image();

    img.src = e.target.result;

-   editor.appendChild(img);

+   insertNode(img);

  };

  reader.readAsDataURL(imageFile);

}

到这里粘贴到光标位置就正常了

文件输入

文件输入分为两部分粘贴文件和选择文件

• 粘贴文件

• 选择文件

粘贴文件

微信是以卡片的方式展示的文件，所以我们先要准备一个类似的dom结构。

/**

 * 返回文件卡片的DOM

 * @param {File} file 文件

 * @returns 返回dom结构

 */

function createFileDom(file) {

  const size = file.size / 1024;

  const templte = `

          <div class="file-container">

            <img src="./assets/PDF.png" class="image" />

            <div class="title">

              <span>${file.name || "未命名文件"}</span>

              <span>${size.toFixed(1)}K</span>

            </div>

          </div>`;

  const dom = document.createElement("span");

  dom.style = "display:flex;";

  dom.innerHTML = templte;

  return dom;

}

.file-container {

    height: 75px;

    width: 405px;

    box-sizing: border-box;

    border: 1px solid rgb(208, 208, 208);

    padding: 13px;

    display: flex;

    justify-content: start;

    gap: 13px;

    background-color: #ffffff;

}

.file-container .image {

    height: 100%;

    object-fit: scale-down;

}

.file-container .title {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

按照微信样式卡片准备DOM的生成函数，如上。

将生成后的DOM加入到光标位置

/**

 * 处理粘贴文件

 * @param {File} file 文件

 */

function handleFile(file) {

  insertNode(createFileDom(file));

}

在页面上就可以看到效果啦

可以看到以上的卡片还是存在问题的，

• 光标位置不在卡片的最后面


• Backspace 不会将整个卡片都删除掉

卡片的删除

因为我们的卡片是DOM，其父元素也就是输入框，开启了contenteditable ，因此它的该属性也继承了父元素的值，所以本身也是可以编辑的。分析到这里，就会涌现出一个方案——将卡片最外层 div 的contenteditable 属性值设为 false 。

但是，设置了 contenteditable="false" 后就变成了不可编辑元素，光标在他周围就不显示了🥹🥹🥹

再接着考虑，思绪一下又回到了图片身上，我们能不能做一个一样的图片呢？答案是肯定的。

说到做图片我们又会有两种方案：

• svg


• canvas

这里就考虑使用SVG制作卡片。

SVG在这里就不多介绍了，直接开始

<svg width="409" height="77" nsxml="http://www.w3.org/2000/svg">

  <!-- 矩形边框 -->

  <rect

    x="2"

    y="0"

    width="405"

    height="75"

    fill="none"

    stroke="rgb(208,208,208)"

  />

  <!-- 右侧文件图标 -->

  <polygon

    points="15 13,36 13,50 30,50 60,15 60"

    fill="rgb(156,193,233)"

    stroke="rgb(0,105,255)"

    stroke-width="2"

  />

  <!-- 图标折叠三角部分 -->

  <polygon points="36 13,36 30,50 30" fill="rgb(0,105,255)" />

  <!-- 文件类型 -->

  <text

    x="32"

    y="50"

    font-size="10"

    text-anchor="middle"

    fill="rgb(0,105,255)"

  >

    xmind

  </text>

  <!-- 文件名称 -->

  <text x="63" y="30" font-size="16">JavaScript.xmind</text>

  <!-- 文件大小 -->

  <text x="63" y="52" font-size="14">206.6K</text>

</svg>

然后就得到了一个卡片

现在我们只要将该卡片使用JS封装，在上传文件的时候调用生成图片就好了。

封装如下：

/**

 * 返回文件卡片的DOM

 * @param {File} file 文件

 * @returns 返回dom结构

 */

function createFileDom(file) {

  const size = file.size / 1024;

  let extension = "未知文件";

  if (file.name.indexOf(".") >= 0) {

    const fileName = file.name.split(".");

    extension = fileName.pop();

  }

  const templte = `

  <rect

    x="2"

    y="0"

    width="405"

    height="75"

    fill="none"

    stroke="rgb(208,208,208)"

  />

  <polygon

    points="15 13,36 13,50 30,50 60,15 60"

    fill="rgb(156,193,233)"

    stroke="rgb(0,105,255)"

    stroke-width="2"

  />

  <polygon points="36 13,36 30,50 30" fill="rgb(0,105,255)" />

  <text

    x="32"

    y="50"

    font-size="10"

    text-anchor="middle"

    fill="rgb(0,105,255)"

  >

   ${extension}

  </text>

  <text x="63" y="30" font-size="16">${file.name || "未命名文件"}</text>

  <text x="63" y="52" font-size="14">${size.toFixed(1)}K</text>

`;

  const dom = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  dom.setAttribute("width", "409");

  dom.setAttribute("height", "77");

  dom.innerHTML = templte;

  const svg = new XMLSerializer().serializeToString(dom);

  const blob = new Blob([svg], {

    type: "image/svg+xml;charset=utf-8",

  });

  const imageUrl = URL.createObjectURL(blob);

  const img = new Image();

  img.src = imageUrl;

  return img;

}

到这里我们的文件粘贴就完成了，来展示

上传文件

上传文件又包含两部分：图片和普通文件

我们需要在这里做一个判断，如果是图片需要将其内容渲染出来，文件用卡片显示。

<div class="controls">

    <img src="./assets/emoji.png" alt="表情" title="表情" />

    <img

      src="./assets/file.png"

      alt="发送文件"

      title="发送文件"

      class="file"

    />

</div>

const fileDom = document.querySelector(".file");



fileDom.addEventListener("click", () => {

  const input = document.createElement("input");

  input.setAttribute("type", "file");

  input.setAttribute("multiple", "true");

  input.addEventListener("change", () => {

    const files = input.files;

    for (let i = 0; i < files.length; i++) {

      const file = files[i];

      fileTypeCheck(file);

    }

  });

  input.click();

});

以上代码，在输入框上方添加了一个文件的icon , 给这个icon 添加点击事件，选择文件并展示。

到这里文件上传就做好了，但是还是存在问题的。

输入框的光标，在鼠标点击页面其他地方的时候会从输入框移出，如果在这时选择文件不会添加到输入框中。

所以，我们在点击文件上传的时候需要叫光标聚焦到输入框。

const fileDom = document.querySelector(".file");



fileDom.addEventListener("click", () => {

+  // 光标聚焦到输入框

+  editor.focus();

  const input = document.createElement("input");

  input.setAttribute("type", "file");

  input.setAttribute("multiple", "true");

  input.addEventListener("change", () => {

    const files = input.files;

    for (let i = 0; i < files.length; i++) {

      const file = files[i];

      fileTypeCheck(file);

    }

  });

  input.click();

});

到这里文件上传就完美了。

总结

以上的源码已经上传到了Github， 想要源码的小伙伴自己去拉。代码读取文件那部分可以使用Promise 进行优化。最后，欢迎大佬批评指正。

一、背景

在讲微前端之前，首先了解下前端开发模式的发展历程，在最早的时候，前端的开发是耦合在服务端，主要的工作其实就是提供一个界面模板，交互也不多，实际的数据还是在服务端渲染的时候提供的。

大概在2010年，界面越来越复杂，调试、部署、都要依赖于后端，如果还是以模板的形式开发效率太低了。于是就提出了前后端分离的模式开发，这个时期也是单页应用开始火起来的时期。

到了2014左右，后端开始了微服务模式的开发，这也为微前端提供的思路。随着前端承担的东西越来越多，不断的迭代后，原本简单的单页应用，已经变成了一个巨石应用，不管是代码量还是页面量都非常庞大，一个单页应用由多个团队一起来维护。同时巨石应用还受到了非常大的约束，比如新技术的更新、打包速度等等问题。

因此，在2019年左右，借鉴微服务的思想，提出了微前端的开发模式，也就是将一个大型的单页应用，以业务域为粒度，拆分为多个子应用，最后通过微前端的技术，整合成一个完整的单页应用，同时，每个子应用也能够享有独立应用开发一致的体验。

二、微前端简介

微前端概念

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。Micro Frontends

微前端（Micro Frontends）是一种前端架构模式，借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个前端应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。

微前端的目标是使前端开发更加容易、可维护和可扩展，并且能够实现团队之间的协作。

微前端的特点

• 技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈


• 独立开发/部署 子应用仓库独立，单独部署，互不依赖


• 增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性


• 独立运行 子应用之间运行时互不依赖，有独立的状态管理


• 提升效率 微应用可以很好拆分项目，提升协作效率


• 可维护性 微前端可以更容易地进行维护和测试，因为它们具有清晰的界限和独立的代码库

劣势

• 增加了系统复杂度 需要对系统进行拆分，将单体应用拆分成多个独立的微前端应用。这种拆分可能导致系统整体变得更加复杂，因为需要处理跨应用之间的通信和集成问题


• 需要依赖额外的工具和技术 例如模块加载器、应用容器等，这些工具和技术需要额外的学习和维护成本，也可能会导致一些性能问题


• 安全性问题 由于微前端应用是独立的，它们之间可能存在安全隐患。例如，如果某个微前端应用存在漏洞，攻击者可能会利用这个漏洞来攻击整个系统


• 兼容性问题 由于微前端应用是独立的，它们之间可能存在兼容性问题。例如，某个微前端应用可能使用了一些不兼容的依赖库，这可能会导致整个系统出现问题


• 开发团队需要有一定的技术水平 实现微前端需要开发团队有一定的技术水平，包括对模块化、代码复用、应用集成等方面有深入的了解。如果团队缺乏这方面的技能，可能会导致微前端实现出现问题

三、微前端的技术实现

3.1 微前端的基础架构

微前端架构基本需要实现三个部分:

• 主应用接入子应用，包括子应用的注册、路由的处理、应用的加载和路由的切换。


• 主应用加载子应用，这部分之所以重要，是因为接入的方式决定了是否可以更高效的解耦。


• 子应用的容器，这是子应用加载之后面临的问题，包含了JS沙箱、样式隔离和消息机制。

3.2 微前端的主要技术问题

1） 构建时组合 VS 运行时组合

主框架与子应用集成的方式

微前端架构模式下，子应用打包的方式，基本分为两种：

要实现真正的技术栈无关跟独立部署两个核心目标，大部分场景下需要使用运行时加载子应用这种方案。

2）JS Entry VS HTML Entry

子应用提供什么形式的资源作为渲染入口？

JS Entry 的方式通常是子应用将资源打成一个 entry script。但这个方案的限制也颇多，如要求子应用的所有资源打包到一个 js bundle 里，包括 css、图片等资源。

HTML Entry 则更加灵活，直接将子应用打出来 HTML 作为入口，主框架可以通过 fetch html 的方式获取子应用的静态资源，同时将 HTML document 作为子节点塞到主框架的容器中。

3）样式隔离

由于微前端场景下，不同技术栈的子应用会被集成到同一个运行时中，所以必须在框架层确保各个子应用之间不会出现样式互相干扰的问题。

“甲之蜜糖，乙之砒霜“，每个方案都有着不同的优势与劣势。

• BEM （Block Element Module）规范命名约束


• CSS Modules 构建时生成各自的作用域


• CSS in JS 使用 JS 语言写 CSS


• Shadow DOM 沙箱隔离


• experimentalStyleIsolation 给所有的样式选择器前面都加了当前挂载容器


• Dynamic Stylesheet 动态样式表


• postcss 增加命名空间

4）JS隔离

一个子应用从加载到运行，再到卸载，有可能会对全局产生一些污染。这些污染包括但不限于：添加 / 删除 / 修改全局变量、绑定全局事件、修改原生方法或对象等。而所有这些子应用造成的影响都可能引起潜在的全局冲突。为此，需要在加载和卸载一个应用的同时，尽可能消除这种影响。目前，主要有两种隔离方式，一种是快照沙箱、另外一种是代理沙箱。

• 快照沙箱的核心思想就是在应用挂载（mount方法）的时候记录快照，在应用卸载（unmount）的时候依据快照恢复环境。
  
  

  实现的思路是直接用 window diff，把当前的环境和原来的环境做一个比较，跑两次循环(创建快照和恢复快照)，然后把两个环境做一次比较，最后去全量的恢复回原来的环境。



• 代理沙箱的核心思想是让子应用里面的环境和外面的环境完全隔离。每个应用对应一个环境，比如应用A对应环境A，应用B对应环境B，同时两者之间的环境和全局环境也互不干扰。
  
  

  实现思路是主要利用 ES6 的 Proxy 能力。通过劫持window，可以劫持到子应用对全局环境的一些修改，当子应用往window上挂载、删除、修改的时候，把操作记录下来，当恢复全局环境时，反向执行之前的操作。

四、微前端方案

实现方式	基本思想	优点	不足	代表方案
路由分发	1.前端框架公共路由方案，映射到不同应用 2.服务器反向代理路由到不同应用	1. 维护、开发成本低；2.适应一些关联方不多、业务场景不发展的情况；	不足：1.独立应用的硬聚合，有比较明显的割裂感	--
前端容器化	iframe 可以创建一个全新的独立的宿主环境，这意味着前端应用之间可以相互独立运行，仅需要做好应用之间的管理、通信即可	1. 比较简单，无需过多改造，开发成本低； 2.完美隔离，JS、CSS 都是独立的运行环境； 3. 不限制使用，页面上可以放多个 iframe 来组合业务	1. 无法保持路由状态，刷新后 iframe url 状态丢失（这点也不是完全不能解决，可以将路由作为参数拼接在链接后，刷新时去参数进行页面跳转）； 2. 全局上下文完全隔离，应用之间通信困难（比如iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果）； 3. iframe 中的弹窗无法突破其本身，无法覆盖全局； 4. 加载慢，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程	Iframe
前端微服务化	前端微服务化，是微服务架构在前端的实施，每个前端应用都是完全独立（技术栈、开发、部署、构建独立）、自主运行的，最后通过模块化的方式组合出完成的应用	1. 应用间通信简单，全局注入； 2. html entry 的方式引入子应用，相比 js entry 极大的降低了应用改造的成本； 3. 完备的js、css 沙箱方案，确保微应用之间的样式/全局变量/事件互相不干扰； 4. 具备静态资源预加载能力，加速微应用打开速度	1. 适配成本比较高，webpack工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作； 2. css 沙箱采用严格隔离会有各种问题，js 沙箱在某些场景下执行性能下降严重； 3. 基于路由匹配，无法同时激活多个子应用，也不支持子应用保活； 4. 无法支持 vite 等 ESM 脚本运行	Single-SPA、qiankun
应用组件化	Web Components 是一套不同的技术，允许开发者创建可重用的定制元素（它们的功能封装在代码之外）并且在 Web 应用中使用它们，其中html imports 被废弃，可以直接加载js即可	1. 使用 类WebComponent 加载子应用相比 single-spa 这种注册监听方案更加优雅a; 2. 组件式的 api 更加符合使用习惯，支持子应用保活; 3. 降低子应用改造的成本，提供静态资源预加载能力; 4. 基于CustomElement和样式隔离、js隔离来实现微应用的加载，所以子应用无需改动就可以接入	1. 类 webcomponent css 沙箱依然无法绝对的隔离; 2. 支持 vite 运行，但必须使用 plugin 改造子应用，且 js 代码没办法做沙箱隔离; 3. 对于不支持 webcompnent 的浏览器没有做降级处理，兼容性不够	micro-app
微件化	微前端下的微件化是指，每个业务团队编写自己的业务代码，并将编译好的代码部署到指定的服务器上，运行时只需要加载指定的代码即可	1. webpack 联邦编译可以保证所有子应用依赖解耦； 2. 应用间去中心化的调用、共享模块； 3. 模块远程 ts 支持	1. 需要相关规范约束各Widget； 2. 没有有效的 css 沙箱和 js 沙箱，需要靠用户自觉； 3. 子应用保活、多应用激活无法实现； 4. 主、子应用的路由可能发生冲突	EMP

五、iframe 项目实践

5.1 iframe的概念以及作用

iframe（内联框架）是HTML标签，也是一个内联元素，作用是文档中的文档，或者浮动的框架(FRAME)，iframe 元素会创建包含另外一个HTML文档的内联框架（即行内框架) 。

简言之，iframe可以在当前页面嵌入其他页面

5.2 优缺点

优点：

缺点：

5.3 主要属性

5.4 父子页面通信

5.4.1 单向通信（父传子）

URL传参： 可以在iframe的src属性中使用URL参数，将父页面的数据传递到iframe嵌入的页面。

<iframe src="http://new-iframe-url?param1=value1&param2=value2"></iframe>

5.4.2 双向通信

父页面和子页面（即iframe内的页面）的通信机制，分为两种

（1）同源的父子页面通信：

如果父页面和子页面同源，可以直接通过JavaScript访问对方的DOM。这是因为同源策略允许同源的文档之间进行完全的交互。

父页面可以通过iframe元素的contentWindow属性获取子页面的window对象，然后直接调用其函数或访问其变量。同样，子页面也可以通过window.parent获取父页面的window对象。

父页面访问子页面：

// 获取iframe元素

const iframe = document.getElementById('myIframe');

// 获取子页面的window对象

const childWindow = iframe.contentWindow;

// 调用子页面的函数

childWindow.myFunction();

// 访问子页面的变量

console.log(childWindow.myVariable);

// 修改子页面的DOM

childWindow.document.getElementById('myElement').innerText = 'hhhh';

子页面访问父页面：

// 获取父页面的window对象

var parentWindow = window.parent;

// 调用父页面的函数

parentWindow.myFunction();

// 访问父页面的变量

console.log(parentWindow.myVariable);

// 修改父页面的DOM

parentWindow.document.getElementById('myElement').innerText = 'hhhh';

(2)不同源的父子页面通信：

如果父页面和子页面不同源，则不能直接通过JavaScript访问对方的DOM。但可以通过HTML5的postMessage API进行跨源通信。

具体来说，一个页面可以通过postMessage方法向另一个页面发送消息，然后另一个页面通过监听message事件来接收这个消息。

父页面发送消息到子页面：

var iframe = document.getElementById('myIframe');

iframe.contentWindow.postMessage('Hello', 'https://example.com');

子页面接收来自父页面的消息：

window.addEventListener('message', function(event) {

  if (event.origin !== 'https://parent.com') return;

  console.log('received message:', event.data);

});

5.5 项目中遇到的问题

问题描述

背景：页面初始化时，子应用iframe要从主应用获取cookie，实现免登

问题实现步骤：清除主应用的cookie，刷新页面，点击加载子应用，此时没获取到cookie，接口报鉴权错误

问题原因

1）异步获取 cookie：cookie 是通过 postMessage 从父页面异步获取的，在发送 HTTP 请求时，cookie可能尚未获取或存储在 sessionStorage 中

2）立即发送请求：在页面组件的 useEffect 钩子中，当组件挂载时立即发送请求，而不等待 cookie 的获取和存储，导致请求发出时缺少 cookie，造成请求失败

cookie交互流程

修复方案

为了确保 token 在 HTTP 请求发送之前已经成功获取并存储，需要实现以下步骤：

1）等待 token 被存储：在 httpMethod 中添加一个辅助函数，用于轮询 sessionStorage，直到 token 被存储

2）在请求之前检查并等待 token：在每个 HTTP 请求方法中，在请求实际发送之前，先调用辅助函数等待 token 被存储

具体实现

修改 api.js文件

1）创建一个waitForToken函数用于等待cookie中的 token

每隔 100ms 检查一次 sessionStorage 中是否存在 Access-Token，并返回一个 Promise。若存在 token ，调用 resolve(token) 方法将 Promise 标记为成功，并返回 token，否则等待 200 毫秒，再次检查token是否存在

const waitForToken = (timeout = 20000) => {

  return new Promise((resolve) => {

    const startTime = Date.now();

    const checkToken = () => {

      const token = window.sessionStorage.getItem("Access-Token");

      if (token) {

        resolve(token);  //找到 token，通过 resolve 通知任务成功完成

      } else if (Date.now() - startTime >= timeout) {

        resolve(null); // 超时后返回 null

      } else {

        setTimeout(checkToken, 200); //如果没找到，每200ms检查一次

      }

    };

    checkToken();

  });

};

2）修改httpMethod

在每个请求方法里调用 waitForToken， 确保在发送请求之前获取到 token，并在获取到 token 后将其从 sessionStorage 中取出并添加到请求头中

const httpMethod = {

  get: async (url, params) => {

    const token = await waitForToken();  //获取token

    return axios

      .get(api + url, {

        params: params,

        headers: Object.assign(

          headers("json"),

          { "Access-Token": JSON.parse(token) },

          options.headers || {}

        ),

      })

      .then(dataError, errorHandle);

  },

 postJson: async (url, data, options = {}) => {

    const token = await waitForToken();  //获取token

    return axios

      .post(api + url, data, {

        ...options,

        headers: Object.assign(

          headers("json"),

          { "Access-Token": JSON.parse(token) },

          options.headers || {}

        ),

      })

      .then(dataError, errorHandle);

  },

}

六、总结

微前端能否做到利大于弊，具体取决于实际情况和条件。对于小型、高度协作的团队和相对简单的产品来说，微前端的优势相比代价来说就很不明显了；而对于大型、功能众多的产品和许多较独立的团队来说，微前端的好处就会更突出。

工程就是权衡的艺术，而微前端提供了另一个可以做权衡的维度。

学习资料：

• Microfrontends: the good, the bad, and the ugly


• 万字长文-落地微前端 qiankun 理论与实践指北

源码实现思路（面试高分回答） 📖

面试官问我 Vue 的 nextTick 原理是怎么实现的，我这样回答：

在调用 this.$nextTick(cb) 之前：

当调用 this.nextTick(cb) 时：

graph TD

    A["this.$nextTick(callback)"] --> B[将回调函数 callback 放入到数组 callbacks 中]

    B --> C[判断是否是第一次调用 nextTick]

    C -->|是| D[执行 timerFunc, 将 flushCallbacks 添加到任务队列]

    C -->|否| F[如果没有 cb, 则retrun Promise]

    D --> F

    F --> 结束

如果上面的描述没有很理解。没关系，花几分钟跟着我下面来，看完下面的源码逐行讲解，你一定能够清晰地向别人讲出你的思路！

nextTick思路详解 🏃‍♂‍➡

1. 核心代码 🌟

下面用十几行代码，就已经可以基本实现nextTick的功能（默认浏览器支持Promise)

// 存储所有的cb回调函数

const callbacks = [];

/*类似于节流的标记位，标记是否处于节流状态。防止重复推送任务*/

let pending = false;



/*遍历执行数组 callbacks 中的所有存储的cb回调函数*/

function flushCallbacks() {

  // 重置标记，允许下一个 nextTick 调用

  pending = false;

  /*执行所有cb回调函数*/

  for (let i = 0; i < callbacks.length; i++) {

    callbacks[i]();

  }

  // 清空回调数组，为下一次调用做准备

  callbacks.length = 0;

}



function nextTick(cb) {

  // 将回调函数cb添加到 callbacks 数组中

  callbacks.push(() => {

    cb();

  });

  

  // 第一次使用 nextTick 时，pending 为 false，下面的代码才会执行

  if (!pending) {

    // 改变标记位的值，如果有flushCallbacks被推送到任务队列中去则不需要重复推送

    pending = true;

    // 使用 Promise 机制，将 flushCallbacks 推送到任务队列

    Promise.resolve().then(flushCallbacks);

  }

}

测试一下：

let message = '初始消息';

  

nextTick(() => {

  message = '更新后的消息';

  console.log('回调：', message); // 输出2: 更新后的消息

});



console.log('测试开始：', message); // 输出1: 初始消息

如果你想要应付面试官，能手写这部分核心原理就已经差不多啦。

如果你想彻底掌握它，请继续跟着我来！！！🕵🏻‍♂

2. nextTick() 返回promise 🌟

我们在开发中，会使用await this.$nextTick();让其下面的代码全部变成异步代码。
比如写成这样：

await this.$nextTick();

......

......



// 或者

this.$nextTick().then(()=>{

    ......

})

核心就是nextTick()如果没有参数，则返回一个promise

const callbacks = [];

let pending = false;



function flushCallbacks() {

  pending = false;

  for (let i = 0; i < callbacks.length; i++) {

    callbacks[i]();

  }

  callbacks.length = 0;

}



function nextTick(cb) {

  // 用于存储 Promise 的resolve函数

  let _resolve;

  callbacks.push(() => {

  /* ------------------ 新增start ------------------ */

    // 如果有cb回调函数，将cb存储到callbacks

    if (cb) {

      cb();

    } else if (_resolve) {

    // 如果参数cb不存在，则保存promise的的成功回调resolve

      _resolve();

    }

  /* ------------------ 新增end ------------------ */

  });

  if (!pending) {

    pending = true;

    Promise.resolve().then(flushCallbacks);

  }

  

  /* ------------------ 新增start ------------------ */

  if (!cb) {

    return new Promise((resolve, reject) => {

      // 保存resolve到callbacks数组中

      _resolve = resolve;

    });

  }

  /* ------------------ 新增end ------------------ */

}

测试一下：

async function testNextTick() {

  let message = "初始消息";

  

  nextTick(() => {

    message = "更新后的消息";

  });

  console.log("传入回调：", message); // 输出1: 初始消息



  // 不传入回调的情况

  await nextTick(); // nextTick 返回 Promise

  console.log("未传入回调后：", message); // 输出2: 更新后的消息

}



// 运行测试

testNextTick();

3. 判断浏览器环境 🔧

为了防止浏览器不支持 Promise，Vue 选择了多种 API 来实现兼容 nextTick：

    Promise --> MutationObserver --> setImmediate --> setTimeout

// 存储所有的回调函数

const callbacks = [];

/* 类似于节流的标记位，标记是否处于节流状态。防止重复推送任务 */

let pending = false;



/* 遍历执行数组 callbacks 中的所有存储的 cb 回调函数 */

function flushCallbacks() {

  // 重置标记，允许下一个 nextTick 调用

  pending = false;

  /* 执行所有 cb 回调函数 */

  for (let i = 0; i < callbacks.length; i++) {

    callbacks[i](); // 依次调用存储的回调函数

  }

  // 清空回调数组，为下一次调用做准备

  callbacks.length = 0;

}



// 判断最终支持的 API：Promise / MutationObserver / setImmediate / setTimeout

let timerFunc;



if (typeof Promise !== "undefined") {

  // 创建一个已resolve的 Promise 实例

  var p = Promise.resolve();

  // 定义 timerFunc 为使用 Promise 的方式调度 flushCallbacks

  timerFunc = () => {

    // 使用 p.then 方法将 flushCallbacks 推送到微任务队列

    p.then(flushCallbacks);

  };

} else if (

  typeof MutationObserver !== "undefined" &&

  MutationObserver.toString() === "[object MutationObserverConstructor]"

) {

  /* 新建一个 textNode 的 DOM 对象，用 MutationObserver 绑定该 DOM 并指定回调函数。

   在 DOM 变化的时候则会触发回调，该回调会进入主线程（比任务队列优先执行），

   即 textNode.data = String(counter) 时便会加入该回调 */

   var counter = 1; // 用于切换文本节点的值

   var observer = new MutationObserver(flushCallbacks); // 创建 MutationObserver 实例

   var textNode = document.createTextNode(String(counter)); // 创建文本节点

   observer.observe(textNode, {

      characterData: true, // 监听文本节点的变化

   });

   // 定义 timerFunc 为使用 MutationObserver 的方式调度 flushCallbacks

  timerFunc = () => {

    counter = (counter + 1) % 2; // 切换 counter 的值（0 或 1）

    textNode.data = String(counter); // 更新文本节点以触发观察者

  };

} else if (typeof setImmediate !== "undefined") {

  /* 使用 setImmediate 将回调推入任务队列尾部 */

  timerFunc = () => {

    setImmediate(flushCallbacks); // 将 flushCallbacks 推送到宏任务队列

  };

} else {

  /* 使用 setTimeout 将回调推入任务队列尾部 */

  timerFunc = () => {

    setTimeout(flushCallbacks, 0); // 将 flushCallbacks 推送到宏任务队列

  };

}



function nextTick(cb) {

  // 用于存储 Promise 的解析函数

  let _resolve; 

  // 将回调函数 cb 添加到 callbacks 数组中

  callbacks.push(() => {

    // 如果有 cb 回调函数，将 cb 存储到 callbacks

    if (cb) {

      cb();

    } else if (_resolve) {

      // 如果参数 cb 不存在，则保存 Promise 的成功回调 resolve

      _resolve();

    }

  });



  // 第一次使用 nextTick 时，pending 为 false，下面的代码才会执行

  if (!pending) {

    // 改变标记位的值，如果有 nextTickHandler 被推送到任务队列中去则不需要重复推送

    pending = true;

    // 调用 timerFunc，将 flushCallbacks 推送到合适的任务队列

    timerFunc(flushCallbacks);

  }



  // 如果没有 cb 且环境支持 Promise，则返回一个 Promise

  if (!cb && typeof Promise !== "undefined") {

    return new Promise((resolve) => {

      // 保存 resolve 到 callbacks 数组中

      _resolve = resolve;

    });

  }

}

你真的太牛了，居然几乎全部看完了！

Vue纯源码

    上面的代码实现，对于 nextTick 功能已经非常完整了，接下来我将给你展示出 Vue 中实现 nextTick 的完整源码。无非是加了一些判断变量是否存在的判断。看完上面的讲解，我相信聪明的你一定能理解 Vue 实现 nextTick 的源码了吧！💡

// 存储所有的 cb 回调函数

const callbacks = [];

/* 类似于节流的标记位，标记是否处于节流状态。防止重复推送任务 */

let pending = false;



/* 遍历执行数组 callbacks 中的所有存储的 cb 回调函数 */

function flushCallbacks() {

  pending = false; // 重置标记，允许下一个 nextTick 调用

  const copies = callbacks.slice(0); // 复制当前的 callbacks 数组

  callbacks.length = 0; // 清空 callbacks 数组

  for (let i = 0; i < copies.length; i++) {

    copies[i](); // 执行每一个存储的回调函数

  }

}

// 判断是否为原生实现的函数

function isNative(Ctor) {

  // 如Promise.toString() 为 'function Promise() { [native code] }'

  return typeof Ctor === "function" && /native code/.test(Ctor.toString());

}



// 判断最终支持的 API：Promise / MutationObserver / setImmediate / setTimeout

let timerFunc;



if (typeof Promise !== "undefined" && isNative(Promise)) {

  const p = Promise.resolve(); // 创建一个已解决的 Promise 实例

  timerFunc = () => {

    p.then(flushCallbacks); // 使用 p.then 将 flushCallbacks 推送到微任务队列



    // 在某些有问题的 UIWebView 中，Promise.then 并不会完全失效，

    // 但可能会陷入一种奇怪的状态：回调函数被添加到微任务队列中，

    // 但队列并没有被执行，直到浏览器需要处理其他工作，比如定时器。

    // 因此，我们可以通过添加一个空的定时器来“强制”执行微任务队列。

    if (isIOS) setTimeout(() => {}); // 解决iOS 的bug，推迟 空函数 的执行（如果不理解，建议忽略）

  };

} else if (

  typeof MutationObserver !== "undefined" &&

  (isNative(MutationObserver) ||

    MutationObserver.toString() === "[object MutationObserverConstructor]")

) {

  let counter = 1; // 用于切换文本节点的值

  const observer = new MutationObserver(flushCallbacks); // 创建 MutationObserver 实例

  const textNode = document.createTextNode(String(counter)); // 创建文本节点

  observer.observe(textNode, {

    characterData: true, // 监听文本节点的变化

  });

  // 定义 timerFunc 为使用 MutationObserver 的方式调度 flushCallbacks

  timerFunc = () => {

    counter = (counter + 1) % 2; // 切换 counter 的值（0 或 1）

    textNode.data = String(counter); // 更新文本节点以触发观察者

  };

} else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {

  timerFunc = () => {

    setImmediate(flushCallbacks); // 使用 setImmediate 推送到任务队列

  };

} else {

  timerFunc = () => {

    setTimeout(flushCallbacks, 0); // 使用 setTimeout 推送到宏任务队列

  };

}



function nextTick(cb, ctx) {

  let _resolve; // 用于存储 Promise 的解析函数

  // 将回调函数 cb 添加到 callbacks 数组中

  callbacks.push(() => {

    if (cb) {

      try {

        cb.call(ctx); // 执行传入的回调函数

      } catch (e) {

        handleError(e, ctx, "nextTick"); // 错误处理

      }

    } else if (_resolve) {

      _resolve(ctx); // 解析 Promise

    }

  });

  // 第一次使用 nextTick 时，pending 为 false，下面的代码才会执行

  if (!pending) {

    pending = true; // 改变标记位的值

    timerFunc(); // 调用 timerFunc，调度 flushCallbacks

  }

  // 如果没有 cb 且环境支持 Promise，则返回一个 Promise

  if (!cb && typeof Promise !== "undefined") {

    return new Promise((resolve) => {

      _resolve = resolve; // 存储解析函数

    });

  }

}

总结

      通过这样分成三步、循序渐进的方式，我们深入探讨了 nextTick 的原理和实现机制。希望这篇文章能够对你有所帮助，让你在前端开发的道路上更加得心应手！🚀

前言

最近写一个移动端的项目，用到了vant做UI界面设计，不得不再次感叹开源的力量，这个组件库封装的实在是太优雅了，只要你愿意看官方文档，就不会担心看不懂，也不会担心不会用，接下来就带大家去浅尝一下这个组件库。官网文档：Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

Vant

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。

可以看到，移动端，用来做移动端的ui界面。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

特性

• 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）


• 🚀 80+ 个高质量组件，覆盖移动端主流场景


• 🚀 零外部依赖，不依赖三方 npm 包


• 💪 使用 TypeScript 编写，提供完整的类型定义


• 💪 单元测试覆盖率超过 90%，提供稳定性保障


• 📖 提供丰富的中英文文档和组件示例


• 📖 提供 Sketch 和 Axure 设计资源


• 🍭 支持 Vue 2、Vue 3 和微信小程序


• 🍭 支持 Nuxt 2、Nuxt 3，提供 Nuxt 的 Vant Module


• 🍭 支持主题定制，内置 700+ 个主题变量


• 🍭 支持按需引入和 Tree Shaking


• 🍭 支持无障碍访问（持续改进中）


• 🍭 支持深色模式


• 🍭 支持服务器端渲染


• 🌍 支持国际化，内置 30+ 种语言包

没错，这是官网复制来的介绍。

那么从官方文档可以看到目前这是Vant4.x，适用于vue3，如果你用的是vue2，那么就用Vant2。我们切换到快速上手，就能看到如何快速入门使用

Vant使用

1.安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue 3 项目，安装最新版 Vant

npm i vant



# Vue 2 项目，安装 Vant 2

npm i vant@latest-v2

看得出来，非常优雅，最新版直接安装vant，如果不是最新的才加了些-2...

当然，你也可以通过 yarn、pnpm 或 bun 进行安装：什么方式都有，大家可以自己参照官方文档。

# 通过 yarn 安装

yarn add vant



# 通过 pnpm 安装

pnpm add vant



# 通过 Bun 安装

bun add vant

那么引入之后如何使用呢？我们常常需要做一个登陆注册页面，看看有了vant组件库之后，我们还需要去切页面吗？

此处我们需要放一个表单，接下来我们查阅官方文档，看看vant的表单如何使用。

2.引入

写的很清楚，表单会用到三个组件，我们只需要从vant库中引入这三个组件，然后都use掉即可

import { createApp } from 'vue';

import { Form, Field, CellGr0up } from 'vant';



const app = createApp();

app.use(Form);

app.use(Field);

app.use(CellGr0up);

引入之后，就可以在我们需要用到表单的页面使用了。直接将他写好的表单复制到我们的代码中

<van-form @submit="onSubmit">

  <van-cell-group inset>

    <van-field

      v-model="username"

      name="用户名"

      label="用户名"

      placeholder="用户名"

      :rules="[{ required: true, message: '请填写用户名' }]"

    />

    <van-field

      v-model="password"

      type="password"

      name="密码"

      label="密码"

      placeholder="密码"

      :rules="[{ required: true, message: '请填写密码' }]"

    />

  </van-cell-group>

  <div style="margin: 16px;">

    <van-button round block type="primary" native-type="submit">

      提交

    </van-button>

  </div>

</van-form>

可以看到，它使用了v-model双向绑定，因此我们就需要自己去定义一个username、passwor...看需要用到什么，然后官方文档就直接了当告诉我们了这些变量

import { ref } from 'vue';



export default {

  setup() {

    const username = ref('');

    const password = ref('');

    const onSubmit = (values) => {

      console.log('submit', values);

    };



    return {

      username,

      password,

      onSubmit,

    };

  },

};

• 注意他这里提交表单事件，直接接收了一个参数values，事实上这个values可以直接通过values.name，我们input框上的name属性代表的input框拿到的数据，在这里其实就是values.用户名，所以我们可以直接改成英文，如：values.username。

在官方文档上也能看见他的样式，甚至可以做校验

除此之外，再介绍一个，例如微信中点击某个东西成功之后，就会弹出一个弹出框，打勾，或者失败，如果这么一个UI界面要我们自己去写可能多少也有点麻烦，但是vant都给我们封装好了

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';

import { Toast } from 'vant';



const app = createApp();

app.use(Toast);

显然就是引入一个封装好了的Toast组件，然后use掉，vant官方都给我们想好了，一般这种弹出提示框都是我们js中做判断，如果成功就弹出，因此一般都出现在函数里面，官方就直接给我们打造了函数调用的方式

import { showToast } from 'vant';



showToast('提示内容');

全局引入依赖之后，在js中直接引入，然后直接调用就能出现效果，帮助咱们切图仔省去了不少麻烦事儿。

除了成功、失败，他甚至可以自定义写图标，也是极度舒适了。

看看我的登录页面是如何使用的：

<template>

    <div class="login">

        <h1>登录</h1>

        <div class="login-wrapper">

            <div class="avatar">

                <img src="https://q6.itc.cn/q_70/images03/20240601/80b789341c9b45cb8a76238650d288a5.png" alt="">

            </div>



            <van-form @submit="onSubmit">

                <van-cell-group inset>

                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名"

                        :rules="[{ required: true, message: '请填写用户名' }]" />

                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"

                        :rules="[{ required: true, message: '请填写密码' }]" />

                </van-cell-group>

                <div style="margin: 16px;">

                    <van-button round block type="primary" native-type="submit">

                        登录

                    </van-button>

                </div>

            </van-form>





        </div>

    </div>

</template>



<script setup>

import { ref } from 'vue'

import axios from '@/api/index.js'

const password = ref('')

const username = ref('')

// 登录

const onSubmit = (values) => {

    // console.log(values); // 用户输入的账号和密码对象 name作为key

    // 发送接口请求给后端 校验数据 

    axios.post('/user/login', {

        username: values.username,

        password: values.password

    }).then((res) => {

        console.log(res);

    })

}

</script>



<style lang="less" scoped>

.login {

    width: 100vw;

    height: 100vh;

    background-color: #fff;

    padding: 0 0.3rem;

    box-sizing: border-box;

    overflow: hidden;



    h1 {

        height: 0.6933rem;

        text-align: center;

        font-size: 0.48rem;

        margin-top: 1.12rem;

    }



    .login-wrapper {

        width: 7.44rem;

        height: 10.77rem;

        border: 1px solid rgba(187, 187, 187, 1);

        margin: 0 auto;

        margin-top: 1.7rem;

        border-radius: 0.3rem;

        box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1);



        .avatar {

            width: 2.4rem;

            height: 2.4rem;

            margin: 1rem auto 0.77rem auto;

            border-radius: 50%;

            overflow: hidden;



            img {

                width: 100%;

            }

        }

    }

}



:deep(.van-cell__title.van-field__label) {

    width: 45px;

}

</style>

非常方便，跟着上述步骤，官方文档写的很清楚，直接贴上去就实现了，然后自己再加一些less样式。

那么其他的就不做过多介绍了，大家在做项目需要用到一些东西的时候，直接查阅官方文档，直接拿去用即可。Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

在这里我写的都是rem单位，目的是做移动端的适配，根据宽度调整fontsize的大小，其实也可以通过vant封装好的移动端适配组件来做，这里不做过多介绍了。

小结

Vant 是一个轻量、可靠的移动端组件库，可用于快速构建风格统一的移动端 UI 界面。它提供了一系列高质量的组件，涵盖了导航、表单、按钮、列表、轮播图等常用功能。

我们只需要安装依赖后引入依赖还有在全局中引入他的整份css代码，最后按需取组件，就能轻松完成ui界面设计。