JavaScript Inheritance and Object Programming

Coding Tutorial, Chapter 4d

Composition: Create a Box.set_styles() Method

© 21 July, 2013, Martin Rinehart

Results

Your visible boxes should remain unchanged. This is an internal code rearrangement.

Code

Create a set_styles() instance method. All the style setting logic from Box.init() gets moved into this new method (including the get_ps_styles() inner function). We've changed new_box into the variable box as this will also be called, for example, when changing border styles on an existing box. Don't forget that the styles parameter for Box.init() is the box.styles property in this method.

Not shown, add a line to Box.init() that calls this method, where the logic has been removed.

ns.Box.prototype.set_styles = function () { var box = this; var box_styles = get_ps_styles(box); box_styles.position = 'absolute'; box_styles = ns.sum( box_styles, box.borders.get_styles() ); box_styles = ns.sum(box_styles, box.styles); for (var name in box_styles) { box.delem.style[name] = box_styles[name]; } function get_ps_styles(new_box) { var ps = new_box.pos_size, ret = {}; ret.left = ps[0] + 'px'; ret.top = ps[1] + 'px'; ret.width = ps[2] + 'px'; ret.height = ps[3] + 'px'; return ret; } } // end: Box.set_styles()

Feedback: Martin Rinehart at gmail dot com.

# # #