2024年最新《Vue》聊一聊实际项目中前端的几种皮肤实现和优缺点，2024年最新大厂面试一面多久给结果

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

示例

大致示例代码如下，以Vue为例：

<Login @on-submit=“handleSubmit” class=“login-conatiner”>

{{

$t(“page.login.remember”)

}}

{{ $t(“page.login.forgot”) }}

{{ $t(“page.login.submit”) }}

如代码所示，给代码绑定了一个class，class的值也就是样式名，来自于vuex或者当前界面的计算的值，也就是皮肤的主样式名，之后便是编写对应类名的CSS代码，大致如下

当Vuex中皮肤名发生变化后，那么皮肤名下对应的类名的值都会随之发生变化，那么其样式会覆盖掉原生样式，这样便达到了换肤的效果；

优点

这种皮肤方案的优点个人觉得非常明显，就是修改便捷，并且结构非常清晰，哪里要修改就直接修改，毕竟优秀的代码不仅仅要考虑代码量，原理，可维护性等各种因素，还要考虑上手难度，其简单的实现即使一个新接手项目的人，在稍微熟悉了之后便可以直接开始添加修改了；

缺点

多套皮肤会有多套样式表，代码量大，开发效率比较低，并且如果是多人协同开发的，可能在一开始就要有所约定，这种方案最适合的项目其实是中小型项目，一两个前端开发沟通成本低；

优化

实际项目中肯定是还可以优化的，比如统一定义颜色为变量，其实不止LESS，SASS，在CSS3中也有变量功能：

:root {

–theme-light-bg: #ffffff; // 背景色

–theme-light-color: #333333; // 字体色

–theme-light-border: #e1e1e1; // 边框色

}

这样便可以统一管理颜色，后续新增一套皮肤只需要新增皮肤对应的一组颜色就可以了，还是比较方便的，同样在LESS或SASS中管理就更为方便了，这些预处理器不仅仅提供了变量功能，还提供了混入，嵌套，甚至函数的功能…一旦使用上了这些，其实这种方案我个人觉得不失为一种实际项目中非常可行功能；

第二种:变量替换

---

这种方式其实某种程度感觉和第一种差不多，最大的区别在于第一种利用的是权重是去覆盖，而第二种就更为直接是去设置，核心函数其实只有一个：

// 设置CSS变量值

document.body.style.setProperty(变量名，变量值);

这个函数可以设置根节点上对应CSS变量的值，我们只要改变了这个值，那么所有引用这个值的地方都会发生变化，从而达到换肤的效果；

示例

比如我们设置了一组CSS变量

// 默认值

:root {

–theme-bg: #fff;

–theme-color: rgb(51, 50, 50);

–theme-size: 1rem;

}

在之后的项目中，我们通通是使用的这组变量