如何編寫僅在前端或後端其中一方執行的程式碼 在您的頁面組件中，您可以通過檢查window屬性來僅在伺服器端或客戶端執行程式碼。 該屬性僅在瀏覽器中存在，因此您可以進行檢查： if (typeof window === 'undefined') { } 並將伺服器端程式碼放入該區塊中。 同樣地，您可以通過檢查進行僅客戶端程式碼的執行： if (typeof window !== 'undefined') { } JS提示：我們在這裡使用typeof運算符，因為我們無法以其他方式檢測到一個值是否未定義。我們不能做if (window === undefined)，因為這樣會得到一個“window is not defined”的運行時錯誤 作為構建時間優化，Next.js還會從bundles中刪除使用這些檢查的程式碼。客戶端bundle將不會包含包裹在if (typeof window === 'undefined') {}區塊中的內容。
學習如何在Vue中根據條件動態應用類別或其他類別。 假設您希望根據isDark屬性的值來將background-dark類別應用於元素上，如果它是true的話，否則添加background-light類別。 在Vue中，您該如何做到這一點？ 使用 :class="[ isDark ? 'background-dark' : 'background-light' ]"。 以下是一個示例： <template> <div :class="[ isDark ? 'background-dark' : 'background-light' ]"> <h1>{{ msg }}</h1> </div> </template> <script> export default { props: { isDark: Boolean } } </script> <!-- 添加“scoped”屬性將CSS限制在此元件內部 --> <style scoped> .background-dark { background-color: #000; } .background-light { background-color: #fff; } </style> （非常感謝Adam Wathan在Tailwind Slack上提出這個建議）
數據URL是瀏覽器提供的一個有用功能。 我們可以使用圖像來嵌入在HTML本身中，而不是引用文件系統文件，像這樣： <img src="data:image/png;base64,iVBORw0KGgoAA…" /> 其中，垃圾部分是由看似隨機的字母和數字組成的，非常長。 我正在使用Canvas API動態生成圖像，並偶然發現了Canvas物件的toDataURL()方法： canvas.toDataURL() 我認為這對於在伺服器端生成圖像並在網頁中提供圖像時非常有用。 特別是在Node.js進程中，使用canvas npm套件我們可以初始化一個Canvas： const { createCanvas, loadImage } = require('canvas') const canvas = createCanvas(200, 200) const ctx = canvas.getContext('2d') 然後，我們可以繪製圖像，例如使用ctx.fillText('Hello, World!', 50, 100)，並調用canvas.toDataURL()生成圖像的數據URL，並將其附加為HTML字符串： const imageHTML = '<img src="' + canvas.toDataURL() + '" />' 當然，您也可以在前端執行相同的操作，只是現在canvas物件是對您繪製所使用的<canvas> HTML元素的引用： const canvas = document.getElementById('canvas') //... const imageHTML = '<img src="' + canvas.toDataURL() + '" />'
瀏覽器開發工具是前端開發者工具箱中的基本元素，並且在所有現代瀏覽器中都可用。了解它們對您有什麼幫助的基礎知識。 瀏覽器開發工具 HTML結構和CSS HTML面板 CSS樣式面板 控制台 執行自定義JavaScript 錯誤報告 模擬器 網絡面板 JavaScript調試器 應用程序和存儲 存儲 應用程序 安全選項卡 審計 瀏覽器開發工具 我認為網站和 Web 應用程序的建構從來都不是一個容易的任務，就像後端技術那樣，但是總的來說，客戶端開發相對較容易。 一旦你弄清楚了 Internet Explorer 和 Netscape Navigator 之間的差異，並避免了專屬的標籤和技術，你所需要使用的只有 HTML，稍後是 CSS。 JavaScript 是一種用於創建對話框等功能的技術，但絕對不像今天這樣普及。 雖然許多網頁仍然是純 HTML+CSS 的形式，就像這個頁面一樣，但是許多其他網站則是在瀏覽器中運行的真正應用程序。 僅僅提供網頁的源代碼，像瀏覽器一樣過去一樣的那樣，是不夠的。 瀏覽器需要提供關於它們如何呈現頁面以及頁面當前正在做什麼的更多信息，因此它們引入了一個用於開發人員的功能：它們的開發人員工具。 每個瀏覽器都不同，所以它們的開發人員工具也略有不同。在撰寫本文時，我最喜歡的開發人員工具是由 Chrome 提供的，這也是我們在這裡討論的瀏覽器，儘管 Firefox 和 Edge 也有很好的工具。 HTML結構和CSS 最基本和常見的用法是檢查網頁的內容。打開開發人員工具時，你會看到的是元素面板： HTML面板 在左側是組成頁面的HTML。 在HTML面板上將鼠標懸停在元素上會突顯該元素在頁面中的位置，點擊工具欄中的第一個圖標可以點擊頁面中的元素並在檢查器中進行分析。 您可以將元素拖放到檢查器中，即時更改它們在頁面中的位置。 CSS樣式面板 在右側是應用於當前選中元素的CSS樣式。 除了編輯和禁用屬性之外，您可以通過點擊“+”圖標添加新的CSS屬性，並為所需的任何目標添加。 您還可以觸發選定元素的狀態，以便在活動、懸停或焦點時查看應用的樣式。 在底部，選中元素的框模型可以讓您快速查看邊距、填充、邊框和尺寸: 控制台 開發工具的第二個最重要的元素是控制台。 可以單獨查看控制台面板，也可以在元素面板中按下 Esc 鍵，它將顯示在底部。 控制台主要有兩個用途：執行自定義JavaScript 和錯誤報告。 執行自定義JavaScript 在控制台底部有一個閃爍的光標。您可以在這裡輸入任何JavaScript，它將立即執行。例如，嘗試運行： alert('test') 特殊標識符 $0允許您引用當前在元素檢查器中選中的元素。如果要將其作為 jQuery 選擇器引用，請使用 $($0)。 您可以使用 shift-enter 來編寫多行。在腳本的末尾按 enter 鍵運行它。...