這些都能成為 Web 語法規範,強迫症看不下去了

語言: CN / TW / HK

theme: cyanosis highlight: a11y-dark


JavaScript 一直是飽受詬病,源於網景公司在 1995 年用了 10 天的時間創造。沒有什麼能用 10 天創造就是完美的,可是某些特性一旦釋出,錯誤或不完善的地方迅速成為必不可少的特色,並且是幾乎不可能改變。

Javascript 的發展非常快,根本沒有時間調整設計。在推出一年半之後,國際標準就問世了。設計缺陷還沒有充分暴露就成了標準。

歷史遺留

比如常見的歷史設計缺陷:

  • nullundefined 兩者非常容易混淆
  • == 型別轉換的問題
  • var 宣告建立全域性變數
  • 自動插入行尾分號
  • 加號可以表示數字之和,也可以表示字元的連線
  • NaN 奇怪的特性
  • 更多...

Javascript 很多不嚴謹的特性我們可以新增 eslint 來規避。比如禁用 var== 成了大多數人寫程式碼的必備條件。

現在/未來

如今 CSS、DOM、HTML 規範由 W3C 來制定,JavaScript 規範由 TC39 制定。那些歷史缺陷也成為了過去,但是現在也出現了一些不盡人意的規範。

CSS 變數

宣告變數的時候,變數名前面要加兩根連詞線 --

css body { --foo: #7f583f; --bar: #f7efd2; }

var() 函式用於讀取變數。

css a { color: var(--foo); text-decoration-color: var(--bar, #7f583f); }

為什麼選擇兩根連詞線(--)表示變數?因為 $Sass 用掉,@Less 用掉。_-,用作為 IEchrome 相容寫法。CSS 中已經找不出來字元可以代替變數聲明瞭。為了不產生衝突,官方的 CSS 變數就改用兩根連詞線。

作為一個官方的標準規範,時刻影響後面的行業發展。竟然能被第三方的外掛所左右,令人大跌眼鏡。有開發者吐槽:微軟的架構師也是夠窩囊。

現在很多應用都放棄了 Sassless,轉向了 PostCSS 的懷抱。面向元件程式設計,根本用不到 Sassless 裡面的一些複雜功能。那麼 -- 兩個字元的繁瑣將成為開發者永遠的痛。

類私有屬性(proposal-class-fields)

JavaScript 中的 class 大家已經不陌生了,簡直跟 Javaclass 一模一樣。

基本用法:

```js class BaseClass { msg = 'hello world';

basePublicMethod() { return this.msg; } } ```

繼承:

js class SubClass extends BaseClass { subPublicMethod() { return super.basePublicMethod(); } }

靜態屬性:

js class ClassWithStaticField { static baseStaticMethod() { return 'base static method output'; } }

非同步方法

js class ClassWithFancyMethods { *generatorMethod() {} async asyncMethod() {} async *asyncGeneratorMethod() {} }

而類私有屬性的提案目前已經進入標準,它用了 # 關鍵字字首來修飾一個類的屬性。

```js class ClassWithPrivateField { #privateField;

constructor() { this.#privateField = 42; } } ```

你沒看錯,不是 typescript 中的 private 關鍵字。

```tsx class BaseClass { readonly msg = 'hello world';

private basePrivateMethod() { return this.msg; } } ```

然而 # 的語法醜陋本身引起了社群的爭議:

「class fields 提案提供了一個極具爭議的私有欄位訪問語法——併成功地做對了唯一一件事情,讓社群把全部的爭議焦點放在了這個語法上」。

TS 投降主義已經被迫實現了。

No dynamic access, no destructuring is a deal breaker for me

我們製作一個 eslint 外掛 no-private-class-fields 並使用下載計數來說明社群反對

'#' 作為名稱的一部分會導致混淆,因為 this.#x !== this['#x'] 太奇怪了

前端架構師、TC39 成員賀師俊也在知乎連發好幾篇文章吐槽 class fields

不妨大家看看關於 private 的 side: https://johnhax.net/2017/js-private/slide?qcon#0

提案地址:https://github.com/tc39/proposal-class-fields

globalThis

在不同的 JavaScript 環境中拿到全域性物件是需要不同的語句的。在 Web 中,可以通過 windowself 取到全域性物件,但是在 Web Workers 中只有 self 可以。在 Node.js 中,必須使用 global。非嚴格模式下,可以在函式中返回 this 來獲取全域性物件,否則會返回 undefined

因此一個叫 global 的提案出現。主要用 global 變數統一上面的行為,但後面繞來繞去改成了 globalThis,引起了激烈討論。

globalThis 這個名字會讓 this 變得更加複雜。

  1. this 一直是困擾程式設計師的話題,尤其是 JavaScript 新手,關於它的部落格文章源源不斷
  2. ES6 讓事情變得更簡單,因為可以告訴人們更喜歡箭頭函式並且只使用 this 內部方法定義
  3. 在現代 JS(modules) 中,並沒有真正的全域性 this,所以 globalThis 甚至不引用現有的概念

現在說這一切都是徒勞的,因為它已經進入 stage 4

提案地址:https://github.com/tc39/proposal-global

總結

JavaScript 中遺留的糟粕太多。現在受到這些糟粕的影響,很多新的提案又不得不妥協。在未來,它會變得極其複雜。

也許某一天,會出現一個沒有歷史包袱的 JavaScript 子集來替換它。

今年輸出的文章

最近兩個月才開始寫,希望能幫到大家,或者也可以加群一起學習進步。