0

Inside of a loop (that loops through images) I have:

var crop = new lx.FileCrop(img);

This is a class that allows a user to crop images.

It gets the offset, width and height of a draggable box, creating a crop.

This data then needs to be sent off to the server for image processing.

I was just wondering what the best way to do this would be:

A) store the crop details on the image in a data attribute, then when the user clicks save, loop through and round these up.

B) Is there a way to get access to each FileCrop class later and do something like crop.getCrop()? If so how would I get access to each class later on?

I was also wondering, when I save the data, on success, I will remove the images from the screen. I'll do this by using jquery remove(). I was wondering what happens to all the FileCrop classes I made, will these need to be cleaned up? If so, how?

panthro
  • 22,779
  • 66
  • 183
  • 324

2 Answers2

0

jQuery's .data() can store any object, so you don't have to try to store the data as data attribute strings. You can store the whole crop object without doing any serialization:

var crop = new lx.FileCrop(img);
$('#yourElement').data('crop', crop);

// retrieve it later
var myCrop = $('#yourElement').data('crop');

Alternatively you can store the crop object as a property of the plain DOM element - no jQuery. This also requires no serialization.

var crop = new lx.FileCrop(img);
$('#yourElement')[0].myCrop = crop;
// or
document.getElementById('yourElement').myCrop = crop;

// retrieve it later
var myCrop = $('#yourElement')[0].myCrop;

What happens to all the FileCrop classes I made, will these need to be cleaned up?

The garbage collector will automatically search for variables that are no longer reachable and clean them up. This is quite straightforward for the plain DOM element method above because if the element is removed from the DOM, and no references to the element or crop object are reachable then they will be cleaned up.

It's more complicated for the jQuery .data() method because the data isn't stored on the element itself, jQuery maintains and manages a $.cache structure containing the data. You can read more about how that works in this question.

More info about general garbage collection on the MDN Memory Management docs.

Community
  • 1
  • 1
MrCode
  • 63,975
  • 10
  • 90
  • 112
0

They way you store the data depends on your needs, really. You can either store some ids in the DOM and build a map that points at your objects from that, or just create instances as you need them by analyzing the nodes. It's hard to say what would really work with the information you provided, but there are plenty of ways you can do it in.

For B - if you store the objects somewhere in a top-level variable (in an array or object), you can get to them from local function scopes.

As for your last point, your JavaScript objects are separate from the DOM, so deleting a node will not delete your object. There isn't a clearly defined way of deleting objects in JavaScript, but it's relatively easy to do so when you understand how it works.

Objects are deleted when they either go out of scope (the function you declared them locally in has finished executing) or there is nothing pointing at them anymore - meaning when you have nothing referencing those objects anywhere, they will be marked for automatic removal by the garbage collector. A way to explicitly make sure this happens is to also assign them as null crop = null;

Andrei Nemes
  • 3,062
  • 1
  • 16
  • 22
  • Thanks, is there some sort of profiler which I can see what objects are being deleted? – panthro Jun 04 '14 at 09:25
  • If you are using Chrome there is a wealth of tools available for you to use. Just press F12. You can take heap snapshots (in the profiling tab) that will tell you exactly how the memory is being distributed. In Firefox, press Shift + F5 – Andrei Nemes Jun 04 '14 at 09:28