使用 vanilla js 按需加載腳本文件

Question

我使用手風琴或標簽。 單擊選項卡時，我想顯示地圖或需要加載大 javascript 文件的內容。

為了在不需要時不加載大 javascript，我只想在單擊選項卡時加載它。

我怎樣才能做到這一點？ 我用手風琴和點擊事件創建了一個很好的起點。

• 我使用 vanilla js（純 javascript - 沒有 jQuery）
• 我在網頁上使用它（不是 nodejs）
• 如果它適用於現代瀏覽器，我很好（不需要 IE）

 window.addEventListener('DOMContentLoaded', () => { document.querySelector('[data-trigger]').addEventListener('click', () => { console.log('Load script from file'); // CDN example - https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.0/mapbox-gl.js }); });

 ul { list-style: none; margin: 0; padding: 0; } label { display: flex; align-items: center; } label:before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; width: 24px; height: 24px; } input[type=checkbox] { display: none; } input[type=checkbox]:checked ~ h2 label:before { transform: rotate(90deg); } p { display: none; } input[type=checkbox]:checked ~ h2 ~ p { display: block; }

 <ul> <li> <input type="checkbox" id="faq-1"> <h2 data-trigger> <label for="faq-1">Click to load map</label> </h2> <p>Gummies marzipan croissant chupa chups.</p> </li> <li> <input type="checkbox" id="faq-2"> <h2> <label for="faq-2">Something else</label> </h2> <p>Cookie bear claw carrot cake croissant.</p> </li> </ul>

Answer 1

您可以動態地創建一個腳本標簽，並在按下按鈕時將其添加到文檔中。 這將觸發腳本立即加載。 使用onload回調，您可以在腳本實際加載的那一刻運行您的代碼，例如創建地圖。

添加{ once: true }作為addEventListener的第三個參數，因為它將確保觸發器只能被單擊一次並且不能多次附加腳本。

function createMap() {
  const map = new mapboxgl.Map({
    ...
  });
}

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('[data-trigger]').addEventListener('click', () => {
    console.log('Load script from file');
    
    const script = document.createElement('script');
    script.id = 'mapboxgljs';
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.0/mapbox-gl.js'
    script.async = true;
    script.onload = function() {
      console.log('script loaded, you can use it now.');
      createMap();
    }
    document.body.append(script);
  }, { once: true }); // Make sure that the button can only be pressed once.
});

Answer 2

由於您對僅支持現代瀏覽器感到滿意，因此您可以使用動態import()函數來加載文件：

 window.addEventListener('DOMContentLoaded', () => { document.querySelector('[data-trigger]').addEventListener('click', async() => { const module = await import('https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.0/mapbox-gl.js'); console.log(`module is loaded: ${Object.keys(mapboxgl)}`); }); });

 ul { list-style: none; margin: 0; padding: 0; } label { display: flex; align-items: center; } label:before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z'/%3E%3C/svg%3E"); background-repeat: no-repeat; width: 24px; height: 24px; } input[type=checkbox] { display: none; } input[type=checkbox]:checked~h2 label:before { transform: rotate(90deg); } p { display: none; } input[type=checkbox]:checked~h2~p { display: block; }

 <ul> <li> <input type="checkbox" id="faq-1"> <h2 data-trigger> <label for="faq-1">Click to load map</label> </h2> <p>Gummies marzipan croissant chupa chups.</p> </li> <li> <input type="checkbox" id="faq-2"> <h2> <label for="faq-2">Something else</label> </h2> <p>Cookie bear claw carrot cake croissant.</p> </li> </ul>

import()返回一個在成功獲取時解析的承諾，並在后續調用中立即解析（在我的測試中），因此您不必專門處理它。

對於您的特定mapbox-gl腳本，返回的值將沒有用，因為該腳本不是作為 ES6 模塊編寫的，但腳本運行的副作用將就位（在這種情況下， mapboxgl變量被分配到globalThis ）。 在加載的腳本為模塊的場景下（正確使用export ），可以直接使用解析后的值，避免污染全局命名空間。