Which is the best way to handle long write() arguments?

Question

UPDATE: Thanks to everyone for the responses. I didn't realize document.write() was deprecated. Add a another notch to the learning column. I'll be taking the advice posted here, but leave the original question so that the answers given make sense in context of the original question.

---

I'm in the process of coding some rather long write() arguments and am trying to decide which of the following examples would be the best to follow, considering syntax, readability and performance. Should I

a. Keep them all on one line:

<script>

    var someVariable = "(<a href=\"http://www.example.com\"&gt;Link&lt;\/a&gt;)";

    document.write("<p>Supergroovalisticprosifunkstication and Supercalifragilisticexpialidocious are very long words.</p>" + someVariable + "<p>Dociousaliexpisticfragilicalirepus is Supercalifragilisticexpialidocious spelled backwards.</p>" + someVariable);

</script>

b. Break them up by adding line breaks for somewhat improved readability:

<script>

    var someVariable = "(<a href=\"http://www.example.com\"&gt;Link&lt;\/a&gt;)";

    document.write("<p>Supergroovalisticprosifunkstication and Supercalifragilisticexpialidocious are very long words.</p>" 
        + someVariable
        + "<p>Dociousaliexpisticfragilicalirepus is Supercalifragilisticexpialidocious spelled backwards.</p>" 
        + someVariable);

</script>

c. Break them up by using multiple variables:

<script>

    var someVariable = "(<a href=\"http://www.example.com\"&gt;Link&lt;\/a&gt;)";

    var partOne = "<p>Supergroovalisticprosifunkstication and Supercalifragilisticexpialidocious are very long words.</p>"; 
    var partTwo = "<p>Dociousaliexpisticfragilicalirepus is Supercalifragilisticexpialidocious spelled backwards.</p>"; 

    document.write(partOne + someVariable + partTwo + someVariable);

</script>

Thanks in advance.

Answer 1

My gut reaction is: don't do that. (Your example is poor, you should not be writing big chunks of content in your behavior layer.)

Whenever you have to do this, either concat:

var longVar = 'asdfasdf asdf asdf asdfasdf asdfasdf asdf asdfasdf' +
    ' fasdf s9d0af asdf asdf0s,dv z-xcfva-sdfmwaert ' +
    'qersdfasdfasdfasdfasdf';
document.write(longVar);

Or if it gets really long, performance may benefit by using joining an array:

var longVar = [
    'asdfasdf asdf asdf asdfasdf asdfasdf asdf asdfasdf',
    ' fasdf s9d0af asdf asdf0s,dv z-xcfva-sdfmwaert ',
    'qersdfasdfasdfasdfasdf'
].join('');
document.write(longVar);

Answer 2

I would write it however is going to be easiest to read and maintain. Then test the performance. If it is too slow try incrementally improving the algorithm until the speed is acceptable.

So ideas to improve the performance: - ensure script is minified. - do as much preprocessing on the server and serve the "processed" script.

By using a minification tool (e.g. jsMin) you won't suffer any issues by having white space and line breaks for readability.

Answer 3

-- and it is a bad example to use document.write() as it belongs to the 90ties and was deprecated with the introduction of HTML4 in 1998 ...

If you got anything serverside it is better to handle the code-generation there ...

On the issue of concatenating strings I agree with eyelidlessness !-)

EDIT (29/10)

As a comment to a comment (I need the code-notation)

<script type="text/javascript">
  window.onload = function(){
    var newD = document.createElement("div");
    newD.appendChild(document.createTextNode("Hello World"));
    document.getElementsByTagName("body")[0].appendChild(newD);
  }
</script>

This way anything is inserted in a document ...