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实现图片轮播效果代码
Sep 03 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
angular分页指令操作
Jan 09 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
使用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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP内核探索之变量
2015/12/22 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
面试常见的js算法题
2017/03/23 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
pandas的resample重采样的使用
2020/04/24 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
高校教师思想汇报
2014/01/11 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL