柚子快報邀請碼778899分享：前端交互基礎(chǔ)設(shè)施的建設(shè)

http://yzkb.51969.com/

Vue、React 等現(xiàn)代前端框架很好地解決了組件化和數(shù)據(jù)視圖解耦問題。而對前端來說，新交互永遠是花費時間最多的工作，新交互也是前端團隊的自然價值和核心競爭力之一。

在這次話題中，會分享在交互的基礎(chǔ)設(shè)施的建設(shè)上的一些思考和實踐，包括圖形圖像基礎(chǔ)、事件機制與視圖層架構(gòu)模式、交互管理框架等內(nèi)容。

首先我們要了解一下歷史。在 70 年代，大概是 70 年代的尾巴，1979 年左右，有了特別有名的，MVC 架構(gòu)。

MVC 之后，經(jīng)過了差不多十幾年的發(fā)展，到了 90 年代，準確地說應(yīng)該是 95 年左右的時候，這個有一個公司的 CTO，叫 Mike，Mike 在 MVC 的基礎(chǔ)上，提出來了 MVP。

到了 2005 年，2005 年微軟的一個架構(gòu)師，做 WPF 的，提出了 MVVM 模式。

2014 年左右的時候，出現(xiàn)了 FLUX，這個是 Facebook 為了它的 JSX 和 React 提出的一種模式。

后來隔了短短的一年，2015 年，同樣是在 React 社區(qū)，出現(xiàn)了 REDUX。

對于前端來說，我們?yōu)橛脩魟?chuàng)造價值才是特別回答的一個問題，這么多年過去了，前端到底為用戶創(chuàng)造了什么價值呢？

這是 70 年代，施樂公司做的一個軟件管理的流程圖軟件，那個時代，整個的界面就是這個樣子，施樂已經(jīng)算比較先進的了。

再到 90 年代，當時這個畫面還是很驚艷，按鈕鍵是立體的?，F(xiàn)在來看這個東西就有不那么美觀了。

2006 年左右的時候，Vista 的界面已經(jīng)開始有了一個非常大的變化了，這時已經(jīng)是設(shè)計師在主導(dǎo)這個界面的了，但是性能并不佳。

再之后，手機出現(xiàn)了，比如 iPhone 的界面，這時不但交互模式發(fā)生了巨大的改變，而且屏幕也變了，甚至我們熟悉的鼠標不見了，變成了觸屏。雖然兩者之間操作上有一定的相似，但是變化還是非常的。

視圖的職責(zé)也在演變，70 年代，視圖的職責(zé)是：任何一個視圖，永遠不應(yīng)該知道用戶的輸入。

我們這個時代的視圖則既負責(zé)輸入，也負責(zé)輸出，并且與 Model 之間有一個交互。

計算機的功能也在演變。70 年代，計算機主要用來計算。

我們今天計算機主要用來上網(wǎng)，基本上，大家的計算機都是 24 小時聯(lián)網(wǎng)的，你的手機也是 24 小時聯(lián)網(wǎng)的，所以計算機的職責(zé)在發(fā)生變化。

這個變化對于 UI 有很大的影響，1970 年的那個 MVC 那篇論文里的圖，model 很大，view 很小，而到了 2018 年，今天我們很多的 model，都是放在服務(wù)端的，而今天 model 的大小已經(jīng)不是說一臺機器上能去存的，你存在本地的只是視圖展現(xiàn)一點點的 model，這個是很小的一部分的東西。而同時 view 卻越來越重要了。

我們來看一下視圖的技術(shù)。

從最底層的有很多人是做顯卡和 drivers，有這樣的大佬人才。

還有現(xiàn)在非常流行的 OpenGL 等的 GL 層，做這一層的人非常專業(yè)，基本上都集中在各種大公司，最近蘋果和安卓還競爭，推出了新一代的這個 GL 架構(gòu)。

還有一個這個 Draw 層，這一層的內(nèi)容非常多，基本上就爆發(fā)了，skia 是安卓的底層繪制系統(tǒng)，graphics.h 是最早的 C 語言帶的一個圖形庫，基本上相當于一個基礎(chǔ)庫，還有很多 3D 引擎。

UI Framework 這一層，它提供了一套基本的 UI 結(jié)構(gòu)，有了繪制層， 一般人都不會在繪制層直接去工作，需要有些控件，這層有我們比較熟悉的 Dom。GJI 是 Windows 的圖形系統(tǒng)，WPF 也是 Windows 的圖形系統(tǒng)。

最上面其實會有一些 DSL，這是描述圖形的語言，WPF 對應(yīng)的就是 XAML，JSX 對應(yīng)的是 React，HTML 大家都知道了，想說這個視圖技術(shù)變得越來越復(fù)雜，

那么我們的主戰(zhàn)場是怎么樣的，我們可以看一下淘寶終端技術(shù)在各層上的分布狀況。

交互體系其實是這里面的一部分，但它不是這里面的全部，我覺得我們要講這個交互呢，我們還是要做一下抽象的，我們要認識到，交互的本質(zhì)是什么。

交互的本質(zhì)是什么呢，我畫了一個手和一個眼睛，其實無非是操作和看。

操作最常見的一個抽象的模式就是事件。這個比如說這個 touch-screen 事件，陀螺儀事件，或者是時鐘芯片觸發(fā)的持續(xù)事件，這些作為輸入。

輸出一定是通過屬性的形式體現(xiàn)的，在任何一個現(xiàn)在的 UI 框架下，都是通過屬性的方式反映出來的。transform 是變形，opacity 是透明度，color 是顏色，這就是一個比較完整的抽象了。你在任意的輸入和輸出連成一條線后，它都會產(chǎn)生一種效果。

