[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，用來跟 UIMangaer 與 Compositor 溝通，這裡的 message 使用 postMessage 來跟其他元件溝通

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

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

小結

改太多，文件要重寫實在挺討厭的（扭

開發環境

全新的 DOM 操作

全新 Engine 核心

小結

You might also like...