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

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

、

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

3步走

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

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

也是分成了3个文件管理

第二步: 抽取其中的变量

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

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

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

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

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

第三步,抽取公共变量

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

我抽取出了以下变量:

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

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

2层架构

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

总结

皮肤是全部样式的一个子集,做到可配置需要3步:

  1. 确定好范围之后,把样式抽取出来单独维护, 2.从中抽取抽变量来配置
  2. 把一些颜色等常量值做成枚举的形式

整体的皮肤架构就分为皮肤样式皮肤配置两层,架构图见上文。

代码链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux下jboss分析helloword,JBoss 中运行servlet 的helloworld程序(转)

一..在server/default/deploy下创建test.war文件夹在test.war 下建WEB-INF文件夹在WEB-INF下建classes文件夹和web.xml二、运行在C:\jboss-3.2.1_tomcat-4.1.24\bin下点击run.bat运行。测试方法如下:http://localhost:8080/jmx-console看到jmx agent view表示成功三…

【考试记录】4.8 Path (网络流 —— 劲题)

手抄代码 学习指针 冥思苦想一晚上终于——在一瞬间开窍了。果然题目都是这样:突破了一个点,一切都是柳暗花明。 题面描述: 样例: 这道题目,首先注意到给定的边的性质:这些边在平面上构成了一棵树&#x…

Servlet 3.0概述

Servlet 3.0 –具有许多突破性的功能,这些功能最终将改变开发人员编写和编写JEE Web应用程序的方式–有人可能会说,它的约定违背了我们对事物在理论上“应该”如何工作的大多数理解,但这就是其中之一。创新和持续改进; 挑战公约并…

MySQL(介绍,安装,密码操作,权限表)

一、数据库介绍1、数据库相关概念a、支持并发b、锁的问题c、对客户端请求进行认证d、存取效率(降低IO次数)数据库服务器(本质就是一个台计算机,该计算机之上安装有数据库管理软件的服务端)数据库管理管理系统RDBMS&…

matlab如何测两点的角度_【邢不行|量化小讲堂系列01-Python量化入门】如何快速上手使用Python进行金融数据分析...

引言:邢不行的系列帖子“量化小讲堂”,通过实际案例教初学者使用python进行量化投资,了解行业研究方向,希望能对大家有帮助。【历史文章汇总】请点击此处【必读文章】:【邢不行|量化小讲堂系列27-Python量化入门】EOS期现套利&…

结对项目

一、【Coding.Net项目地址】https://git.coding.net/verde/Pair_Work.git 二、【对接口进行的设计】 看教科书和其它资料中关于Information Hiding, Interface Design, Loose Coupling的章节,说明你们在结对编程中是如何利用这些方法对接口进行设计的。 如下图SRC的…

amd 安装 linux驱动怎么安装教程,请教,怎么在ubuntu里安装amd显卡驱动

AMD发布新版本时fglrx-updates驱动就会自动升级,但其实并不总是这样,因为Ubuntu的源的更新老是会有延迟。所以,你可以自己安装指定版本的专有驱动。准备开始吧,在终端敲入以下命令:sudo apt-get install build-essenti…

node.js中exports与module.exports的区别分析

前言 关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别。那么我们就从头开始理清这两者之间的关系。 来源 在开发Node.js应用的时候,很多模块都是需要引入才能使用,但是为什么exports…

Java反射教程

在本教程中,我主要编写一些示例来介绍Java反射可以做什么。 希望它可以给您这个概念的概述。 请留下您的评论以寻求建议。 什么是反射? 简而言之,反射是程序在运行时检查和修改对象的结构和行为的能力。 这种概念有时与内省混合在一起。 自…

NFS网络共享文件系统

1、nfs服务端配置操作 1.1 创建所需的共享目录--源 mkdir /data/rw #rw代表同步的数据可读可写 1.2 对共享目录进行授权 chown -R nfsnobody.nfsnobody /data/rw #非必需,根据业务需求 1.3 修改nfs服务配置文件 vim /etc/exports /data/rw 172.16.1.0/…

国家开放大学形成性考核 统一资料 参考试题

试卷代号:1174 水工钢筋混凝土结构(本)参考试题 一、选择题(每小题2分,共20分,在所列备选项中,选1项正确的或最好的作为答案,将选项号填入各题的括号中) 1.钢筋混凝土结…

两个向量之间的夹角公式_向量的内积

向量的内积也叫向量的数量积、点积。我们定义两个向量的内积是一个数: 其中 是这两个向量的夹角。 对于向量的内积,最重要的一个结论是: 定理1:两向量垂直的充分必要条件是它们的内积为 0,即 这个定理我们几乎不用证明了,因为从定义来看,如果两个向量都不零向量,则只能…

Go strings.Builder

Go strings.Builder 字符串拼接操作优化 最开始的时候,可能会使用如下的操作: package mainfunc main() {ss : []string{"sh","hn","test",}var str stringfor _, s : range ss {str s}print(str) }与许多支持string类型…

springcloud 入门 10 (eureka高可用)

eureka高可用: 说白了,就是加一个实例作为原实例的备份,然后一起对外提供服务。这样可以保证在一台机器宕机的时候,整个系统不会死掉。保证其继续对外服务。 eureka的集群化: 服务注册中心Eureka Server,是一个实例&am…

为什么REST如此重要

这篇文章致力于REST,一种塑造Web服务的体系结构风格,以及IT历史上最容易被误解的概念。 这篇文章针对的是那些正在设计Web服务api的人,他们并未完全了解REST的实际含义。 我想给你个主意。 这篇文章也发给了那些想知道REST意味着什么的人&…

string类有可以调换方向的函数吗_String类中常用的操作

一、获取:1、获取字符串的长度(注意是方法,不是跟数组的属性一样的)int length();1 public static void getLength(){2 String s "java01";3 int len s.length();4 System.out.println(len);5 }2、根据位置,获取该位置的那一个字符(只能是单…

你真的懂js获取可视区宽高吗

可能你会觉得获取可视区宽高不是很简单吗 原生js获取高度不就是就window.innerHeight一句话的事,可是真的这么简单吗 来看个测试页面,如果页面带有横向纵向的滚动条,我们打印出各个高度进行查看对比 顺便你也可以看看document.body和document.documentEl…

工作第七天

今天完成了一个简易的oauth服务器,通过login跳转到oauth保存uri和client_id,等待用户登录判断是否能get到user同时判断用户名和密码是否匹配,重定向到uri同时增加code参数,通过判断是否有code重定向回oauth,如果有code…

网上linux实验平台,Linux操作系统实验教程

第一部分 Linux操作系统基本原理.第1章 Linux操作系统简介1.1 Linux的渊源和发展简史1.2 Linux的基本特性1.3 Linux内核的开发模式与内核版本号1.4 Linux发行版介绍1.5 Linux内核源代码组织结构1.6 学习Linux的辅助软件介绍第2章 Linux的进程管理2.1 进程与进程描述符2.2 进程状…

詹金斯的Maven报告

代码质量是一个敏感的话题。 它会影响您的维护成本以及客户满意度。 更不用说您的开发人员使用代码的动力。 谁想要修复难看的代码,对吗? 讨论代码质量总是需要事实和数字! 因此,这是一个简短的教程,介绍如何创建一些…