歡迎來到第 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 技術週刊精選 - 前後端技術週刊精選推薦信息流