需要一种有效的方法来摆脱多个 HTML 文件中的重复 HTML 代码 [重复]答案

【问题标题】：Need an efficient way to get rid of my duplicate HTML code in multiple HTML files [duplicate]需要一种有效的方法来摆脱多个 HTML 文件中的重复 HTML 代码 [重复]
【发布时间】：2016-12-19 17:39:08
【问题描述】：

我目前正忙于创建一个登录表单，当某个登录按钮被按下时会向下滑动。我已经通过使用以下代码来完成这项工作：

$(document).ready(function (){
    $('.loginButton').click(function(){
        $('.login').slideToggle();
    });
});

我为登录表单制作的 HTML 如下所示：

    <main>
        <div class="login">
            <h5>Log in here</h5>
            <form>
              <label for="username">Username:</label>
              <input type="text" id="username" required>
              <label for="password">Password:</label>
              <input type="password" id="password" required>
              <p class="registertext">Click <a href="register.html">here</a> to register!</p>
              <input type="submit" value="Sign in">
            </form>
        </div>
    </main>

我现在偶然发现的问题是我的网站目前使用四个 HTML 页面。因此，在它们的每个 HTML 文件中，都存在上述 HTML 代码。现在我想摆脱这个重复的代码，但我真的不知道什么是一个好的和有效的方法来做到这一点。我自己已经尝试了一些有效的方法，但我不确定它们是否有效。我做的第一件事是在按下登录按钮后将 div 中的 HTML 代码附加到 div 中，我只让这种情况发生一次，一次是布尔值。

var firstTime = true;

$(document).ready(function (){
    $('.loginButton').click(function(){
        if (firstTime)      {
            $('.login').append('<h5>Log in here</h5><form><label for="username">Username:</label><input type="text" id="username" required><label for="password">Password:</label><input type="password" id="password" required><p class="registertext">Click <a href="register.html">here</a> to register!</p><input type="submit" value="Sign in"></form>');
        firstTime = false }
    $('.login').slideToggle();
    });
});

我发现的另一个解决方案是将 div 中的代码放在一个单独的 HTML 文件中，然后将该文件加载到 div 中。

$(document).ready(function (){
    $('.login').load(login.html);
    $('.loginButton').click(function(){
        $(this).toggleClass('active');
        $('.login').slideToggle();
    });
});

【问题讨论】：

处理这个问题的最好方法是使用某种服务器接口，例如 PHP 或 NodeJS/pug 模板。
如果您不想使用某种模板引擎，请使用 jQuery load() 方法，如您的示例所示。别忘了，这个方法是异步的
试试 reactrb.org 你可以用 ruby 编写的模块反应组件替换你的 html。无需服务器端模板或任何东西即可开始使用。

标签： javascript jquery html css

【解决方案1】：

混合 HTML 和 JS 是一个糟糕的原则；在 JS 中进行大量显式 DOM 操作或 HTML 字符串是不好的（难以阅读/维护）。

您需要一种服务器端技术来进行模板化（在 Java、PHP、Ruby 等中），或者您可以使用 React 或 AngularJS 等客户端技术。

【讨论】：