浮生离梦的博客

一、微前端之实践应用间的全局状态管理、应用缓存和预加载子应用1. 全局状态管理，应用间的全局 `store`，如下所示：- 在 `micro` 下的 `store` 中 `index.js`，对外暴露 `createStore`，使用 `store` 管理 `initData`，`observers` 管理所有的订阅者和依赖，通过 `getStore` 获取 `store`，通过 `update` 更新 `store`。当 `store` 发生变化，通知订阅者，执行 `store` 的操作，进行缓存，将

一、微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信1. 微前端环境变量设置，如下所示：- 在 `micro` 下的 `sandbox` 中 `performScript.js`，`performScriptForFunction` 是执行 `js` 脚本，`performScriptForEval` 是获取到子应用的内容，代码如下：...

一、微前端之实践主应用的生命周期、微前端的生命周期、 加载和解析 html 及 js1. 主应用的生命周期，如下所示：- 在主应用 `main` 下的 `util` 中的 `index.js` 中，在 `registerApp` 中的 `registerMicroApps` 方法注册到微前端框架里，传入第二个参数生命周期，`beforeLoad` 是开始加载，`mounted` 是渲染完成，`destoryed` 是卸载完成，`index.js`，代码如下：...

一、微前端之实践子应用的注册、路由拦截和获取首个子应用1. 子应用的注册，如下所示：- 首先需要一个子应用注册的列表，在主应用 `main` 的 `store` 文件夹中，新建 `sub.js`，对外暴露 `subNavList` 这个子应用的列表。`subNavList` 是一个数组，每一个子元素都是一个子应用，`name` 是子应用名称，唯一 `ID`； `entry` 是子应用的入口，获取到子应用的文件；`container` 是子应用的渲染内容，显示在哪个容器中；`activeRule` 是子.

一、微前端之实现方式和项目分析1. 微前端实现方式对比，如下所示：- `Iframe`，`Iframe` 的优势是技术成熟，支持页面嵌入，天然支持运行沙箱隔离、独立运行。`Iframe` 的劣势是页面之间可以是不同的域名，需要对应的设计一套应用通讯机制，如何监听、传参格式等内容，应用加载、渲染、缓存等体系的实现- `web component`，`web component` 的优势是支持自定义元素、支持 `shadow down`，并可通过关联进行控制，支持模版 `template` 和插槽 `sl

一、微前端之前端架构、软件设计原则及分层、架构设计的质量、架构前期准备、技术填补及崩溃预防和系统重构1. 前端架构是如何产生的，如下所示：- 初始，无架构，前端代码内嵌到后端应用中，`js` 代码混入到后端代码- 后端 `mvc` 架构，将视图层、数据层、控制层做分离，缺点是重度依赖开发环境，代码混淆严重。`controller` 层修改数据到 `modal` 层，修改显示到 `view` 层，`view` 层获取数据到 `modal` 层- 前后端分离架构，将前端代码从后端环境中提炼出来，`aja

一、react 中实现图片分批加载优化加载卡顿问题1. 在 `react` 中，当页面图片数量太多时，一次性请求所有的图片，会很卡顿造成用户的体验不好，可以采用分批加载的方式去请求图片进行优化。2. 对于优化的实现思路，先将所要渲染 `image `的 `url` 置空。在 `loadImages` 函数中，`needToLoadList` 为所有图片的路径，`maxLoadedNum` 为最大加载数量，`curLoadedImgList` 为正在加载的图片列表，`loadIndex` 为当前加载的图片

