Wayne Haffenden

I spent many hours yesterday trying to create an exact deep clone of a complex object structure, so that i could make changes to the clone without any affect to the original. I started by using the PHP 5 Object Clone functionality, which creates a shallow copy of all the object's properties, however any properties that are references to other variables, will remain references. This is great, but i needed a deep copy of the object including all references to child objects, however deeply nested. The PHP manual states that when cloning an object, the magic __clone() method is called if possible, which can be used to manually create a deep clone of the object.

Using the magic clone method was a step forwards, i could traverse through the object's properties and any that were references i could create clones of, however this meant that any of the object's properties that were object's that had references were still not cloned. I started implementing an interface and abstract base class, that when derived could clone an object's properties and any that also derived from the same abstract base class could also be cloned, creating a recursive cloning process. This worked perfectly until i hit object properties that were arrays of objects, at which point i decided it was time to take a step back and look for an alternative approach.

It then hit me that if i use the PHP Serialisation functionality to create a byte-stream string representation of the entire object structure and then de-serialise the byte-stream back into the object structure again, that the entire new object would be re-created and therefore be a clone of the original. It worked like a dream, so i've encapsulated it into a static class for re-usablility and have made it open-source. Hopefully the following code will save someone the time that it took me to finally achieve simple deep cloning of an object however complex its structure.

ObjectCloner.php

<?php
final class ObjectCloner
{
private function __construct() {}
public static function cloneObject($source)
{
if ($source === null)
{
return null;
}
return unserialize(serialize($source));
}
}
?>

You can use the above class as in the example class below.

Example.php

<?php
class Example
{
public function someMethod()
{
// We create an instance of some complex object.
$original = new ComplexObject();
// We create an exact clone of the complex object, using the ObjectCloner class.
$clone = ObjectCloner::cloneObject($original);
// Changing some deeply nested property on the clone will have no affect on the original.
$clone->someObjectProperty->someOtherObject->someString = 'NewValue';
echo $original->someObjectProperty->someOtherObject->someString;
// Would produce 'OriginalValue'
echo $clone->someObjectProperty->someOtherObject->someString;
// Would produce 'NewValue'
}
}
?>

I'd appreciate any feedback or comments.

I had to work on a project recently where i was using 24-bit transparent PNG files, which aren't supported properly in Internet Explorer 6. Although there are other existing jQuery/JavaScript fixes out there, none of them achieved exactly what i wanted. I also found that while using the jQuery Cycle plugin to animate a slideshow of photos, Internet Explorer 7 & 8 don't support multiple filters, which results in a black border appearing around the transparent PNG image while it is tweening. As i always strive for pixel perfect design, this obviously wasn't acceptable and therefore came the birth of the jQuery PNG plugin.

The jQuery PNG Plugin applies a fix to the above problems by using the Microsoft DirectX AlphaImageLoader filter, which renders the image using the DirectX engine. This plugin fixes both images and CSS background images. When using the plugin, you can specify whether the fix is applied to parent elements or to elements and any appropriate child elements. The plugin only runs on Internet Explorer 6, unless forced to on Internet Explorer 7 & 8 to save the fix being unnecessarily applied.

Please note: To get the best performance from this plugin, it is highly recommended that it isn't applied until the appropriate images have fully loaded. This is because images take around double the time to load and render using the Microsoft DirectX engine.

Multiple Filter Issue in Internet Explorer 7 & 8

Although this plugin attempts to fix this issue, it can't directly because it adds a filter to the image. The way to overcome this is to wrap the images within a parent tag such as <div><img /></div> or more often <ul><li><img /></li></ul>. This way the fix is applied to the image tag and the tweening filter can occur on the parent tag.

Usage

The following settings are available:

• shimImage (String) - The path to where the transparent 1x1 shim image is located. This defaults to simply 'shim.gif', which can be found within the jQuery PNG Zip file.
• force (Boolean) - If set to true then the fix will be applied to all Microsoft Internet Explorer browsers. This defaults to false.
• children (Boolean) - If set to false then the fix will only be applied to parent elements. This defaults to true.

Default Settings

To save keep passing the above settings to each instance of this plugin, you can simply define them statically like so:

$.png.defaults.shimImage = '/path/to/image/shim.gif';

You can still pass the settings to an instance, which take precedence over the defaults.

Implementation

Minimal implementation:

$(function() {
$('#element-id').png();
});

Maximum implementation:

$(function() {
$('#element-id').png({
shimImage: '/path/to/image/shim.gif',
force: false,
children: true
});
});

Run when images have loaded:

$('img').load(function() {
$(this).png();
});

jQuery Versions

This plugin has been tested and fully works in both jQuery 1.3 and 1.4.

Testing

This plugin has been successfully tested in:

• Internet Explorer 8/7/6

Licensing

This plugin is dual licensed under the MIT and GPL licenses.

Download

You can download the latest version of the plugin below.

• jQuery PNG Zip - Contains All Files
• jQuery PNG Minified - Recommend
• jQuery PNG Source - Uncompressed Source