又是持续学习的一天！这篇文章给大家分享前端中一些原理性问题，以及开发中一些功能的实现，分别为：
-
Form表单字段校验如何实现
-
Vue 项目中 data-v-xxx 的生成
-
Vue项目打包后产生的 JS 请求
-
远程加载 .vue 组件并使用
-
render函数实现一个菜单下拉框
一、Form表单字段校验如何实现
每个前端开发者肯定都接触过 Form 表单组件，组件库都会有这个组件，平时用得也非常多，但是我们很容易忽略它的一些功能是怎么实现的，比如表单校验是如何实现的？为啥每次输入的时候，就能马上触发到表单的校验呢？这些都是值得我们去深究的问题，只有这样才能不断提升开发能力！
下面以一个例子来研究表单校验功能的实现：
<template>
<div>
<a-form :rules="rules" :data="formData">
<a-form-item field="name">
<a-input v-model="formData.name" />
</a-form-item>
</test-form>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import AForm from './Form.vue';
import AFormItem from './Form-Item.vue'
import AInput from './Input.vue';
const rules = {
name: {
required: true
}
}
const formData = reactive({
name: '哈哈哈'
})
</script>
其实校验的核心功能就是三个东西
-
表单规则：在 a-form 中
-
表单字段：在 a-form-item 中
-
表单的值：在 a-input 中
我们可以通过表单字段去获取到实时的表单值，接着去表单规则中去匹配，就可以获取到校验结果了；只有将这三个东西结合起来，才能做到校验，他们的关系如下图：
大致分为几步：
-
1、Form 将 rules、validate 传给 From-Item
-
2、Form-Item 将 field、onChange 函数传给 Input
-
3、Input 的 value 改变时触发 validate、onChange 函数去执行校验，并且决定错误提示的展示
为了传值方便，这里主要采用 provide、inject 的方式（Vue3 中组件之间传值的方式）
1. 具体实现——Form
Form 组件的作用：执行校验函数的主要逻辑，根据传入的 field 判断该字段的校验是否通过，然后将校验结果存到 errorMap 中。
<template>
<form>
<slot></slot>
</form>
</template>
<script lang="ts" setup>
import { provide, reactive } from 'vue'
const props = defineProps<{ rules: any; data: any }>();
const errorMap = reactive<any>({})
const validateFn = (field: string): Promise<void> => {
return new Promise((resolve, reject) => {
const { rules, data } = props;
const ruleItem = rules[field]
const dataItem = data[field]
if (ruleItem.required && dataItem === '') {
return reject()
}
resolve()
});
};
const validate = (field: string) => {
validateFn(field).then(() => {
errorMap[field] = false
}).catch(() => {
errorMap[field] = true
})
}
provide('a-form', {
validate,
getErrorMap: () => errorMap
})
</script>
2. 具体实现——From-Item
From-Item 组件的作用：提供 onChange 方法以及需要校验的字段 field，当 validate 执行完后获取校验的结果，然后决定是否展示错误提示
<template>
<div>
<slot></slot>
<div style="color: red" v-if="data.showError">字段必填</div>
</div>
</template>
<script lang="ts" setup>
import { provide, inject, reactive } from 'vue';
const props = defineProps<{ field: string }>();
const AForm = inject<{ validate: (field: string) => Promise<any>; getErrorMap: any }>('a-form');
const data = reactive({
showError: false,
});
const onChange = () => {
setTimeout(() => {
if (AForm) {
const showError = AForm.getErrorMap()[props.field]
data.showError =showError
}
})
}
provide('a-form-item', {
getField: () => props.field,
onChange
});
</script>
3. 具体实现——Input
Input 组件的作用：当输入框的值 value 发生改变时，依次触发 validate、onChange 函数去执行校验
<template>
<input @input="onChange" :value="data.inputValue" />
</template>
<script lang="ts" setup>
import { reactive, watch, inject } from 'vue';
const props = defineProps<{ modelValue: string }>();
const emits = defineEmits(['update:modelValue']);
const AForm = inject<{ validate: (field: string) => Promise<any>; getErrorMap: any }>(
'a-form',
);
const AFormItem = inject<{ getField: () => string; onChange: () => void }>('a-form-item')
const data = reactive({
inputValue: props.modelValue,
});
watch(
() => props.modelValue,
v => {
data.inputValue = v;
},
);
const onChange = (e: Event) => {
emits('update:modelValue', (e.target as HTMLInputElement).value);
if (AForm && AFormItem) {
AForm.validate(AFormItem.getField())
AFormItem.onChange()
}
};
</script>
二、Vue 项目中 data-v-xxx 的生成
先来看一个问题：
大意是说 Vue scoped 的 data-v-xxx 是根据文件相对路径计算的，如果微前端的两个 Vue 子项目采用相同的路径结构，那么算出来的 data-v-xxx 是一样的，可能会导致样式冲突。
-
webpack + vue-loader 对 vue2 的处理
const shortFilePath = path
.relative(rootContext || process.cwd(), filename)
.replace(/^(..[/])+/, '').replace(
const id = hash(
isProduction
? shortFilePath + '\n' + source.replace(/\r\n/g, '\n')
: shortFilePath
)
-
vite + @vitejs/plugin-vue 对 vue3 的处理
import path from "node:path";
import { createHash } from "node:crypto";
import slash from "slash";
function getHash(text) {
return createHash("sha256").update(text).digest("hex").substring(0, 8);
}
const normalizedPath = slash(path.normalize(path.relative(root, filename)));
descriptor.id = getHash(normalizedPath + (isProduction ? source : ""));
可以发现，不管是 vue-loader 还是 @vitejs/plugin-vue，data 属性 ID 的生成机制都是一样的，即：
-
开发环境下会根据文件相对路径生成唯一 ID，比如 vite 中 src/App.vue 固定生成
7a7a37b1 -
生产环境下会根据文件相对路径+文件内容共同生成唯一 ID
为什么开发环境和生产环境的 ID 计算方式不一样？
首先，开发环境下最好不要加入文件内容进行 hash 计算，因为 hash 计算是耗时的，内容越多耗时越长，而且还会频繁变动节点样式，徒增成本。
那生产环境为什么还要加入文件内容计算 hash 呢？如果 ID 与文件内容无关，就可以实现稳定的 data 属性，对于 E2E 测试用例，就可以直接使用 data 属性进行元素寻址。
三、Vue项目打包后产生的 JS 请求
如果我们关注 Vue 项目的打包，会发现在打包后产生若干 js 请求文件，如 app.js 或 chunk-vendors.js ，在这里深入探讨 Vue 项目打包后产生的文件都是什么。
注：Vue 打包后和 Vue 项目直接本地运行后产生的 js 请求文件一致，为了方便展示，这里采用本地启动项目后产生的文件进行探讨。
1. 基础请求文件
我们创建一个最基础的 Vue 项目，不引入路由、Vuex 及其他任何第三方 JS，运行项目，我们可以发现 Vue 产生了两个请求文件：
| name | status | type | size | time |
|---|---|---|---|---|
| chunk-vendors.js | 200 | script | 392 kB | 67 ms |
| app.js | 200 | script | 15.5 kB | 70 ms |
2. app.js 文件
我们在 app.vue 中添加大量文字，重新运行项目，可以发现，app.js 的大小发生了改变，但 chunk-vendors.js 的大小并没有发生改变：
结论：打包后，app.js 就是我们的业务层代码，如 main.js 里面的内容、各个 Vue 组件里面的内容
3. chunk-vendors.js 文件
我们在 app.vue 中安装并引入 moment.js：
<script>
import moment from "moment"
moment()
export default {
name: "App",
};
</script>
重新运行项目，我们可以发现 chunk-vendors.js 的尺寸几乎翻倍，但 app.js 的大小几乎没变：
结论：打包后，chunk-vendors.js 集成的是 node_modules 里面用到的 js 内容
4. 路由请求文件
以一个企业级项目为例，我们在项目中定义一个路由页面。
const headquarters = () => import("@/views/headquarters/index.vue");
export default [
{
path: "/",
name: "headquarters",
component: headquarters,
meta: {
keepAlive: false,
title: "总部展示大屏",
name: "总部展示大屏",
},
},
];
启动项目http://localhost:8080/demo/[1]，我们可以看到页面请求了3个JS文件
注：链接中的 demo 是项目的 baseUrl
它们的作用如下：
| 请求文件 | 作用 | 资源尺寸 | 请求时间 |
|---|---|---|---|
| 0.js | headquarters路由内容 | (prefetch cache) | 60 ms |
| app.js | main.js等非路由页面内容 | 893 kB | 12 ms |
| chunk-vendors.js | node_modules内容 | 37.9 MB | 427ms |
我们再增加一个路由
{
path: "/data-analysis",
name: "dataAnalysis",
component: () => import("@/views/data-analysis/index.vue"),
meta: {
keepAlive: false,
title: "数据分析",
name: "数据分析",
},
},
重新输入链接 http://localhost:8080/demo[2] ，你可能会疑惑，明明添加了路由，但是为什么请求文件还是 0.js？
实际上，因为我们没有访问对应路由链接，输入包含新路由的链接，就可以看到新路由文件的请求，这里的 1.js 就是 dataAnalysis 组件内容：
四、远程加载 .vue 组件并使用
平时咱们都是在项目写好组件使用，那么如何从服务端加载 .vue 文件用并在项目中跑起来呢？ 大致分以下三步：
-
http 请求远程文件
-
将文本组件转换为 vue 响应式组件
-
component :is 渲染
1. vue3-sfc-loader
Vue3/Vue2 单文件组件加载器，在运行时从 html/js 动态加载 .vue 文件，不需要 node.js 环境，不需要 webpack 构建步骤，这里以 Vue2 为例：
Vue2 的使用路径在 /dist 目录下：
import { loadModule } from 'vue3-sfc-loader/dist/vue2-sfc-loader.js'
2. 封装动态远程加载组件
使用 is 动态渲染加载的组件，同时使用透传属性 v-bind，事件响应处理 v-on="$listeners"
<template>
<div class="async-component">
<component :is="remote" v-if="remote" v-bind="$attrs" v-on="$listeners" />
</div>
</template>
动态加载：
-
moduleCache 将 Vue 对象传下去（强制性）
-
getFile 获取远程文件逻辑，此处使用原生 fetch API 请求
-
addStyle 创建并添加样式
const com = await loadModule(url, {
moduleCache: {
vue: Vue,
},
async getFile (url) {
const res = await fetch(url)
if (!res.ok) {
throw Object.assign(new Error(`${res.statusText} ${url}`), { res })
}
return {
getContentData: asBinary => (asBinary ? res.arrayBuffer() : res.text()),
}
},
addStyle (textContent) {
const style = Object.assign(document.createElement('style'), { textContent })
const ref = document.head.getElementsByTagName('style')[0] || null
document.head.insertBefore(style, ref)
},
})
五、render函数实现一个菜单下拉框
1. 下拉框组件
// Select.vue
<template>
<div class="select-wrap">
<span>福利商城</span>
<span>Saas平台</span>
<span>活动定制</span>
</div>
</template>
2. 渲染组件
我们要将这个组件渲染在网页上，操作应该是这样的：当鼠标移动到产品服务时，将下拉框组件作为一个组件实例渲染在页面的合适位置，要知道组件渲染的位置，我们必须知道父组件的 dom 位置，我们通过 ref 来获取父组件的 dom 信息：
<div ref="select">
<span class="name">产品服务</span>
</div>
<script setup >
import { ref } from "vue"
import Select from "./Select.vue"
import { createVNode, h, render, VNode } from 'vue'
const select = ref()
function createDom(){
const left = select.value.offsetLeft + "px"
const width = select.value.getBoundingClientRect().left + "px"
const props = {
width,
left,
}
const container = document.createElement('div');
let vm = createVNode(Select,props)
render (vm, container)
document.body.appendChild(container.firstElementChild)
}
</script>
其中，prop 是传递给 Select 组件的距离参数，在组件内设置即可
3. 销毁组件
销毁组件，我们可以使用 render 渲染一个空对象即可：
render (vm, container)
如果需要子组件来销毁自身，我们可以使用父子传值
<template>
<div class="select-wrap" @mouseleave="beforeUnload">
<span>福利商城</span>
<span>Saas平台</span>
<span>活动定制</span>
</div>
</template>
<script setup>
const emit = defineEmits(['destroy'])
function beforeUnload(){
emit('destroy')
}
</script>
父组件里，我们需要在 props 中添加一个 onDestroy 函数
function createDom(){
const left = select.value.offsetLeft + "px"
const width = select.value.getBoundingClientRect().left + "px"
const props = {
width,
left,
onDestroy: () => {
render(null, container)
},
}
const container = document.createElement('div');
let vm = createVNode(Select,props)
render (vm, container)
document.body.appendChild(container.firstElementChild)
}
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
