使用 JavaScript (class.js) 动态加载 HTML

Question

我正在构建一个包含一些 HTML 组件的应用程序。

用例：

我正在尝试实现与here 类似的东西。我想在单击菜单时调用 HTML 组件并应用一些操作，例如 drag and resize 等。

研究：

我被建议采用面向对象的方法来构建应用程序，因此在浏览 Google 时遇到了 class.js 用于 JavaScript 继承。

我浏览了最初的教程，但我不确定如何以及在哪里存储最初保存 HTML 组件结构的 HTML？

在参考应用程序中他们使用了backbone.js和require.js，但是我学习这些的时间有点短。

到目前为止我的工作：

我尝试的是创建一个文件 components.js 并为这样的组件创建外部 HTML 结构：

var textBox = '<div class="structure-textBox">
               <div class="editable">
                <p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
                <ol>
      <li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
      <li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
    </ol>
    <p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
    <p><span style="font-size:14px;">Click on the <a href="#."><strong><u>Design Assistance</u></strong></a> link for further help.</span></p>
  </div>
</div>';

这是一个存储在 JavaScript 变量中的文本框，我想在用户单击菜单时添加它。但是如何使用 class.js 的继承模式来实现呢？

我创建了一个画布页面和组件菜单。现在我被困在获取 html 内容并将其显示在画布上的这一部分。

Answer 1

我看不出你问的与继承有什么关系。

有几种简单的方法可以使用 JavaScript 在您的网页上添加内容。

例如，如果您的页面上有以下内容 <div id='target'></div>，您可以这样写：

var textBox = '<div class="structure-textBox">
               <div class="editable">
                <p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
                <ol>
      <li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
      <li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
    </ol>
    <p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
    <p><span style="font-size:14px;">Click on the <a href="#."><strong><u>Design Assistance</u></strong></a> link for further help.</span></p>
  </div>
    </div>';
document.getElementById('target').innerHTML = textBox;

为了获得最佳效果，我建议学习使用像 jQuery 这样的库。这些工具旨在让操作页面的 HTML 变得更加容易。