歡迎來到第 79 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介
🔥強烈推薦
- 譯：編程 40 年 - 軟件只是樂趣
- CJS 和 ESM 相互兼容？
🔧開源工具&技術資訊
- superjson - 複雜的JS對象序列化
- play-button - 播放音視頻的按鈕
📚 教程&文章
- Docker 快速入門
- 使用樣式查詢增強 CSS 變量能力
- 你需要了解的現代 CSS 特性 - 2024 春季版
也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）
下面開始本期內容的介紹，預計閱讀時間 7 分鐘。
🔥強烈推薦
1. 譯：編程 40 年 - 軟件只是樂趣
作者從 14 歲（1984）開始接觸編程，到現在距離第一次編碼已經過去40年了，現在每天仍然在編寫代碼。
我想不出我還願意做其他什麼生活謀生的事情。我指不出巨大的成功和令人印象深刻的壯舉，但我希望能夠在這個行業生存幾十年，足以讓我有足夠的資格談論軟件開發。
呼籲讀者要不斷思考、學習、研究，並強調了照顧好自己和他人的重要性！
人很重要。軟件只是樂趣。
2. CJS 和 ESM 相互兼容？
現代的 js 中，主要存在 CommonJS（CJS） 與 ECMAScript Module（ESM） 兩種模塊系統。
在 ESM 中，可以通過某些手段加載 CJS 模塊進行使用。但 CJS 中無法使用 require 加載 ESM 模塊。
官方文檔給到的解釋: "require 是同步加載，ESM 模塊是異步加載執行的。"
但社區大神 joyeecheung 提供了一個 PR，來解決這個問題。
下面是執行示例（需要使用 node-nightly 版本執行）
非常 Cool ！👍🏻
🔧開源工具&技術資訊
3. superjson - 複雜的JS對象序列化
序列化複雜的 JS 對象，支持 undefined, BigInt, Date, RegExp 等類型的序列化和反序列化
import superjson from 'superjson'
const jsonString = superjson.stringify({ date: new Date(0) })
console.log(jsonString)
// {"json":{"date":"1970-01-01T00:00:00.000Z"},"meta":{"values":{"date":["Date"]}}}
還有另一個類似的庫 JavaScript Stringify ！支持函數的序列化，最大程度的保留原參數類型。
import { stringify } from 'javascript-stringify'
const jsonString = stringify({
date: new Date(0),
sayHelloArrowFn: () => {
console.log('say hello2')
}
})
console.log(jsonString)
// {date:new Date(0),sayHelloArrowFn:()=> {
// console.log('say hello2');
// }}
// 可以通過 eval 執行創建新的對象
const newObj = eval(`(${jsonString})`)
兩者都有適合各自的使用場景，前者適合 clone 場景，後者適合複雜配置的傳遞。
4. play-button - 播放音視頻的按鈕
一個 Web Component 組件，支持通過按鈕播放音視頻，支持全屏播放。
下面是使用代碼。
<script type="module" src="https://www.unpkg.com/@daviddarnes/[email protected]/play-button.js"></script>
<play-button>
<audio controls src="https://darn.es/sounds/daviddarnes.m4a"></audio>
<button>Play</button>
</play-button>
點擊按鈕即可直接控制播放/暫停音樂。
📚 教程&文章
5. Docker 快速入門
一小時快速入門。
6. 使用樣式查詢增強 CSS 變量能力
下面的樣式規則僅在將 --my-var 自定義變量設置爲 123 值時才適用
@container style(--my-var: 123) {
section > .do_stuff > [here] {
color: yellow;
background: maroon;
}
}
比如對於移動端的判斷和樣式影響
:root {
--is-mobile: false;
@media (max-width: 500px) {
--is-mobile: true;
}
}
aside.sidebar {
font-size: 1.5rem;
line-height: 1.5;
font-weight: 600;
}
@container style(--is-mobile: true) {
aside.sidebar {
font-size: 1.1rem;
line-height: 1.25;
font-weight: 500;
}
}
代碼是不是又更加簡單了！
7. 你需要了解的現代 CSS 特性 - 2024 春季版
① 容器查詢 @container ② :has() 僞選擇器 ③ 嵌套CSS ④ 滾動驅動動畫 ⑤ 錨定(Anchor)定位
⑥ 限定作用域的 CSS @scope ⑦ @layer 級聯層語法
emm，文章列舉了不少，每個都有詳細的例子。讀者瞭解爲主，大規模用於生產估計還有很長一段時間（兼容性問題）。
😛趣圖
太形象了，💩山一堆代碼判斷response.data.code===0
篇幅有限，如果你還沒看夠，可移步後面的推薦渠道，繼續遊覽，歷史週刊（<20）移步博客
⭐️強力推薦關注
- 阮一峯: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五發佈
- 雲謙：MDH 前端週刊 - 前端資訊和分享
- 童歐巴：前端食堂 - 你的前端食堂，喫好每一頓飯
- 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
- 值得一讀技術博客 - 每天進步一點點，每天分享有料的技術文章！
- FRE123 技術週刊精選 - 前後端技術週刊精選推薦信息流