CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Manish Kumar
Manish Kumar

Reputation: 10502

jQuery: Difference between these two approcaches of writing code?

I am using jQuery bootstrap in my application. I have the following dialog box code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Share With Friends</h4>
      </div>
      <form class='shareForm' id='dialogForm' role='form'>        
        <div class="modal-body">
            <div class="form-group">
                <label for="exampleInputEmail1">Update page title</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                <span class="help-block">Example block-level help text here.</span>
            </div>
            <div class="alert alert-danger">asahjk akshak shaks jhk</div>
        </div>
        <div class="modal-footer">          
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

I will use this dialog multiple times. Now I have two choice to use this:

  1. I should keep all this code as string e.g var myDialog = above code in some js file and called that myDialog variable whenever I need.

  2. I should generate above code dynamically every time it is called using something like $("<div/>").

Now I want to know what is the difference between these two in terms of performance, memory usage because what i am guessing that in first case it will consume memory more as it will be big string. In 2nd case creating everything dynamically will be a tedious job.

Upvotes: 0

Views: 92

Answers (3)

Midio
Midio

Reputation: 36

You could also investigate a HTML templating engine of which their are many. This has the added benefits of keeping your HTML markup out of your JavaScript logic, i.e no horrible long html in JavaScript variables that are hard to maintain, while still being able to reference the code from a JavaScript file that you can reference whenever you want. Not to mention being able to dynamically populate data without needing to recreate your HTML markup.

John Resig came up with a solution and great explanation several years ago which has since been expanded upon by many developers implementing their own templating solution. The Template Engine Chooser may help you in selecting a templating engine.

Upvotes: 1

St&#233;phane
St&#233;phane

Reputation: 11864

Well, it's not just a small div, I would keep that in a hidden div on the page where you need it, and just change its visibility.
That's the simplest, most discoverable and readable way in my opinion, and you don't need to generate it every time...

Upvotes: 0

Lexib0y
Lexib0y

Reputation: 500

You could also just put it in a seperate file and include that whenever it is needed. That way you are not dependand on Javascript for this code.

Upvotes: 0

Related Questions