Question

我有HTML和＆amp; JS并希望将其全部编译为一个JS文件，以便我可以使用嵌入外部客户端站点的一行。与<script src="http://example.com/assets/js/myembed.min.js"></script>

一样

示例代码

<div class="page-container">
    <div class="container">
        <br />
        <button class="btn launchConfirm">Launch Confirm</button>
    </div>
</div>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
  </div>
</div>
<script>
$('.launchConfirm').on('click', function (e) {
    $('#confirm')
    .modal({ backdrop: 'static', keyboard: false })
    .one('click', '[data-value]', function (e) {
        if($(this).data('value')) {
            alert('confirmed');
        } else {
            alert('canceled');
        }
    });
});
</script>

我应该将它全部包装在document.write中还是更好的方法来实现这一目标？如果这是最好的方法，那么自动执行此操作的最佳方法是什么，即。使用Grunt / Gulp？

E.g。

document.write("<div class=\"page-container\">");
document.write("        <div class=\"container\">");
document.write("            <br \/>");
document.write("            <button class=\"btn launchConfirm\">Launch Confirm<\/button>");
document.write("        <\/div>");
document.write("<\/div>");

提前致谢。

Answer 1

请勿使用document.write。

var x = '<div> All your html code store in variable </div>';
$("#InsertHere").html(x); // insert where you want

or document.getElementById("InsertHere").innerHTML = x;

// continue your actual code once those elements are ready 
$('.launchConfirm').on('click', function (e) { }

如果不使用始终需要选择器的DOM插入方法，则无法嵌入html代码。您可以创建一个唯一的类名并且具有该类名的标记将插入此代码。这也是jQuery所做的。

<div class=".innerHTML"></div> // you have to ask them to create such element

Answer 2

快速而肮脏的是将HTML复制到选择的文本编辑器，替换换行符和缩进，然后将所有html添加为一行。并使用单引号，所以你不必逃避双引号

创建JS嵌入文件的最佳方法是什么？

2 个答案: