如何在程序中实现属性叠加 如何在程序中实现属性叠加操作

在程序设计中我们经常用到一些系统函数，有些函数我们可以将几个常量什叠加传入就可以实现几个常量值叠加后的功能，比如形如： speedx_echo_style($style, STYLE_WEBKIT + STYLE_MS)等，其中STYLE_WEBKIT 和 STYLE_MS就是定义的数值常量。再比如，我们想设计一个函数，其功能为：输出一个样式值，这个样式根据我们输入的常量值输出几个带有浏览器的内核属性的样式，如FX浏览器带-moz-属性，ie浏览器带-ms-属性等。要实现这样的功能，我们首先要定义几个常量，来表示什么值代表什么内核属性。以PHP程序为例，先定义常量如下：

const SPEEDX_STYLE_W3C = 1; //表示支持这一属性或支持这一属性值的浏览器都是采用标准格式，即不带浏览器前缀的书写方式；

const SPEEDX_STYLE_MOZ = 2; //火狐浏览器内核(-moz-):表示支持这一属性或属性值的火狐浏览器在书写格式上要带"-moz-"前缀;

const SPEEDX_STYLE_WEBKIT = 4; //Chrome和Safari浏览器内核:表示支持这一属性或属性值的浏览器在CSS书写格式上要带"-webkit-"前缀;

const SPEEDX_STYLE_MS = 8; //IE浏览器内核:IE支持的CSS特性，要加"-ms-"前缀

const SPEEDX_STYLE_O = 16; //Opera浏览器内核：对于兼容部分Opera浏览器，CSS特性前要加"-o-"前缀

const SPEEDX_STYLE_ALL = 31; //所有兼容模式，为了兼容大部分主流浏览器的不同版本，要加上上面所有的前缀。

为什么我们定义这样的常量都是以2的指数形式定义。原因很简单，属性叠加后还能还原。我们最后定义的一个常量SPEEDX_STYLE_ALL是前面几个常量的总和，表示全部支持以上属性。那么如何拆解这个值还原成各个属性值呢。方法有很多，但是我们要找到效率和性能最高的那个方法。我们知道一个以2为基数幂次方(X)的二进制表示是第1位为1，其余为0，而这个数的X-1的二进制表示则是第1位为0，其它位则为1，如果我们将这两个数用位运算相与，则得到的结果必定为0，否则必定大与0。以这个特性，我们就能判断数X是不是2的幂次方。如下所示：

$dec = (($num & ($num - 1)) === 0) ? true : false;

这样当$dec为true时，$num为2的幂次方。根据这个思路，数值31是由哪些2的指数幂叠加的呢，我们只要逐次递减循环判断就可以。当判断到16时，就可以将16存储，再用前一次循环的最大值减去这个值，即31 - 16 = 15，再用15继续递减循环判断，以此类推就能得到所有的原始叠加值。其完整的实现代码如下：

/**

* 二进制分解，用于属性叠加

*/

function decomposeBinary($number){

$numList = [];

if(!is_int($number)) return $numList;

$max = $number;

while($max > 0){

if($max === 1){

$numList[] = 1;

$max = 0;

break;

}

if(($number & ($number - 1)) === 0 ? true : false){

$numList[] = $number;

$max = $max - $number;

$number = $max;

}else{

$number--;

}

}

return $numList;

}

现在，用这个函数就可以拆解到我们所需要的属性了，当我们这样做时：

$attrList = decomposeBinary(SPEEDX_STYLE_ALL);

var_dump($attrList),就会得到我们想要的属性数组了。

再根据这个属性列表，我们写一个前面所提到的输出不同浏览器所支持的样式属性时，就很容易做了。

根据得到的数据，我们做相应的前缀添加。如下所示：

$brw = decomposeBinary($pa);

$key = [];

foreach($brw as $val){

if($val === SPEEDX_STYLE_W3C)$key[] = " ";

if($val === SPEEDX_STYLE_MOZ)$key[] = "moz";

if($val === SPEEDX_STYLE_WEBKIT)$key[] = "webkit";

if($val === SPEEDX_STYLE_MS)$key[] = "ms";

if($val === SPEEDX_STYLE_O)$key[] = "o";

}

这样，$key里就是所有浏览器对应的样式属性支持的前缀列表了。我们来写一个简单的函数：

function echocss($attr,$brw){

$brw = decomposeBinary($brw);

$key = [];

foreach($brw as $val){

if($val === SPEEDX_STYLE_W3C)$key[] = "";

if($val === SPEEDX_STYLE_MOZ)$key[] = "-moz-";

if($val === SPEEDX_STYLE_WEBKIT)$key[] = "-webkit-";

if($val === SPEEDX_STYLE_MS)$key[] = "-ms-";

if($val === SPEEDX_STYLE_O)$key[] = "-o-";

}

$_css_attr = "";

foreach($key as $val){

$_css_attr .= $va l. $attr;

}

return$_css_attr;

}

用这个函数我们来测试一下看看能不能得到我们想要的结果：

var_dump(echocss("width:100px;",SPEEDX_STYLE_ALL));

得出的结果如下：

"-o-width:100px;-ms-width:100px;-webkit-width:100px;-moz-width:100px;width:100px;"

很完美是不是，

当然，这里所做的只是个示例，其功能并不符合实际需求。

如果真有这方面的需求的朋友们，请关注我的头条号，最近我在写一个speedx小项目，能以php的方法完美实现CSS、js及html的完美功能，并且生成的代码压缩率很高哦。