我有需要追蹤網站上的檔案下載。 起初，我查看了提供統計資訊的網址縮短服務，因為我以為那是我在沒有後端的情況下的唯一選擇（這是一個靜態網站）。但是，我並沒有找到令我感到興奮的解決方案。 然後，我看到了 Plausible 可以追蹤檔案下載。 這非常簡單，你只需要交換默認的腳本並列出你想追蹤的檔案副檔名，例如 pdf 和 epub。PDF 檔案會被默認追蹤，但是 epub 檔案不會，所以我需要將它們都添加進去。 從： <script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script> 到： <script defer file-types="pdf,epub" data-domain="yourdomain.com" src="https://plausible.io/js/script.file-downloads.js"></script> 然後，在網站設定中添加一個名為 “檔案下載” 的目標。 非常簡單，非常好用。
如何從零配置 macOS 終端，使其成為你日常開發的完美工具。 也可以查看我的如何使用 macOS 終端文章。 如何設定 macOS 命令行 我剛剛買了一台新的 MacBook Air 來取代我的心愛的 2010 MacBook Pro，於是我決定記錄一下配置命令行的流程。 默認情況下，我們有以下內容： 在本文結束時，我們將擁有一個更好的終端。 首先，安裝 Homebrew。前往 https://brew.sh，並在終端中複製下面的魔法公式： /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 這將完成安裝 Brew 軟件包管理器，這是一個不可思議的工具。這需要一些時間，因為它需要從 Apple 下載 Xcode 命令行工具。 接下來，我們安裝 Fish Shell。運行 brew install fish 命令。 現在，我們需要將 Fish 設置為默認的 shell。運行 sudo vim /etc/shells 命令，然後按下 i 鍵進入插入模式，接著在列表末尾添加 /opt/homebrew/bin/fish。 然後按下 esc 鍵，然後鍵入 :wq 來保存文件並退出編輯器。 輸入 chsh -s /opt/homebrew/bin/fish 命令將默認 shell 更改為 Fish。 試著打開一個新的終端窗口，你將看到 Fish 的歡迎信息： 現在來添加一些顏色。輸入 fish_config 進入（令人驚豔的）配置工具：...
如何從零配置 VS Code，使其成為完美的 JavaScript 開發工具 最近我買了一台新的 Mac（MacBook Air），需要安裝全新的 VS Code，所以我花了點時間記錄下來，把我的編碼體驗與使用的舊 MacBook Pro 相同，該筆記本已經使用了長達 9 年的時間。 還可以查看我的 VS Code 介紹 文章 以下是我所做的事情： 我安裝了 Fira Code 並將其設置為我的字體 我將制表符大小設置為2（這是我的習慣）。空格。2個空格。 我將 **/node_modules 添加到排除文件列表中，以防止它們顯示在文件列表中 我啟用了“粘貼時格式化”和“保存時格式化”功能 啟用了字體連接功能 停用了縮略圖功能 啟用了“修剪末尾空格”功能 我安裝了 Sublime Text 按鍵映射插件。這對於顯示/隱藏側邊欄，關閉文件等提供了快捷鍵，例如 cmd-K cmd-B。 接下來，我安裝了一些主題。這取決於你的個人喜好。我喜歡在以下主題之間切換： Palenight 主題 Nostromo Night Owl Ayu 然後我安裝了以下擴展： Prettier IntelliSense for CSS class names Intent 4-to-2 ESLint Duplicate action Bracket Pair Colorizer 2 Babel ES6/ES7 ES7 React/Redux/GraphQL/React-Native snippets TODO Highlight 這是開始使用 JavaScript 和 React 的好套件集合。...
在HTML頁面中加載腳本時，你需要小心，以避免影響頁面的加載性能。根據你在HTML頁面中添加腳本的位置和方式，將影響加載時間。 位置的重要性 async和defer 性能比較 沒有defer或async，在head中 沒有defer或async，在body中 使用async，在head中 使用defer，在head中 阻塞解析 阻塞渲染 domInteractive 保持順序 告訴我最好的方法 在HTML頁面中加載腳本時，你需要小心，以避免影響頁面的加載性能。 傳統上，腳本是以以下方式包含在頁面中： <script src="script.js"></script> 當HTML解析器找到這行代碼時，將發出請求以獲取腳本並執行它。 一旦此過程完成，解析可以繼續，並分析頁面的其餘內容。 正如你可以想像的，此操作對頁面的加載時間產生了巨大影響。 如果腳本加載時間比預期的要長，例如如果網絡速度較慢，或者如果你使用的是移動設備且連接不穩定，訪問者可能會看到一個空白頁面，直到腳本加載並執行完成。 位置的重要性 當你初學HTML時，你被告知腳本標籤位於<head>標籤中： <html> <head> <title>標題</title> <script src="script.js"></script> </head> <body> ... </body> </html> 正如之前所說，當解析器找到這行代碼時，它將獲取腳本並執行它。 然後，在完成這個任務之後，它繼續解析body。 這樣做是不好的，因為會引入很多延遲。解決這個問題的一個常見解決方案是將script標籤放在頁面底部，即在結束的</body>標籤之前。 這樣做可以在頁面已經解析和加載完成之後加載和執行腳本，這對於不支持HTML的兩個相對新的功能（async和defer）的舊瀏覽器來說是一個巨大的改進。 如果你需要支持不支持async和defer的舊瀏覽器，這是你可以做的最好的事情。 async和defer async和defer都是布爾屬性。它們的使用方式類似： <script async src="script.js"></script> <script defer src="script.js"></script> 如果你同時指定了這兩個屬性，對於現代瀏覽器來說，async的優先級更高，而對於支持defer但不支持async的舊瀏覽器，則會回退到使用defer。 有關支持情況的詳細信息，可以參考 caniuse.com 中的 async https://caniuse.com/#feat=script-async 和 defer https://caniuse.com/#feat=script-defer 只有在將腳本放在頁面的head部分時，這些屬性才有意義，如果將腳本放在上面看到的body底部，則這些屬性將無效。 性能比較 沒有defer或async，在head中 以下是一個在head部分中未使用defer或async的腳本加載方式： 解析過程在獲取腳本並執行之前暫停，腳本執行完成後解析繼續。 沒有defer或async，在body中 以下是一個在body標籤結束之前並未使用defer或async的腳本加載方式： 解析過程不會暫停，並且腳本在解析完成之後被獲取並執行。解析在腳本甚至下載之前完成，因此頁面在之前的示例中更早地顯示給用戶。 使用async，在head中 以下是一個在head標籤中使用async的腳本加載方式： 腳本異步獲取，當腳本準備好時，HTML解析將暫停以執行腳本，然後繼續解析。 使用defer，在head中 以下是一個在head標籤中使用defer的腳本加載方式： 腳本異步獲取，並且僅在HTML解析完成後才執行。 解析完成的方式與將腳本放在body標籤結束時相同，但是腳本執行的時間總體上更早，因為腳本已經在HTML解析期間並行下載。...
使用動態型語言與靜態型語言之間的主要差異在於是否需要明確指定變數和物件的類型。 在程式設計中，當你不需要明確指定變數和物件的類型時，我們稱這種語言為動態型語言。 相反地，靜態型語言則要求指定類型。 這兩種方法各有優點和缺點，你可以一直辯論，但事實是，這兩種方法都在其具體的內容和用法中非常出色。 JavaScript是一種動態型語言。你不需要告訴它一個字串就是一個字串，也不必要求一個函數接受一個整數作為其參數。 這使JavaScript具有很高的靈活性。靈活性讓你能更快地移動，快速更改事物，以更快的速度迭代。 相反，強型系統為程式提供了更多的結構，這對於在團隊合作時非常有幫助。當一個程序員在進行開發時，不可能將所有的程式碼都牢記在心中，而具有類型的程式碼有助於保持代碼的可管理性。 這是編譯語言的典型特徵（而著名的動態語言如JavaScript、Python和Ruby則是動態型語言）。 為了獲得更多安全性和對程式碼的信任，你必須放棄動態型語言所提供的某些靈活性。 在編譯過程中，編譯器可以通過類型檢測在編譯時檢測錯誤，而不是在執行時檢測錯誤，這使得編寫符合你期望的代碼變得更加簡單（也使測試階段稍微簡化，雖然沒有什麼能使你的程式完美）。 TypeScript是靜態型語言的一個很好的例子。它可以編譯為JavaScript，讓你既可以使用JavaScript平台，又可以享受類型帶來的好處。C、Go、Java和Swift都是優秀的靜態型語言的例子。 然而，動態型語言並不意味着你不需要類型，當然，你可以在我的JavaScript類型文章中看到。你只是隱式地使用類型，帶來了你所想象的優點和缺點。
使用Vue，您可以使用組件定義應用程式的佈局。起初，您手動將組件放置在所需位置，但有時需要更靈活的方式來根據應用程式狀態顯示或隱藏組件。 使用條件指令 最簡單的選擇是使用 v-if 和 v-else 指令。 這裡有個例子。v-if 指令檢查計算屬性 noTodos，如果狀態屬性 todos 至少包含一個項目，則返回false： <template> <main> <AddFirstTodo v-if="noTodos" /> <div v-else> <AddTodo /> <Todos :todos=todos /> </div> </main> </template> <script> export default { data() { return { todos: [] } }, computed: { noTodos() { return this.todos.length === 0 } } } </script> 這使得可以解決許多應用程式的需求，而無需達到更複雜的設定。條件可以嵌套，例如： <template> <main> <Component1 v-if="shouldShowComponent1" /> <div v-else> <Component2 v-if="shouldShowComponent2" /> <div v-else> <Component3 /> </div> </div> </main> </template> 使用 component 元件和 is 除了使用 v-if 和 v-else 結構，您可以建立模板，其中有一個將動態分配組件的佔位符。...
我们将电子学分为两个大部分：模拟与数字。 自然界中的一切都是模拟的。 温度、光线、距离、速度、湿度、声音，一切都可以用近乎无限的数值和精度来衡量。 模拟是自然的。然而，数字是人为的。人类在探求自然并创造人造系统和模拟的过程中，提出了数字测量和数值的概念。 数字表示只能有两种状态：开或关。1或0。 利用只使用0和1两个值来表示基本数值，我们可以以简单的方式解决复杂问题，并最终创造了计算机、智能手机和互联网等东西。 我们可以组合多个二进制值来表示具有超过2个状态的数字。用2个数字可以定义4个状态，用3个数字可以定义8个状态，用4个数字可以定义16个状态，以此类推。 然后，我们使用特定的协议和约定来表示数值。 例如，我们可以使用一系列位来表示十进制数： 1可以表示为[1\times2^0] 10可以表示为[1\times2^1 + 0\times2^0] 111可以表示为[1\times2^2 + 1\times2^1 + 1\times2^0] 数值中的前导零可以被省略或添加，因为它们在最左边的最左边的1之前并没有任何意义：110可以表示为0110或00000110（如果需要）。它们具有完全相同的含义，因为如上所述的系统，我们只是将2的幂乘以零。 根据我们需要表示的值，我们需要足够的数字位来表示足够的数字。 如果我们想要有16个值，以便我们可以从0数到15，我们需要4个数字位（比特位）。使用5个比特位，我们可以计数32个数字。32个比特位将给我们4,294,967,296个可能的数字。 64个比特位将给我们9,223,372,036,854,775,807个可能的数字。 以下是使用仅2个比特位生成的前4个数字的简单转换表格： 十进制数 二进制数 0 00 1 01 2 10 3 11 以下是前8个数字的简单转换表格： 十进制数 二进制数 0 000 1 001 2 010 3 011 4 100 5 101 6 110 7 111 如果注意到，我在从4到7的序列中重复了上述序列，只是使用1代替0。 以下是前16个数字的简单转换表格： 十进制数 二进制数 0 0000 1 0001 2 0010 3 0011 4 0100 5 0101 6 0110 7 0111 8 1000 9 1001 10 1010 11 1011 12 1100 13 1101 14 1110 15 1111
如何迭代 NodeList 並為每個元素附加事件監聽器 您可以通過使用 for..of 循環迭代 document.querySelectorAll() 調用返回的所有元素來為它們添加事件監聽器： const buttons = document.querySelectorAll("#select .button") for (const button of buttons) { button.addEventListener('click', function(event) { //... }) } 需要注意的是，document.querySelectorAll() 返回的不是數組，而是 NodeList 對象。 如果你希望，你可以使用 forEach 或 for..of 對它進行迭代，或者使用 Array.from() 將它轉換為數組。
以下是我在 PHP 調試中常用的一段程式碼。 我想要將值使用 error_log() 印出到 error log 中，但是它只接受字串作為輸入。 因此，我使用以下程式碼片段將 var_dump() 的結果印出： ob_start(); var_dump($something); $contents = ob_get_contents(); ob_end_clean(); error_log($contents);
有時你可以在舊的程式碼中發現將undefined傳遞給函式的情況。為什麼呢？ 我是在觀看著名的Paul Irish關於jQuery源碼的視頻時發現這個小技巧的。 那個視頻來自不同的時代，在撰寫本文時已經9年了，而且jQuery源碼也有所改變，所以你無法在其中看到這個東西，但我還是覺得這是一個有趣的發現。 此外，JavaScript也有所改變。這種技巧只適用於ES5之前的JavaScript。 在2009年發布的ES5之前，這幾乎是必須的一步。 注意：ES5及更新的代碼庫不再需要添加這個，因為現在undefined是一個只讀值。 有時在我們的代碼中，我們確認變量是否為undefined的方式如下： if (car !== undefined) { } 如果這是我們的代碼，運行在我們自己控制的服務器上，這應該沒問題。但是想象一下，一個像jQuery這樣的庫需要經受考驗，能夠在每個可能的網站上工作。 如果有人用一個簡單的方式覆蓋了undefined undefined = '🤔' // 你喜歡的任何值 那麼上面的if語句會失敗，將car與🤔進行比較。 這在ES5之後已經修復了，但在此之前是可能的。 如果car實際上是undefined，則現在無法找到這個結果。 除非使用這種技巧：我們將所有的代碼包裹在IIFE（立即呼叫的函式表達式）中，並在函式定義中傳遞一個參數，在呼叫階段不將它添加進去。 (function() { /*我們的函式代碼*/ })() (function(undefined) { /*我們的函式代碼*/ })() 可以看到，undefined被當作參數傳遞，但在我們調用函式時不作為參數傳遞。因此，在函式內部，變量undefined的值(保證)是undefined的原始值。無論頁面上的其他腳本對其做了什麼，它都是隔離的。 現在，我最喜歡解決這個問題的方法是使用這種技巧來檢查是否存在undefined的值： if (typeof car !== 'undefined') { } typeof運算符返回一個包含變量類型的字符串。我們可以將其與字符串'undefined'進行比較，這樣就不會有上面的問題了。 但是，了解某些你所讀取的其他人編寫的代碼的原因總是很好的，尤其是當它是需要在各個地方運行的庫級代碼時。