StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POReference to an attribute instead of getters and setters
text
Body
copied!<p><strong>Question:</strong> is it possible to have object1 providing an attribute of object2 in a way, that no getters and setters are needed? So I could do <code>a = object1.attribute</code> and <code>object1.attribute = a</code>.</p> <p><strong>Example:</strong> I am implementing support for dynamic aligning of the absolutely positioned HTML objects on the page. All kinds of aligns should be supported - left, right, top, bottom, horizontal center, vertical center or even evenly spaced. To reduce the amount of duplicated code, I came up with the solution to implement class <code>Direction</code>, which can be horizontal and vertical and works in the Facade-ish mode with regards to the <code>Element</code>. It this is passed as an attribute to the aligning function. Similarly, I am handling the left/right/middle and distribute evenly distinction, but to keep it simple, let's ignore it here.</p> <p>Here is the class.</p> <pre><code>Direction = function(selector) { this.selector = selector; } Direction.prototype.get = function(element) { return parseInt(element.style[this.selector]); } Direction.prototype.set = function(element, value) { element.style[this.selector] = value + 'px'; } </code></pre> <p>Here are the "constants" available to the client.</p> <pre><code>Direction.VERTICAL = new Direction('left'); Direction.HORIZONTAL = new Direction('top'); </code></pre> <p>Here is the public method performing the "minimal" align (left or top).</p> <pre><code>alignMin = function(elements, direction) { var min = Number.MAX_VALUE; for (var i = 0; i < elements.length; i++) { min = Math.min(min, direction.get(elements[i])); } for (var i = 0; i < elements.length; i++) { direction.set(elements[i], min); } } </code></pre> <p>And the client here demonstrates the intended use.</p> <pre><code>alignDivsToLeft = function() { alignMin(document.getElementsByTagName("div"), Direction.VERTICAL); } </code></pre> <p>Working example on a JSFiddle: <a href="http://jsfiddle.net/7Tpam/" rel="nofollow">http://jsfiddle.net/7Tpam/</a></p> <p><strong>Question again:</strong> All this works, I was just wondering, if instead of <code>Direction.get()</code> and <code>Direction.set()</code> methods I could do something (a reference to a value?) to directly access the "proxified" attribute, so the <code>alignMin</code> function could use just </p> <pre><code>... min = Math.min(min, direction.value); // possibly with parseInt() ... </code></pre> <p>and</p> <pre><code>... direction.value = min; // possibly with + 'px' ... </code></pre> <p>If there is a simple solution for this, it would be a shorter, clearer and more elegant way, especially in cases with more attributes (position, dimension, ...). Plus there is the factor of the curiosity (still learning magic of JavaScript, so..).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload