前端週報專注大前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點，分爲新聞熱點、深度閱讀、開源項目 & 工具等欄目。歡迎關注【前端之巔】微信公衆號（ID: frontshow），及時獲取前端週報內容。
新聞熱點
前端新聞
Vue 3.0 代碼倉庫公開
Vue 3.0 完全由 TypeScript 編寫，目前還處於 alpha 階段，倉庫地址：
https://github.com/vuejs/vue-next
Vue 3 計劃於 2020 年第一季度發佈，Vue 3 將更小、更快、更易於維護。其重要變化之一是，受 React Hooks 的啓發，新的 API 將允許使用基於函數的方式編寫組件。用戶可以將邏輯封裝到“組合函數”中，並在組件之間重用該邏輯。新的API與當前語法100％兼容，並且不會在短期內被棄用。
NPM 發佈 6.12.0
現在，npm ci 針對 git 依賴關係運行準備腳本，修復 --no-optional 參數。engine 不匹配將再次顯示的警告。
Firefox Preview Nightly 在 Android 和 Pixel 2 中 啓用了 WebRender
Mozilla 的 WebRender 技術首次進入 Android。對於Google Pixel 2 上的 Firefox Preview（Fenix）用戶，最近在默認情況下啓用了 WebRender。
WebRender 與 Firefox 57 中引入的 Stylo CSS 引擎一樣，也來自 Mozilla 的下一代引擎 Servo，並以 Rust 編程語言編寫。WebRender 是網頁內容的渲染器，其工作方式更像遊戲引擎，但針對網頁內容渲染進行了優化，因此具有巨大的性能優勢。
行業新聞
消息稱 TeamViewer 系統後臺被黑客組織 APT41 攻破
10 月 11 日，網上流傳疑似深圳市網絡與信息安全信息通報中心發出緊急通告，指出目前知名遠程辦公工具 TeamViewer 已經被境外黑客組織 APT41 攻破，提醒企業組織做好防護措施。
通報中心建議各單位採取以下主動防禦措施：
-
近期停止使用 TeamViewer 軟件。
-
在防火牆中禁止用於 TeamViewer 遠程通訊端口 5938。
-
通過 Web 應用防火牆或其它設備禁止單位內主機回連 teamviewer.com 域名。
使用人工神經網絡和人工蜂羣優化進行語音識別
印度聖雄甘地特派團工程技術學院和傑比信息技術學院的研究人員開發出一種語音識別系統，研究人員在一系列人類語音音頻片段上測試了他們的系統，並將其與傳統的語音識別技術進行了比較。他們的技術優於其他所有方法，獲得了顯著的準確性得分。
研究人員開發的系統的獨特之處在於使用了 OABC 優化算法來優化 ANN 的層和人工神經元。人工蜂羣（ABC）算法旨在模擬蜜蜂的行爲，以解決各種優化問題。研究人員在論文中寫道：“該方法的靈敏度、特異性和準確性分別爲90.41％、99.66％和99.36％，比所有現有方法都要好。”將來，語音識別系統可用於在各種環境中實現更有效的人機通信。此外，他們用於開發系統的方法可能會啓發其他團隊設計類似的模型。
在恐怖活動發生之前進行預測
數據科學家已經開發了一種預警模型，該模型可以基於前10次攻擊，預測出恐怖組織在未來的致命程度。該模型利用了全球恐怖數據庫（GTD）和 RAND 全球恐怖主義事件數據庫（RDWTI）公開獲得的數據。
深度閱讀
介紹 Sass 的模塊系統
Sass 模塊系統是解決命名衝突的更強大的方案，新增 @use 和 @forward 規則，而 @import 將被 Sass 逐漸放棄。
https://css-tricks.com/introducing-sass-modules/
理解 JavaScript 中的 This, Bind, Call 和 Apply
在本文中，您將瞭解 this 根據上下文的隱式指向，您將學習如何使用 bind，call 和 apply 方法，明確指定的值this。
實用的 css 自定義屬性模式
本文作者一直在使用 CSS Custom Properties 來發現它們的價值，因爲瀏覽器終於支持開發人員在生產中使用它們了。它們是如此有用和強大！
作者將 CSS 變量的用法歸類。當然，開發人員可以隨意使用 CSS 變量，但是在不同類別中考慮它們可能會幫助您理解使用變量的不同方式。
-
變量：基礎知識。例如設置，在color任何需要的地方使用的品牌。
-
默認值：例如，默認值 border-radius 可以在以後覆蓋。
-
層級覆蓋：例如主題樣式覆蓋。
-
範圍規則集：各個元素的有意變化。例如鏈接和按鈕。
-
Mixins：規則集旨在將其價值帶入新的環境。
-
內聯屬性：從HTML中的內聯樣式傳遞的值。
https://css-tricks.com/patterns-for-practical-css-custom-properties-use/
Chrome 78 有哪些更新？
穩定版的 Chrome 78 將在 10 月 22 日發佈，普通用戶幾乎感覺不到變化，但對於開發者而言，會有一些令人興奮的新功能。
CSS 透明度百分比
opacity 屬性當前接受介於0（完全透明）和1（完全不透明）之間的值。Chrome 78 還允許百分比從0％到100％：
/* identical styles */
.style1 { opactity: 0.75; }
.style2 { opacity: 75%; }
JavaScript Optional chaining
Optional chaining 是 ES2019 提議，它將節省您數小時的打字和調試工作。
let country = (user && user.address && user.address.country) || undefined;
// chrome 78
let country = user?.address?.country;
惡意行爲限制
瀏覽器窗口卸載事件 unload、beforeunload 以及類似的 pagehide、visibilitychange 技術上這些事件被用於檢查數據是否被保存，或記錄用戶分析數據。不幸的是，一小部分開發者可以用來添加代碼破壞用戶體驗，從 Chrome 78 開始將不允許：
-
同步的 Ajax 請求 – 可以在 AllowSyncXHRInPageDismissal 策略標誌中覆蓋此請求，但是該標誌還將在版本 82 中刪除。
-
使用 window.open() 創建阻止頁面關閉的彈窗。
短信接收器API
短信文本消息通常用於驗證電話號碼或發送一次性密碼，新的SMS Receiver API允許Web應用程序使用特定的格式約定讀取發送給他們的SMS消息，以避免手動的用戶交互。例如：
if (navigator.sms) {
try {
let { content } = await navigator.sms.receive();
console.log('SMS text:', content);
} catch (e) {
console.log('error', e);
}
}
本機文件系統 API
本機文件系統API允許瀏覽器直接與用戶本地設備上選擇的文件進行交互。它可以用於從客戶端JavaScript編輯照片、視頻或文本文檔，而無需上載和下載過程。
屏幕枚舉API
屏幕枚舉API提供有關連接到用戶設備的所有顯示器的信息。在應用程序可以使用多個監視器的情況下（例如，提供面向公衆的幻燈片和演講者備註顯示的演示文稿），這通常會很有用。
媒體元素 seekto 事件
Chrome 78 引入了一個新的 seekto 動作處理程序，當將播放移至時間軸上的特定點時會調用該處理程序。這可用於進行DOM更改，記錄分析等。
WebSocketStream
WebSocket 消息到達的速度比瀏覽器所能應付的更快。在這種情況下，內存緩衝區可能溢出，或者CPU 使用率將增加到瀏覽器無響應的程度。
WebSocketStream 取代 WebSocket API。它是基於 promise 的，並且集成了流，因此可以在接收到完整消息之前解析大量數據。
更多關於 Chrome 78 的更新
請訪問相關網址查看。
https://developers.google.com/web/updates/2019/09/devtools
工具 & 庫 & 資源
【Pokemon Friends】皮卡丘和妙蛙種子，通過 css(scss) 和 html 實現。
https://codepen.io/acupoftee/pen/YzzzYxj
【Parcel-app】parcel 版的 create-react-app。
https://parcelapp.netlify.com/
【moveable】movable 是可拖動、可調整大小、可縮放、可旋轉、可扭曲、可捏、可分組、可捕捉的。
https://github.com/daybrush/moveable
【interview_internal_reference】2019年阿里、騰訊、百度、美團、頭條等技術面試題目及答案最新總結，專家出題人分析彙總。