Best way to write a Javascript function

Asked

Viewed 139 times

-1

What is the best way to write the following function?

This?

function DOMtoString(document_root) {
    var html = '',
        node = document_root.firstChild;
    while (node) {
        switch (node.nodeType) {
        case Node.ELEMENT_NODE:
            html += node.outerHTML;
            break;
        case Node.TEXT_NODE:
            html += node.nodeValue;
            break;
        case Node.CDATA_SECTION_NODE:
            html += '<![CDATA[' + node.nodeValue + ']]>';
            break;
        case Node.COMMENT_NODE:
            html += '<!--' + node.nodeValue + '-->';
            break;
        case Node.DOCUMENT_TYPE_NODE:
            // (X)HTML documents are identified by public identifiers
            html += "<!DOCTYPE " + node.name + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') + (!node.publicId && node.systemId ? ' SYSTEM' : '') + (node.systemId ? ' "' + node.systemId + '"' : '') + '>\n';
            break;
        }
        node = node.nextSibling;
    }
    return html;
}

Or this?

function DOMtoString(a) {
    var b = "",
        c = a["firstChild"];
    while (c) {
        switch (c["nodeType"]) {
            case Node["ELEMENT_NODE"]:
                b += c["outerHTML"];
                break;
            case Node["TEXT_NODE"]:
                b += c["nodeValue"];
                break;
            case Node["CDATA_SECTION_NODE"]:
                b += "<![CDATA[" + c["nodeValue"] + "]]>";
                break;
            case Node["COMMENT_NODE"]:
                b += "<!--" + c["nodeValue"] + "-->";
                break;
            case Node["DOCUMENT_TYPE_NODE"]:
                b += "<!DOCTYPE " + c["name"] + (c["publicId"] ? " PUBLIC \"" + c["publicId"] + "\"" : "") + (!c["publicId"] && c["systemId"] ? " SYSTEM" : "") + (c["systemId"] ? " \"" + c["systemId"] + "\"" : "") + ">";
                break;
        }
        c = c["nextSibling"];
    }
    return b;
}
javascript encoding-style

  • What you see positive in the second version. The impression I have is that the first one (with the biggest names and comments) is the original one and the second one went through a code minificador.

3 answers

2


Uses dot notation for closed properties and square bracket/parenthesis notation in programmatic properties, which you receive via variables.

In other words, in the case of document_root.firstChild point notation is the correct use, most used.

In the case of 

var prop = element.tagName == 'INPUT' ? 'value' : 'innerHTML';
var valor = element[prop];

you should use square bracket/parenthesis notation, which is the only way to access properties of the element/object that vary programmatically.

  • 1

    Friends, I understood perfectly the explanations, and @Hugomg, the second version was passed by a mini-scanner, you guessed! : D. Since I intend to use the minified version, I would like to know if it will work the same way as the first version?

  • @Cloud.NET in programmatic terms (i.e., program reading) is indifferent. You can use any of them. But if you need to discover problems in the code the first is much better to work/read.

  • OK. So in terms of functionality, either use one or the other that will work the same way and reach the same intended goal, correct?

  • @Correct cloud.NET. But note that if the purpose of this second version is to minify the code use ["..."] brings more characters to the code that you don’t use. I suggest you use another mini-writer like Uglifyjs.

  • , thank you very much for the suggestion of mini-finisher.

2

Clearly the first one is better written because it has better variable names. The code should be self-documenting. So you can say that the first is better.

The style of access to members of Node as object members (in the first) and not elements of array (in the second) seems to be a little more readable, but it is taste. The use as a member of the array would only be interesting if you needed to use a variable as an "index" of access, which is not the case.

Other than that, I don’t see any significant differences.

Both work perfectly the same way. It’s just a matter of readability. The second will charge slightly faster because it is smaller, but the gain is tiny in this case.

0

As far as I know, the best way is to use point notation for normal object use and square notation when we’re going to modify the object programmatically..

In your case therefore the 1st notation is more correct. If you want access to all members of the object, remove or add them, vc can use bracketed notation.

Browser other questions tagged javascript encoding-style

You are not signed in. Login or sign up in order to post.