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 相关文章推荐
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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
生成缩略图
2006/10/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
php微信开发之图片回复功能
2018/06/14 PHP
flexigrid 参数说明
2010/11/23 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Django stark组件使用及原理详解
2019/08/22 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python基于requests库爬取网站信息
2020/03/02 Python
亿企通软件测试面试题
2012/04/10 面试题
大学生收银员求职信分享
2014/01/02 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
小学庆六一活动方案
2014/02/28 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
建国大业观后感800字
2015/06/01 职场文书
windows安装python超详细图文教程
2021/05/21 Python
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL