css3 - php如何快捷判断数组中的项是单值或者是键值对？

程序员文章站 2022-03-24 19:53:35

...

感谢@joyqi大的关注。按建议直接放上实际代码。

这个是我正在试做的CSS3展开非标准属性的php

已有的输入数据如下：

array('webkit','moz','ms'),
		'border-radius'=>array('webkit','moz','o'),
		'border-top-right-radius'=>array('webkit','moz'=>'-moz-border-radius-topright','o'),
		'border-top-left-radius'=>array('webkit','moz'=>'-moz-border-radius-topleft','o'),
		'border-bottom-right-radius'=>array('webkit','moz'=>'-moz-border-radius-bottomright','o'),
		'border-bottom-left-radius'=>array('webkit','moz'=>'-moz-border-radius-bottomleft','o'),
		'border-colour'=>array('moz'),
		'box-shadow'=>array('webkit','moz','o'),
		'transition'=>array('webkit','moz','ms','o'),
		'transform'=>array('webkit','moz','ms','o'),
		......
	);	
	 $_valuerules=array( //css3兼容值表 如无特别定义则以 -xxx- 形式附加于头部
		'linear-gradient'=>array('webkit','moz','ms','o'),
		'box'=>array('webkit','moz','o'),
		'box-shadow'=>array('webkit','moz')
		......
	);
?>

根据以上规则对一份css文件进行处理

.container {
   box-shadow: 20px;
   transition: box-shadow 2s;
   border-top-right-radius: 4px;
   border-bottom-left-radius: 4px;
   animation: slide 1s alternate;
   background: linear-gradient(top, #e3e3e3 10%, white);
   display: box;
}

希望实现自动展开非标准属性写法

.container {
	-webkit-box-shadow: 20px;
	-moz-box-shadow: 20px;
	box-shadow: 20px;

	-webkit-transition: -webkit-box-shadow 2s;
	-moz-transition: -moz-box-shadow 2s;
	-o-transition: box-shadow 2s;
	-ms-transition: box-shadow 2s;
	transition: box-shadow 2s;

	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;

	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottom-left: 4px;
	border-bottom-left-radius: 4px;
	
	-webkit-animation: slide 1s alternate;
	-moz-animation: slide 1s alternate;
	-ms-animation: slide 1s alternate;
	animation: slide 1s alternate;

	background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
	background: -moz-linear-gradient(top, #e3e3e3 10%, white);
	background: -o-linear-gradient(top, #e3e3e3 10%, white);
	background: -ms-linear-gradient(top, #e3e3e3 10%, white);
	background: linear-gradient(top, #e3e3e3 10%, white);
	
	display: -webkit-box;
	display: -moz-box;
	display: box;
}

这其中需要按照css文件的属性值对依次去检查是否存在非标准属性、非标准属性如何构成，相应的就需要从外部去判断规则数组中的键值对或者单值。

我的主要逻辑是这样的：
比如说检查css的时候到了

border-top-right-radius : 4px;

这一行，代码检查发现属性名 “border-top-right-radius” 需要 webkit、moz、o 三种兼容方式，值 4px 不参与兼容（注：这里对值也加入判断，是因为存在一些特殊的属性比如 transition ，其属性名和值同时都要参与兼容），一共需要重复三次兼容。
然后对 webkit、moz、o 进行循环，希望从属性名规则中分别读到一下三条规则：

'webkit'=>'-webkit-border-top-right-radius',
'moz'=>'-moz-border-radius-topright',
'o'=>'-o-border-top-right-radius'

当然，由于开始在书写规则的时候使用的是简化的方案，于是在读取中就需要对 webkit、moz、o 进行判断，看这个在数组中到底是值还是键名，是键名就直接取得其值，是值就按默认规则生成需要的字符串。问题就出在这里。
在规则数组中循环，做内部判断并去css中反查在这种场景下不现实（特别是css巨大的时候）。我能想到的只有连续组合利用array_key_exists()和array_search()来验证，其中还得过滤掉单值和键值对中的值重复的情况，效率很是低下。

当然我实际在做的时候因为无从入手，于是干脆就绕过这个问题，直接用函数对这个简化书写的规则数组重新格式化了一遍（题外话，格式化的过程中还遇到了诸如 $this->$propname 这种形式的类内部属性名称引用的问题，后来强行用 & 指针解决了，但是中间遇到了巨大的疑惑，作为野生的自学党表示压力很大，下回做个例子再问）。

实际项目里算是绕过了，但是作为在写代码时遇到的问题，还是想提出来向高手们征求下看法，
如何快速地从外部去判断一个字符串在数组里的三种情况：不存在，键名，值……

回复内容：