vue+webpack 更换主题N种方案优劣分析


Posted in Javascript onOctober 28, 2019

需求:由于业务需要,我们需要做多套皮肤

调研了下当前行业的实现方案,五花八门良莠不齐,在此总结下各种方案有优劣及复杂度,供大家快速定位到符合自己业务的方案,以vue 单页应用为业务场景

方式一:class切换方式

实现:

在每个需要更换的页面定义多个class,根据运行时标识动态的切换class名称实现加载不同的样式,这种方式较为简单

优点:

  • 不需要修改构建工具相关
  • 业务开发过程可以实现,没有限制
  • 支持动态切换

缺点:

  • 逻辑分散耦合在各个页面,一旦需要修改,涉及修改的页面较多
  • 代码需要预先内置,不支持动态颜色修改

方式二:ElementUI的实现

实现:

对主题涉及的颜色使用特殊值

如:UI需要白色#ffffff色值的时候使用一个相近的特征值颜色 如:#fffffe

// 将默认样式特征值替换为变量,用于多次替换
   getStyleTemplate(data) {
    const colorMap = {
     '#fffffe': 'text_color'
    };
    Object.keys(colorMap).forEach(key => {
     const value = colorMap[key];
     data = data.replace(new RegExp(key, 'ig'), value);
    });
    return data;
   },

在代码运行时动态获取到需要修改的颜色值

如: 需要修改#fffffe =》 #ff00ff

// 通过用户操作或者接口,获取到要替换的色值
 colors:{
     text_color: '#ff00ff'
    }

查找页面所有style标签将其色值#fffffe正则匹配出来,替换为 #ff00ff

// 获取默认样式,可以从已加载的 style 中获取也可以从 css link 获取
   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() {
    let cssText = this.originalStyle;
    log(cssText)
    Object.keys(this.colors).forEach(key => {
     cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + this.colors[key]);
    });
    cssText = cssText.replace(/\n/g,'')
    if (this.originalStylesheetCount === document.styleSheets.length) {
     const style = document.createElement('style');
     style.innerText = cssText;
     document.head.appendChild(style);
    } else {
     document.head.lastChild.innerText = cssText;
    }
   },

优点:

  • 支持动态切换
  • 支持动态色值
  • 不需要内置多份样式

缺点:

  • 业务开发过程中需要对ui给出的色值重定义,业务开发需要有一定的规则
  • 无法修改背景图片
  • 无法对懒加载的样式做处理,需要初始化加载全局所有样式
const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 抽离css
 module: {
 loaders: [
      {//抽离css 通过link加载
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader'
        })
      }
      ...
      
 plugins: [
    new ExtractTextPlugin({ 
    filename: 'css/[name].css'
    allChunks: true // 打包所有页面css到同一个css 文件
    })
  ]
  • 无法动态修改背景图片

方式三:编译时多主题全量构建

实现:

  • 定义多套样式
  • 构建时将多套样式主题作为独立构建入口,构建出主题静态文件css文件
  • 业务运行时动态加载不同的主题文件

优点:

  • 支持动态切换主题
  • 业务开发样式分离
  • 编译时构建性能较好 缺点:
  • 构建工具配置较为复杂,适用单入口应用,对多入口的支持不友好
  • 需要定义全局 less 文件,在入口引入
  • 业务需要额外操作

配合 rel="alternate stylesheet" 可预加载备选主题样式

方式四: 编译时选择性构建

实现:

  • 内置多套皮肤
  • 构建时传入参数,根据不同的构建参数加载不同的主题样式文件

优点:

  • 构建工具配置较为简单,不需要业务做额外操作
  • 多入口应用支持度好

缺点:

  • 不支持动态切换
  • 多个项目需要构建多次,需要构建系统支持

方式五:less动态变量

实现:

  • 修改构建脚本,将所有页面less文件抽到同一个文件中
  • 不编译less,页面直接加载less文件
  • 使用less.js 在客户端编译less 文件
less: {
    modifyVars: {},
    javascriptEnabled: true
   }

优点:

  • 支持动态切换
  • 支持动态色值

缺点:

  • 客户端编译较耗性能/耗时
  • 需要额外加载less.js mini文件size: 131KB

方式六:css变量

实现:

在需要变化的css属性定义变量

:root {
 --main-bg-color: pink;
}

body {
 background-color: var(--main-bg-color);
}

在运行时动态的修改变量

document.body.style.setProperty('--primary', '#7F583F');

优点:

  • 浏览器原生支持,无需额外操作
  • 支持动态色值

缺点:

  • 低版本兼容性不好 ios Safari 9.3、 android 5、 chrome forAndroid 76

UC、QQ、Baidu 等国内浏览器支持度较差

方式七: import动态加载

实现:

  • 业务中预定义多套主题
  • 运行时根据变量动态加载对应主题
if(a){
  import('./thems/a/base.less')
}else if(b){
   import('./thems/b/base.less')
}

优点:

  • 支持动态切换
  • 实现简单

缺点:

  • 不支持动态色值
  • 需要全局定义多套样式表
  • 全局定义 class 无法定义变量在 vue style 中引用变量

方式 动态切换 动态色值 支持变量 实现复杂度 兼容性 性能 维护性
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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 #Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 #Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 #Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 #Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 #Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 #Javascript
js实现图片无缝循环轮播
Oct 28 #Javascript
You might like
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
使用python3构建文件传输的方法
2019/02/13 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
顶撞老师检讨书
2014/02/07 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
5道关于python基础 while循环练习题
2021/11/27 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
Python find()、rfind()方法及作用
2022/12/24 Python