2024年Web前端最新《Vue》聊一聊实际项目中前端的几种皮肤实现和优缺点(1)，2024前端开发面试解答之设计模式

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

当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;

}

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

差不多就是这样，在实际书写样式的时候统一使用变量，之后，存在一个处理样式的js文件

const light = ‘rgb(51, 50, 50)’

const dark = ‘#d6d6d6’

/**

• 获取一组皮肤变量

• @param {Boolean} state 样式判断条件

*/

function getTheme(state) {

return {

“theme-bg”: state ? light : dark,

“theme-color”: state ? light : dark,

“theme-size”: state ? light : dark,

};

}

/**

• 设置变量值

• @param {Boolean} state 样式判断条件

*/

function setTheme(state = true) {

const theme = getTheme(state);

Object.keys(theme).forEach((key) => {

document.body.style.setProperty(--${key}, themeMap[key]);

});

}

在这个js文件中，我们可以定义获取和设置函数，获取函数主要根据参数获取对于的皮肤的值，而设置函数则主要负责设置根节点上变量的值；

一旦触发皮肤切换功能，那么直接可以通过setTheme这个函数设置根节点的变量值，从而实现换肤的效果；

优点

调理清晰，不需要书写很多套样式，只需要书写几种颜色，剩下的都是根据色值自动填充；

缺点

由于是CSS3之后新增的属性，兼容性还是比较差的，IE就直接不支持了，具体如下：

优化

这种方案优化主要是两个方向，第一个是接入LESS或者SASS，利用这些预处理器的特性，去更好的实现CSS代码的复用性，可读性，可维护性等等；

另一个就是解决兼容性问题了，这里介绍一个工具：css-vars-ponyfill，npm地址：https://www.npmjs.com/package/css-vars-ponyfill，具体用法可以度娘搜一下，一大堆教程；

参考

============================================================

阮一峰老师：《CSS变量教程》；

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-PUWwfGja-1715444761201)]