JavaScript 一直是飽受詬病,源于網景公司在 1995 年用了 10 天的時間創造。沒有什么能用 10 天創造就是完美的,可是某些特性一旦發布,錯誤或不完善的地方迅速成為必不可少的特色,并且是幾乎不可能改變。
Javascript 的發展非常快,根本沒有時間調整設計。在推出一年半之后,國際標準就問世了。設計缺陷還沒有充分暴露就成了標準。
歷史遺留
比如常見的歷史設計缺陷:
- null 和 undefined 兩者非常容易混淆
- == 類型轉換的問題
- var 聲明創建全局變量
- 自動插入行尾分號
- 加號可以表示數字之和,也可以表示字符的連接
- NaN 奇怪的特性
- 更多...
Javascript 很多不嚴謹的特性我們可以添加 eslint 來規避。比如禁用 var 和 == 成了大多數人寫代碼的必備條件。
現在/未來
如今 CSS、DOM、HTML 規范由 W3C 來制定,JavaScript 規范由 TC39 制定。那些歷史缺陷也成為了過去,但是現在也出現了一些不盡人意的規范。
CSS 變量
聲明變量的時候,變量名前面要加兩根連詞線 --
- body {
- --foo: #7f583f;
- --bar: #f7efd2;
- }
var() 函數用于讀取變量。
- a {
- color: var(--foo);
- text-decoration-color: var(--bar, #7f583f);
- }
為什么選擇兩根連詞線(--)表示變量?因為 $ 被 Sass 用掉,@ 被 Less 用掉。_ 、-,用作為 IE 、chrome 兼容寫法。CSS 中已經找不出來字符可以代替變量聲明了。為了不產生沖突,官方的 CSS 變量就改用兩根連詞線。
作為一個官方的標準規范,時刻影響后面的行業發展。竟然能被第三方的插件所左右,令人大跌眼鏡。有開發者吐槽:微軟的架構師也是夠窩囊。
現在很多應用都放棄了 Sass 和 less,轉向了 PostCSS 的懷抱。面向組件編程,根本用不到 Sass 和 less 里面的一些復雜功能。那么 -- 兩個字符的繁瑣將成為開發者永遠的痛。
類私有屬性(proposal-class-fields)
JavaScript 中的 class 大家已經不陌生了,簡直跟 Java 的 class 一模一樣。
基本用法:
- class BaseClass {
- msg = 'hello world';
- basePublicMethod() {
- returnthis.msg;
- }
- }
繼承:
- class SubClass extends BaseClass {
- subPublicMethod() {
- returnsuper.basePublicMethod();
- }
- }
靜態屬性:
- class ClassWithStaticField {
- static baseStaticMethod() {
- return'base static method output';
- }
- }
異步方法
- class ClassWithFancyMethods {
- *generatorMethod() {}
- async asyncMethod() {}
- async *asyncGeneratorMethod() {}
- }
而類私有屬性的提案目前已經進入標準,它用了 # 關鍵字前綴來修飾一個類的屬性。
- class ClassWithPrivateField {
- #privateField;
- constructor() {
- this.#privateField = 42;
- }
- }
你沒看錯,不是 typescript 中的 private 關鍵字。
- 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 中,可以通過 window、self 取到全局對象,但是在 Web Workers 中只有 self 可以。在 Node.js 中,必須使用 global。非嚴格模式下,可以在函數中返回 this 來獲取全局對象,否則會返回 undefined
因此一個叫 global 的提案出現。主要用 global 變量統一上面的行為,但后面繞來繞去改成了 globalThis,引起了激烈討論。
globalThis 這個名字會讓 this 變得更加復雜。
- this 一直是困擾程序員的話題,尤其是 JavaScript 新手,關于它的博客文章源源不斷
- ES6 讓事情變得更簡單,因為可以告訴人們更喜歡箭頭函數并且只使用 this 內部方法定義
- 在現代 JS(modules) 中,并沒有真正的全局 this,所以 globalThis 甚至不引用現有的概念
現在說這一切都是徒勞的,因為它已經進入 stage 4
提案地址:https://github.com/tc39/proposal-global
總結
JavaScript 中遺留的糟粕太多。現在受到這些糟粕的影響,很多新的提案又不得不妥協。在未來,它會變得極其復雜。
也許某一天,會出現一個沒有歷史包袱的 JavaScript 子集來替換它。
原文鏈接:https://mp.weixin.qq.com/s/PeiAfSj-p6Ck8D2OffysYg