複数のHTMLファイルで重複したHTMLコードを取り除く効率的な方法が必要

Question

特定のログインボタンが押されたときにスライドするログインフォームの作成に忙しいです。私は今つまずく問題は私のウェブサイトが現在使用していることです

<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は次のようになり

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

：私は、次のコードを使用してこの作業を持っています4つのHTMLページ。したがって、それらのHTMLファイルのそれぞれに上記のHTMLコードが存在します。今私はこの重複したコードを取り除きたいと思っていますが、これを行うには何が良い、効率的な方法であるかは分かりません。私はすでに働いていたいくつかのことを自分で試しましたが、効率的かどうかはわかりません。私が最初にしたことは、ログインボタンが押された後にdivの中にHTMLコードを追加することでした。私はこれが一度ブール値の1回だけ起こるようにしました。

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(); 
    }); 
}); 

私が見つけた別の解決策は、別のHTMLファイル内のdiv内のコードを入れて、そのファイルをdivにロードすることでした。

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

Answer 1

HTMLとJSの混合は悪い原則です。 JSで明示的なDOM操作やHTML文字列をたくさん使うのは悪い（読みにくく/維持するのが難しい）。

（Java、PHP、Rubyなどの）テンプレート処理を行うにはサーバー側の技術が必要です。また、ReactやAngularJSのようなクライアント側の技術を使用することもできます。