從#SmooshGate之亂看Don’t Break the Web

由於各瀏覽器支援性的考量,目前簡訊或NAS相關的專案都還沒升級到太新的JavaScript版本,不過我們還是來關注一下最近推出的ES10規格。

JavaScript 今年推出的 ES2019 中多了一項 Array.prototype.flat() 的方法,功能是將多維的物件攤平至指定深度,預設值是攤至一維,以下圖為例:

JavaScript ES2019 Array.prototype.flat()

相同的提案中另一個功能是 Array.prototype.flatMap,基本上和 Array.prototype.map 做的事情差不多,只差在 flatMap 會將結果攤平至一個新的陣列。

JavaScript ES2019 Array.prototype.flat()

 

在這項功能的定案背後有著一連串的有趣爭議過程,在推特上甚至有專屬標籤稱其為 #SmooshGate。

這起事件發生在去年,原本 flat() 這個方法被命名為 Array.prototype.flatten,然而在草案階段時有人發現這個方法名稱將會和一個叫做 MooTools 的 Framework 中提供的方法衝突。時至今日相較於 MooTools 這個名稱,大家更常聽到的是 jQuery---無論如何它是個曾經相當受歡迎的工具,仍是個現存網站中被廣泛使用的框架,因此若採用 flatten 的命名,不可避免地將有許多網站被影響。提案人當時半開玩笑地提議以 smoosh  取代 flatten 以迴避兼容性的問題,而有些人誤以為這是已定案的內容,結果這個玩笑出乎意料地在網路上熱烈地延燒了起來,有人贊成改名成 smoosh、有人提議可以改成 squash、也有覺得不該改名,應該就直接讓這些老舊、過時的網站壞掉。

 

MooTools 在他們的工具中自定義了屬於他們自己的 Array.prototype.flatten,若僅僅只是如此還沒有問題,MooTools 版本的 flatten 會 override 官方版本的 flatten,因此使用了 MooTools 框架的網頁裡應能正常運作;然而不幸的是,MooTools 中將自定義的 Array 方法複製到一個 MooTools-specific API,Elements.prototype 中;也就是說,若 ES2019 中採用 flatten 的方案,只要和 Elements.prototype.flatten 有依賴關係的任何程式碼都會壞掉。即使 MooTools 官方發布更新版本的框架,在這些老舊網站沒同步升級的狀況下仍舊無法避免大量的故障結果。

 

這起事件衍伸出來的討論議題是「為何我們不就直接淘汰掉這些網頁?」,事實上,HTML、CSS、JavaScript (以及其他在網路上廣泛使用的技術)的最高設計準則就是"Don’t Break the Web",拜此準則之賜,我們可以看到這個 1996 年建立的這個網站 the Space Jam 在過了 22 年之後仍能夠正常運作。若任由更新的標準影響到這些原本正常的網站,影響到的並不是這些設計不周全的框架,而會是廣大的使用者,以及瀏覽器營運商支援這些功能的意願。然而,這並不代表不良的設計就永遠沒辦法從 Web 平台移除或更改,網頁超文字應用技術工作小組(Web Hypertext Application Technology Working Group,WHATWG)的文件中有標明移除這些不良設計的標準流程。單要辨明某項功能是否有可能移除就是件十分耗工的過程,但若確認此項功能是不安全、使用率極為稀少,也是能夠從現行標準中移除這項功能,例如 <applet>、<keygen>、showModalDialog()  都是成功刪除的例子。

 

TC39 是負責制定 JavaScript ECMAScript Standard 的委員會,雖然一個小玩笑意外地成為激烈筆戰的導火線,但在制定相關標準的流程上其實是相當嚴謹的,更詳細可參照官方的流程說明文件:ECMAScript 的標準制定可分成 0~4 五階段,以這次 #SmooshGate 事件為例,是在去年第三階段時被發現 flatten 將會引發的問題,經過兩個月的大混戰之後在五月修正為 flat 方法,直到今年才正式進入第四階段發表 ES2019。

 

在Google Developers網站中有篇專欄文章詳細地描述了這場 #SmooshGate之亂的始末,有興趣進一步了解更多細節的讀者不妨可參考看看。

Reference

https://developers.google.com/web/updates/2018/03/smooshgate

https://tc39.es/process-document/

https://mootools.net/core/docs/1.5.2/Types/Array

https://blog.techbridge.cc/2019/11/30/smooshgate-and-keygen/

https://medium.com/@selvaganesh93/javascript-whats-new-in-ecmascript-2019-es2019-es10-35210c6e7f4b

https://bugzilla.mozilla.org/show_bug.cgi?id=1443630

http://www.jqueryvsmootools.com/index_cn.html

https://github.com/tc39/proposal-flatMap/pull/56

Comments

No comments yet. Why don’t you start the discussion?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料