這篇教學為讀者解釋了如何在網頁上加載並顯示天氣小部件的JavaScript代碼。通過分析立即調用的函數表達式(IIFE)及其功能,讀者將了解如何動態添加腳本以加載外部JavaScript文件。此外,教學還介紹了如何使用自定義data-*屬性和內聯樣式來配置和定制天氣小部件的外觀和行為。
如果想要獲取該代碼,請在【模板商城】中選擇此模板。下方是該代碼的詮釋:
代碼定義了一個立即調用的函數表達式(IIFE),它接受三個參數:d(代表文檔對象),s(代表腳本標籤的字符串),和id(代表要創建的腳本元素的ID)。
1. 首先,它檢查是否已經有一個具有給定ID的元素,如果存在並且window.__TOMORROW__也存在,則調用window.__TOMORROW__.renderWidget()來渲染小部件。然後返回,不執行任何其他操作。
2. 如果不存在具有給定ID的元素,則繼續:
- 通過getElementsByTagName(s)獲取文檔中的第一個元素,將其存儲在fjs中。
- 使用createElement(s)創建一個新的元素,並將其ID設置為給定的id。
- 將新創建的元素的src屬性設置為外部JavaScript文件的URL。
- 在fjs前面將新創建的元素插入到DOM中。
1. 首先,它檢查是否已經有一個具有給定ID的元素,如果存在並且window.__TOMORROW__也存在,則調用window.__TOMORROW__.renderWidget()來渲染小部件。然後返回,不執行任何其他操作。
2. 如果不存在具有給定ID的元素,則繼續:
- 通過getElementsByTagName(s)獲取文檔中的第一個元素,將其存儲在fjs中。
- 使用createElement(s)創建一個新的元素,並將其ID設置為給定的id。
- 將新創建的元素的src屬性設置為外部JavaScript文件的URL。
- 在fjs前面將新創建的元素插入到DOM中。
用於顯示天氣小部件。它具有以下自定義data-*屬性:
- data-location-id: 用於表示地點的ID。
- data-language: 用於表示小部件的語言,這裡是英文(EN)。
- data-unit-system: 用於表示度量單位系統,這裡是公制(METRIC)。
- data-skin: 用於表示小部件的外觀,這裡是亮色主題(light)。
- data-widget-type: 用於表示小部件的類型,這裡是空氣質量指數迷你小部件(aqiMini)。
此外,元素還具有內聯樣式,設置了padding-bottom和position屬性
- data-location-id: 用於表示地點的ID。
- data-language: 用於表示小部件的語言,這裡是英文(EN)。
- data-unit-system: 用於表示度量單位系統,這裡是公制(METRIC)。
- data-skin: 用於表示小部件的外觀,這裡是亮色主題(light)。
- data-widget-type: 用於表示小部件的類型,這裡是空氣質量指數迷你小部件(aqiMini)。
此外,元素還具有內聯樣式,設置了padding-bottom和position屬性