不過直接把陀螺儀得到的參數(shù)輸入到 transform 里肯定是不行的，它需要有個關(guān)系，我們在這里面選擇了 Expression。我們可以用 JavaScript 去做計算。我覺得這是一個完備的抽象。

不過這里還有一個坑是需要邁過去的，對計算機理解的輸入跟人類理解的輸入有非常大的偏差，對計算機來說呢，有多少種硬件，就有多少種輸入。

我們發(fā)現(xiàn)輸入非常復(fù)雜，在做基礎(chǔ)設(shè)施建設(shè)的時候，我們在輸入上面其實投入了很大的精力，最后出來的是一個更接近于人腦概念的一系列的輸入。

比如說，touch 和 gesture，我們知道觸屏其實是觸屏事件，觸屏事件其實非常簡單，只有四個，touch start，touch move，touch end，touch cancel 則不太常用。

比如我想摁或者點一個東西，它都是是 touch start，touch move，touch end，如果你要監(jiān)聽這些事件，中間的判斷很繁瑣，作為交互的基礎(chǔ)設(shè)施，我們不可能提供這些給我們的前端工程師使用，我們肯定做一些操作。

比如手指移動 10px，我們就認為這個 touch start 到了 pan start，這個后面就是 pan move，pan end 這樣，

手指很快離開，那么它就會產(chǎn)生一個 tap 事件。

如果超過 1.5 秒那就一個 press start，如果手指沒移呢，就會產(chǎn)生一個 press end，如果手指移了，它還會產(chǎn)生一個 pan start。所以 gesture 已經(jīng)比 touch 復(fù)雜了很多了。

scroll 就在 gesture 的基礎(chǔ)上又復(fù)雜了一層，它不但手指在屏幕的時候響應(yīng)，手指離開屏幕的時候它也響應(yīng)，比如說輪播，它是一個變形的輪播，它在輪播的過程中，不但產(chǎn)生位移，還會產(chǎn)生大小的變化，這就讓用戶更舒服一些。

還有一個滾動導(dǎo)航，一邊滾動出來一個導(dǎo)航，近年來還有一個交互設(shè)計，不是滾動到某個位置導(dǎo)航出來，而是一直再往下滾動的時候它不出來，突然往上滾動一下，導(dǎo)航就出來。這個部分還有更難的設(shè)計交互，所以我們還需要在 scroll 的基礎(chǔ)上再做一層。

我們再來看陀螺儀，它只提供了三個分量，并且它是 0 到 360 度，所以如果不經(jīng)過任何處理，前端工程師基本上是沒有辦法用的，比如在某個角度，它可能會突然從 0 跳變成 360 度，這個在數(shù)據(jù)計算時候非?？膳?。

所以我們建立這樣一個模型，我們把手機看作這樣一個立方體，去計算在空間中對立方體產(chǎn)生的旋轉(zhuǎn)效果，我們拿著立方體上面的一個點呢，去做我們定位的一個依據(jù)。

因為我們在用 Weex，所以有一個 Native 跟 JS 通訊的問題，比如說從 gesture 事件到 gesture handler，這一步就會到 JS 去執(zhí)行，圖中我們可以看到這個線，跨過中間 JS 和 Native 的分界線，跨越地非常頻繁。

假如一個 Touch move 事件或者 Pan move 事件，你手指每移動一小點它都會觸發(fā)一次 JS 跟 Native 的一個跨語言通訊，所以說整個的性能會非常差，最后基本上會有 5 毫秒到 10 毫秒左右的一個延遲，有 60 幀的話，每一秒鐘有 300 毫秒被占掉了，幀率就下去了。

這就是我們最初開始做 Binding 模式的原因。我們的 Binding 模式，expression 傳遞一次給 Native，然后它會去做大量的綁定，所有的過程都是由 Native 來完成的，Native 做完了以后，還需要再更新一下 VDOM，所以這操作就完全由 Native 完成，通訊次數(shù)就降下來了。除此之外，我們還額外收獲了性能上的收益。

我們的結(jié)論，其實淘寶一個交互體系是這樣的，是以 Binding 為核心，下面的平臺支持了 weex，Web，React Native。DSL 上面，我們支持了 View 和 Rax 兩種，在上面，是由我們自己建的 Components 體系。

最后，還有一個展望，我們用繪制層相結(jié)合，會有更多的想象空間，我們通過各種各樣的輸入、手勢、時間、陀螺儀，我們其實可以去控制矢量圖，也可以去控制繪制，這些都是前端未來的想象空間。

??

本文深入探討了前端交互基礎(chǔ)設(shè)施的建設(shè)，重點關(guān)注了構(gòu)建可靠的交互基礎(chǔ)設(shè)施的關(guān)鍵技術(shù)和方法。作者首先回顧了MVC、MVP、MVVM、FLUX和REDUX等模式的發(fā)展歷程，強調(diào)了交互基礎(chǔ)設(shè)施在前端開發(fā)中的重要性。文章還詳細介紹了交互的本質(zhì)，包括操作和觀察，以及交互的抽象模式和復(fù)雜性。此外，還介紹了觸屏事件、手勢、滾動導(dǎo)航和陀螺儀等交互技術(shù)的處理方法。作者還分享了淘寶終端技術(shù)在各層上的分布狀況，以及交互體系以Binding為核心的架構(gòu)?？偟膩碚f，本文通過深入的技術(shù)討論和案例分享，為前端開發(fā)者提供了有益的交互基礎(chǔ)設(shè)施建設(shè)思路和實踐經(jīng)驗。?

柚子快報邀請碼778899分享：前端交互基礎(chǔ)設(shè)施的建設(shè)

http://yzkb.51969.com/

好文推薦