如何从HTML文件中取出脚本并将其移动到它自己的. js文件中

How to take a script from an HTML file and move it to it's own .JS file?

本文关键字：文件 移动 js 它自己 自己的 脚本 HTML      更新时间：2023-09-26

我试图简化我的HTML文件，我有很长的脚本，包括只是HTML(模板)，我想移动到自己的外部文件。当<script>标签涉及函数时，这对我来说很容易做到，但在我的情况下，它只是直接的HTML。在新的外部文件中，我如何正确地键入这些HTML标记?见下文. 

    <script type="text/template7" id="myStuffTemplate">
  {{#each results}}
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">{{this.name}}</div>
            </div>
            <div class="item-text">{{this.description}}</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  {{else}}
  <div style="text-align:center">
    <h1>Nothing yet!</h1>
    <h2>Upload things you're willing to trade so you can start trading!</h2>
  </div>
  {{/each}}
</script>

这是HTML文件中的脚本。我想把它移到它自己的外部文件中。一个人怎么能做到这一点呢?当我链接它时，我是否像引用其他文件一样引用它?如:

<script type="text/template7"  src="js/views/mystuff.js" id="myStuffTemplate"></script>

这不是一个脚本，这是一个模板，由车把或胡子模板。

你不能像Javascript那样用<script src="...">"源"它们，但它们可以存储在外部，然后在运行时加载和处理。这需要通过AJAX调用异步完成。例如，假设您正在使用jQuery，您可以使用以下命令来实现:

// request the template
$.get('templates/products.hbs', function(rawTemplate) {
    // once received, convert the raw template to a handlebars template
    var template = Handlebars.compile(rawTemplate);
    // compile the template with your context 'data' and set it on an element with an id
    $('#someTargetId').html(template(data));
}, 'html'); // <-- tell jquery to load the file as html

请注意，即使是小模板也需要一些时间来加载，所以在页面加载和模板加载之间会有延迟。

首先，考虑使用像Angular.js或React.js这样的框架，但这应该适合你:

让我们假设你想把它放在一个id=items的div中:<div id="items"> Your code... </div>

  1. 在html文件中添加这个，就在<body>结束标记之前:

<script type="text/javascript" src="code.js"></script>包括你的代码和这个<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  • 创建一个code.js文件并放入以下代码:

    $(document).ready( function() {
    var myCode = "{{#each results}}" +
"<div class="list-block media-list">" +
  "<ul>" +
    "<li>" +
      "<a href="#" class="item-link item-content">" +
        "<div class="item-media"><img src={{this.pictures['1']}} width="80" height="80px"></div>" +
        "<div class="item-inner">" +
          "<div class="item-title-row">" +
            "<div class="item-title">{{this.name}}</div>" +
          "</div>" +
          "<div class="item-text">{{this.description}}</div>" +
        "</div>" +
      "</a>" +
    "</li>" +
  "</ul>" +
"</div>" +
"{{else}} " +
"<div style="text-align:center">" +
  "<h1>Nothing yet!</h1>" +
  "<h2>Upload things you're willing to trade so you can start trading!</h2>" +
"</div>" +
"{{/each}}";
$( "#items" ).html( myCode );
} );
    • 相关文章：