/ Famo.us

[Famous] New Engine 介紹

Famous 更新之後,完全是一種爹不親娘不認的狀態!除了整個 Github 的專案直接捨棄之外,結構上也完全重新來過一次。看著我之前大費周章寫在 Github issue 上面的那些文章,不免有些難過(淚

這一切都是幻覺,嚇不倒我的!


開發環境

全新的結構跟之前落差太大,所以只好重新介紹一遍。這次 Famous 在開發工具上,直接做了一個 CLI 工具,讓你可以直接使用命令列,來建立你的 Famous 專案。

詳情請見:http://famous.org/get-started.html

這次其實還算佛心,只是,捨棄之前的架構真的會讓人很痛就是了(有點像是 ng 1.x 變成 ng 2.x 的那種感覺。

全新的 DOM 操作

以往都是模組底下自己帶了 DOM 的操作方式,現在,全部交給同一個模組去執行。

dom-renderables

所以,現在想要什麼樣的 DOM 元件,就自己去建立就好,例如,

/* 建立一個 node 到 Engine 的場景中 */
/* 預設的場景是直接綁定到 <body> 元件上面 */
/* 我們這裡是綁定到一個 ID 選擇器 playground 上面 */
var surface = FamousEngine.createScene('#playground').addChild();

/* 在場景中,將這個 node 轉變成 DIV 的 DOM 元件 */
new DOMElement(surface, { tagName: 'div' });

就這樣,他就是幫你做一個 DOM 元件而已,最後的結果會像是這樣,

<div id="playground">
  <div class="famous-dom-renderer">
    <div class="famous-dom-element" data-fa-path="#playground/0" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); width: 983px; height: 0px; display: block; opacity: 1; background-color: rgba(0, 0, 0, 0.498039);">
    </div>
  </div>
</div>

然後,有了 surface 這個元件,我們就能對他做更多事情。這個 DOM 元件,會使用到 Node 的核心模組,所以設定這個 DOM 元件的所有特性,都直接由 Node 來處理,舉例來說,

surface
  /* 設定三軸的尺寸模式 */
  .setSizeMode('absolute', 'absolute', 'absolute')
  /* 設定對齊方式 */
  .setAlign(0.5, 0.5)
  /* 設定 Transform Origin 起始點 */
  .setOrigin(0.5, 0.5);

Node 跟之前舊有的 Node 雖然名字一樣,但是很多方法有改,所以也不能完全沿用。主要是老爸改成 DOMElement 之後,寫法就不同了。

全新 Engine 核心

基本上 Engine 就是整個翻盤了(看完 Source code 我都翻桌了

  • 使用 Scene 來容納所有的 Node
  • 有一個 Clock,用於儲存動畫的 Tick(其實就是放 rAF 的呼叫
  • 新增了 Channel,用來跟 UIMangaerCompositor 溝通,這裡的 message 使用 postMessage 來跟其他元件溝通

其實裡面有一個 Queue,不過是私有變數,所以外部並看不到這個東西。主要是跟之前一樣,用來儲存每個 Tick,不過還是可以透過 requestUpdaterequestUpdateNextTick 來更動他。

新的引擎做的事情比以往的少得多,只是用於建立 Scene,然後把 Node 放進去而已。其他的效果,就是用於元件之間的溝通,然後持續更新畫面這樣。裡面也有兩個方法,是用於 StartEngineStopEngine 用,不過,我想不到有什麼情況會使用到就是了。

小結

改太多,文件要重寫實在挺討厭的(扭