who can help me optimized this javascript code?

Question

this is my part code,but a friend say the variable(like getStyle,getOffsetWidth,getOffsetHeight,log) will not release, so i want know why the variable will not release,and how to optimized it,thanks!

   var Util = (function() {
        "use strict";
        var getStyle = function(node) {
            var style = null;
            if (window.getComputedStyle) {
                style = window.getComputedStyle(node, null);
            } else {
                style = node.currentStyle;
            }
            return style;
        };

        var getOffsetWidth = function(style) {
            return parseInt(style.width, 10) +
                parseInt(style.paddingLeft, 10) +
                parseInt(style.paddingRight, 10) +
                parseInt(style.marginLeft, 10) +
                parseInt(style.marginRight, 10);
        };

        var getOffsetHeight = function(style) {
            return parseInt(style.height, 10) +
                parseInt(style.paddingTop, 10) +
                parseInt(style.paddingBottom, 10) +
                parseInt(style.marginTop, 10) +
                parseInt(style.marginBottom, 10);
        };

        var log = function() {
            if (window.console && window.console.log) {
                window.console.log(arguments);
            }
        };

        return {
            getStyle: getStyle,
            getOffsetWidth: getOffsetWidth,
            getOffsetHeight: getOffsetHeight,
            log: log
        };
    }());

What does _"variable does not release"_ mean, I don't understand... — elclanrs, Jun 20 '13 at 03:22
You may want to change `}());` to `})();`. Aside from that, what does "does not release" mean? What variable was your friend referring to? — Blender, Jun 20 '13 at 03:24
Have a look at the following page which explains javascript memory management and also talks about garbage collection : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management — JanR, Jun 20 '13 at 03:30
@Blender `}());` is also [valid syntax](http://stackoverflow.com/a/3783287/621962). — canon, Jun 20 '13 at 03:54
@canon: Yep, which is why I said "may". It's the more common syntax, at least from the projects that I've looked at. — Blender, Jun 20 '13 at 04:10
@Blender Douglas Crockford [uses `}());`](http://javascript.crockford.com/code.html)... just fyi. ;) — canon, Jun 20 '13 at 04:16

Russell Zahniser · Accepted Answer · 2013-06-20T03:40:16.400

1

Your friend is probably referring to the fact that the variables getStyle, getOffsetWidth, etc are included in the closure of the returned methods. This is a tiny bit inefficient because those variables are never used again.

In a simple case like this, where the functions in your Util object are not making any use of the closure of the outer function, there's no reason not to just do:

var Util = {
  getStyle: function(style) {
    return parseInt(style.width) + ...
  },
  getOffsetWidth: ...
};

edited Jun 20 '13 at 03:40

answered Jun 20 '13 at 03:32

Russell Zahniser

16,188
39
30

3

The 10 in parseInt isn't necessarily the default value. From MDN: "An integer that represents the radix of the above mentioned string. Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior. Different implementations produce different results when a radix is not specified." – Alexis Abril Jun 20 '13 at 03:35
Sorry, but this answer completely misses the point. I refer you to .... oh well, never mind. – Beetroot-Beetroot Jun 20 '13 at 09:30
@Beetroot-Beetroot: OP's question was why those variables are retained. I understand the value in using closures to define private methods, but it's not a pattern that should be blindly applied to every situation. – Russell Zahniser Jun 20 '13 at 17:03

Beetroot-Beetroot · Answer 2 · 2013-06-20T03:51:17.817

Yes, that's a module written in the Module Pattern.

The self-exeuting anonymous function forms a closure - or a set of closures if you are so minded (I'm not) - establishing four privileged methods exposed via the return expression as properties of Util.

This pattern may also include private vars/methods, which are established in exactly the same scope as getStyle, getOffsetWidth etc, but are not exposed via the return expression.

This is a perfectly valid way to establish one or more singleton "namespace" objects, which is precisely the objective of the Module Pattern.

who can help me optimized this javascript code?

2 Answers2