Vue+Webpack 更换主题N种方案优劣分析_心善_前端开发者

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

调研了下当前行业的实现方案,五花八门良莠不齐,在此总结下各种方案有优劣及复杂度,供大家快速定位到符合自己业务的方案,以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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者

» 本文来自:前端开发者 » 《Vue+Webpack 更换主题N种方案优劣分析_心善_前端开发者》
» 本文链接地址:https://www.rokub.com/70998.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!