皮肤可配置化:变量、样式分离

栏目: Html · 发布时间: 6年前

内容简介:之前皮肤开发了一个版本,抽是抽出来了,但是变量只抽出了几个颜色,没什么价值(上个版本开发过程),这次我又进行了一次迭代,现在是一个较成熟的版本了。整体理一下思路,可以总结为3步走和2层架构:皮肤是样式的子集,想要做皮肤的管理,首先要把涉及到的样式都抽取出来,这里只涉及到了 登录页、考勤页、顶部菜单 3个部分。抽出来后放在assets/skin下。

之前皮肤开发了一个版本,抽是抽出来了,但是变量只抽出了几个颜色,没什么价值(上个版本开发过程),

皮肤可配置化:变量、样式分离

这次我又进行了一次迭代,现在是一个较成熟的版本了。整体理一下思路,可以总结为3步走和2层架构:

3步走

第1步:抽取出皮肤相关样式

皮肤是样式的子集,想要做皮肤的管理,首先要把涉及到的样式都抽取出来,这里只涉及到了 登录页、考勤页、顶部菜单 3个部分。抽出来后放在assets/skin下。

皮肤可配置化:变量、样式分离
皮肤可配置化:变量、样式分离

也是分成了3个文件管理

第二步: 抽取其中的变量

单抽出样式来肯定不够,要做配置化,需要从样式中抽出变化的值作为变量来管理,并且统一命名。

皮肤可配置化:变量、样式分离

如图,也是对应3个section的3个文件。

命名方式是 sectionName-blockName{-status}-cssName

皮肤可配置化:变量、样式分离
皮肤可配置化:变量、样式分离

抽取出变量之后的less文件如下:

皮肤可配置化:变量、样式分离

这样以后就只需要改动配置文件,而不需要修改样式文件了。

第三步,抽取公共变量

配置中有很多同样的值,比如重复的颜色、重复的基础路径等。这些常量写了很多次,万一修改要修改n个地方,所以,我把这些散落的魔法值收集起来作为枚举值统一维护,使得配置变得更加的方便可控。

我抽取出了以下变量:

皮肤可配置化:变量、样式分离
皮肤可配置化:变量、样式分离
皮肤可配置化:变量、样式分离

这里的颜色的命名我是按照色相和亮度来命名的,按照色相分为 红、橙、黄、红橙等,然后再加上深浅、亮暗的区分。虽然不是那么准确,但是能够简单区分了。

通过以上3个步骤,皮肤的可配置化就完成了。以后如果要开发一套新的皮肤,一般只需要改动配置就可以了。不过如果新皮肤有别的样式的更改,还是需要去修改样式文件,然后扩充配置变量的。随着皮肤开发的越来越多,配置也会越来越完善。

2层架构

经过上面3个步骤我们抽取出了皮肤样式和皮肤相关的配置变量,其实皮肤的架构也就分了这两层。

皮肤可配置化:变量、样式分离

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机程序设计艺术

计算机程序设计艺术

Donald E.Knuth / 黄林鹏 / 机械工业出版社 / 2010-8 / 69.00元

《计算机程序设计艺术(第4卷·第0册):组合算法与布尔函数概论(双语版)》是《计算机程序设计艺术,第4卷:组合算法》的第0册。《计算机程序设计艺术(第4卷·第0册):组合算法与布尔函数概论(双语版)》介绍了组合搜索历史和演化,涉及组合搜索技术的理论和实践应用,探究了布尔函数相关的所有重要问题,考察了如何最有效地计算一个布尔函数的值的技术。本册是《计算机程序设计艺术的》第7章,即组合搜索一长篇宏论的......一起来看看 《计算机程序设计艺术》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具