vue+webpack 更换主题N种方案优劣分析
需求：由于业务需要，我们需要做多套皮肤
调研了下当前行业的实现方案，五花八门良莠不齐，在此总结下各种方案有优劣及复杂度，供大家快速定位到符合自己业务的方案，以vue单页应用为业务场景
方式一：class切换方式
实现：
在每个需要更换的页面定义多个class，根据运行时标识动态的切换class名称实现加载不同的样式，这种方式较为简单
优点：
- 不需要修改构建工具相关
- 业务开发过程可以实现，没有限制
- 支持动态切换
缺点：
- 逻辑分散耦合在各个页面，一旦需要修改，涉及修改的页面较多
- 代码需要预先内置，不支持动态颜色修改
方式二：ElementUI的实现
实现：
对主题涉及的颜色使用特殊值
如:UI需要白色#ffffff色值的时候使用一个相近的特征值颜色如:#fffffe
//将默认样式特征值替换为变量，用于多次替换
getStyleTemplate(data){
constcolorMap={
'#fffffe':'text_color'
};
Object.keys(colorMap).forEach(key=>{
constvalue=colorMap[key];
data=data.replace(newRegExp(key,'ig'),value);
});
returndata;
},
在代码运行时动态获取到需要修改的颜色值
如:需要修改#fffffe=》#ff00ff
//通过用户操作或者接口，获取到要替换的色值
colors:{
text_color:'#ff00ff'
}
查找页面所有style标签将其色值#fffffe正则匹配出来，替换为#ff00ff
//获取默认样式,可以从已加载的style中获取也可以从csslink获取
getIndexStyle(){
document.querySelectorAll('style').forEach(item=>{
this.originalStyle+=this.getStyleTemplate(item.textContent);
})
},
getCssLink(){
this.get('./cssPath.css').then(json=>{
this.originalStyle=this.getStyleTemplate(json.data);
})
}
在页面新加标签style覆盖默认值
//替换默认样式表，插入style标签覆盖样式
writeNewStyle(){
letcssText=this.originalStyle;
log(cssText)
Object.keys(this.colors).forEach(key=>{
cssText=cssText.replace(newRegExp('(:|\\s+)'+key,'g'),'$1'+this.colors[key]);
});
cssText=cssText.replace(/\n/g,'')
if(this.originalStylesheetCount===document.styleSheets.length){
conststyle=document.createElement('style');
style.innerText=cssText;
document.head.appendChild(style);
}else{
document.head.lastChild.innerText=cssText;
}
},
优点：
- 支持动态切换
- 支持动态色值
- 不需要内置多份样式
缺点：
- 业务开发过程中需要对ui给出的色值重定义，业务开发需要有一定的规则
- 无法修改背景图片
- 无法对懒加载的样式做处理，需要初始化加载全局所有样式
constExtractTextPlugin=require('extract-text-webpack-plugin')
//抽离css
module:{
loaders:[
{//抽离css通过link加载
test:/\.css$/,
loader:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
}
...
plugins:[
newExtractTextPlugin({
filename:'css/[name].css'
allChunks:true//打包所有页面css到同一个css文件
})
]
- 无法动态修改背景图片
方式三：编译时多主题全量构建
实现：
- 定义多套样式
- 构建时将多套样式主题作为独立构建入口，构建出主题静态文件css文件
- 业务运行时动态加载不同的主题文件
优点：
- 支持动态切换主题
- 业务开发样式分离
- 编译时构建性能较好缺点：
- 构建工具配置较为复杂，适用单入口应用，对多入口的支持不友好
- 需要定义全局less文件，在入口引入
- 业务需要额外操作
配合rel="alternatestylesheet"可预加载备选主题样式
方式四：编译时选择性构建
实现：
- 内置多套皮肤
- 构建时传入参数，根据不同的构建参数加载不同的主题样式文件
优点：
- 构建工具配置较为简单，不需要业务做额外操作
- 多入口应用支持度好
缺点：
- 不支持动态切换
- 多个项目需要构建多次，需要构建系统支持
方式五：less动态变量
实现：
- 修改构建脚本，将所有页面less文件抽到同一个文件中
- 不编译less，页面直接加载less文件
- 使用less.js在客户端编译less文件
less:{
modifyVars:{},
javascriptEnabled:true
}
优点：
- 支持动态切换
- 支持动态色值
缺点：
- 客户端编译较耗性能/耗时
- 需要额外加载less.jsmini文件size:131KB
方式六：css变量
实现：
在需要变化的css属性定义变量
:root{
--main-bg-color:pink;
}
body{
background-color:var(--main-bg-color);
}
在运行时动态的修改变量
document.body.style.setProperty('--primary','#7F583F');
优点：
- 浏览器原生支持，无需额外操作
- 支持动态色值
缺点：
- 低版本兼容性不好 iosSafari9.3、android5、chromeforAndroid76
UC、QQ、Baidu等国内浏览器支持度较差
方式七：import动态加载
实现：
- 业务中预定义多套主题
- 运行时根据变量动态加载对应主题
if(a){
import('./thems/a/base.less')
}elseif(b){
import('./thems/b/base.less')
}
优点：
- 支持动态切换
- 实现简单
缺点：
- 不支持动态色值
- 需要全局定义多套样式表
- 全局定义class无法定义变量在vuestyle中引用变量
| 方式 | 动态切换 | 动态色值 | 支持变量 | 实现复杂度 | 兼容性 | 性能 | 维护性 |
|---|---|---|---|---|---|---|---|
| class切换方式 | 是 | 否 | 是 | 简单 | 良好 | 良好 | |
| ElementUI的实现 | 是 | 是 | 是 | 中等 | 良好 | 一般 | |
| 编译时多主题全量构建 | 是 | 否 | 是 | 复杂 | 良好 | 一般 | |
| 编译时选择性构建 | 否 | 否 | 是 | 中等 | 良好 | 良好 | |
| less变量 | 是 | 是 | 否 | 复杂 | 良好 | 差 | |
| css变量 | 是 | 是 | 是 | 中等 | 差 | 良好 | |
| import动态加载 | 是 | 否 | 否 | 简单 | 良好 | 良好 |
注：
- 动态切换：是否支持在运行时切换皮肤
- 动态设置：是否支持在运行时动态设置皮肤颜色
- 支持变量：是否可以再全局定义变量less文件，然后在不同的页面引用less，依赖其中的变量，还是需要在全局less文件里面定义全局class
- 实现复杂度：需要修改的代码量包括构建工具和业务代码
- 兼容性：主流浏览器支持程度
- 性能：包括代码的首屏加载的size、切换的速度、切换的时候会不会有闪动
参考资料：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#样式覆盖
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets
https://less.bootcss.com
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。