一、自动复制剪切板1. 在将文本信息获取后，需要自动复制剪切板，代码如下所示：```jshandleCopyClipboard = (content) => { const inputDom = document.createElement('input'); inputDom.setAttribute('value', content); document.body.appendChild(inputDom); inputDom.select(); document.execCo

一、Vite 高级应用的 rollup 配置文件、rollup 插件、vite 插件、vite 钩子及执行时机和 vite 的 HMRVite 是基于 rollup 和 esbuild 实现的。Rollup 是开源类库优先的选择，以 ESM 标准为目标的构建工具，打包基于 tree shaking 功能。通过 npm i -g rollup 命令安装 rollup，rollup.config.js，代码如下：import json from '@rollup/plugin-json';import

一、Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出Vite 中的热更新，通过 Vite 命令行生成的项目默认都开启了热更新，同时 Vite 中的热更新是根据不同框架去实现的。HMR API，对于 import.meta.hot，通过 vite build 去 build 代码之后，在 build 的 production 的 bundle 里面是没有 hot 代码的，对于发布线上的代码是没有 hot 的需要，需要判断。对于

一、Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置在 vite 中，对于 ts 只编译不校验。如果需要对 ts 校验，只能使用 tsc。通过 tsc --noEmit 命令，对 ts 只校验不把编译文件做输出，如下所示：通过 yarn add typescript 命令添加 typescript新增 tsconfig.json，代码如下：{ "compilerOp

一、Vite 的认识Vite 是构建工具，高阶封装，Vite 的特点，如下所示：开发时效率极高开箱即用，功能完备社区丰富，兼容 rollup超高速热重载预设应用和类库打包模式前端类库无关Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别，如下所示：High Level API不包含自己编译能力完全基于 ESM 加载方式的开发时Vite 减少了很多配置量，减少的工作，

一、Vue 基础之单文件组件 todoList、vue-router 路由和 vuex单文件组件实现 todoList，如下所示：// App.vue<template> <div> <input v-model="inputValue" /> <button class="button" @click="handleAddItem">提交</button> </div> <ul>

一、Vue 基础之 setup、ref 及 reactive、toRef 及 context、TodoList、computed、watch 及 watchEffect、生命周期函数新写法、provide 及 injectsetup 是在 created 实例被完全初始化之前执行的函数，接收 props 和 context 参数。在 setup 中返回出来的数据和方法可以被模版、外部等使用，但不能使用外部的数据和方法，因为此时 app 实例并没有被挂载，同时 setup 中是不能使用 this 以及实例

一、Vue 基础之 mixin 混入、自定义指令、teleport、render 函数、插件和数据校验插件mixin 混入，组件 data、methods 优先级高于 mixin data 优先级、methods 优先级，组件中有则执行组件中的，组件中没有的则执行 mixin 中的。生命周期函数，先执行 mixin 里面的，再执行组件里面的，如下所示：const myMixin = { data() { return { number: 2, count: 2

一、Vue 基础之过渡动画、单元素组件的过渡动画、组件及元素切换动画、列表动画和状态动画过渡和动画，如下所示：const app = Vue.createApp({ data() { return { styleObj: { background: 'blue' } } }, methods: { handleClick() { if (this.styleObj.background === 'blue') {

一、Vue 基础之组件、组件传值、单项数据流、Non-props、父子组件通信、组件双向绑定、插槽、作用域插槽、动态组件、异步组件、provide 和 inject组件的定义，组件具备复用性。全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议，小写字母单词，中间用横线间隔。局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大写字母开头，驼峰命名。局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射，如下所示：con

一、Vue 的应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令createApp 表示创建一个 Vue 应用，存储到 app 变量中。传入的参数表示，这个应用最外层的组件，应该如何展示。MVVM 设计模式，m -> model 数据，v -> view 视图，vm -> viewModel 视图数据连接层，vm 代表的就是 vue 应用的根组件，如下所示：const app = Vue.c

一、Linux 的 awk 判断及循环、awk 数组及函数、防火墙、iptables 规则及过滤、firewalld、SSH、FTP、vsftpd 配置文件及虚拟用户、samba 服务、NFS 服务、Nginx 基本配置文件及域名虚拟主机、LAMP、DNS 和 NASawk 条件语句，如下所示：条件语句使用 if 开头，根据表达式的结果来判断执行哪条语句，如下： if (表达式) awk语句1 [else awk语句2 ]如果有多个语句需要执行可以使用 {} 将多个语句括

一、Linux 的自定义函数、系统函数库、资源脚本控制、信号、一次性计划任务、周期性计划任务、脚本加锁、元字符、find、sed 及 awk、sed 替换命令、sed 指令及其它指令、sed 多行模式空间、保持空间、awk 字段和表达式自定义函数，如下所示：函数用于"包含"重复使用的命令结合自定义函数，如下：function fname(){ 命令}函数的执行，fname自定义函数，如下所示：函数作用范围的变量，local 变量名函数的参数，$1 $2 $3 ..