jsを使用してhtmlに共通のhtmlページを導入させる(モジュール化によりヘッダとテールの共用効果を実現)

プロジェクトを書く過程で多くのページが同じヘッダー、末尾を使用することがよくありますが、各ページコードをコピーすると、作業量が増加し、後期の修正が不便になります.その際に公共部分のコードを抽出し,個別のHTMLなどを入れて必要に応じて呼び出す.
まずrequirejsをダウンロードする必要がありますrequirejsをダウンロードするのは簡単です.ページのロード時にrequirejsを導入することを定義し、導入するjsパスをdata-mainに指定し、導入するjsパスにrequirejsを導入する必要があります.configと私たちが使用するページjsでは、requirejsは私たちのモジュールに基づいて対応する依存をロードし、コードを実行します.

しいconfigを します.jsファイル

//   config.js  
require.config({
  baseUrl: '/',
  paths: {
  //     header.js        js  (          js  )
    'header': 'modules/header',
    'jquery': 'jquery/jquery-3.4.1.min'
  }
})

もう1つheader.を jsファイル

//   AMD     
define(['jquery'], () => {
//            ，  header          ，        
//            ，        
  //     
  class Header {
      constructor () {
          this.headerLoad()
      }
      headerLoad () {
          //  header.html  DOM        
   
          //  ：hede.html          ，                 。
          $('header').load('head.html')
      }
  }
  return new Header()
});

そして のindexでjsに み まれる

require(['./config'], () => {
  require(['header'], () => {
    //        require                
    console.log()
  }) 
})

これによりrequirejsを して なるページで のモジュールを することができる( クラス の )