Question

我在我的应用程序中使用jQuery bootstrap。我有以下对话框代码：

<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 -->

我会多次使用此对话框。现在我有两种选择来使用它：

我应该将所有这些代码保留在某个e.g var myDialog = above code文件中的字符串js中，并在需要时调用该myDialog变量。
每次使用$("<div/>")之类的方式调用代码时，我都应动态生成上述代码。

现在我想知道这两者在性能，内存使用方面有什么区别，因为我猜测在第一种情况下它将消耗更多的内存，因为它将是大字符串。在第二种情况下，动态创建所有内容将是一项繁琐的工作。

Answer 1

您还可以调查HTML模板引擎，它们很多。这样做的另一个好处是可以保持HTML标记不受JavaScript逻辑的影响，即在JavaScript变量中难以维护的长html，同时仍然能够从您可以随时引用的JavaScript文件中引用代码。更不用说能够动态填充数据而无需重新创建HTML标记。

几年前，John Resig提出了一个solution和很好的解释，许多开发人员已经扩展了这些解释，并实施了他们自己的模板解决方案。 The Template Engine Chooser可以帮助您选择模板引擎。

Answer 2

您也可以将其放在单独的文件中，并在需要时包含该文件。这样，您就不依赖于Javascript来获取此代码。

Answer 3

嗯，这不只是一个小div，我会把它保存在你需要它的页面上的隐藏div中，只是改变它的可见性。
在我看来，这是最简单，最易被发现和可读的方式，而且你不需要每次都生成它......

jQuery：这两种编写代码的方法有何不同？

3 个答案: