[Famo.us] Surface 與 Modifier 核心模組

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github

Surface 與 Modifier 是最常使用的模組，先前有提過，這次稍微詳細介紹一下。

Surface 核心模組

這個模組預設會產生一組 <div> 的 DOM 元素，然後再進行操作。初始化的參數可以有，

• size 是個陣列 [width, height] 單位是 px，必須要是數字
• classes 也是陣列，這裡的內容會是 <div> 元素的 class 屬性值
• properties 必須是一個 Object，內容是 CSS 設定值
• content 內容是 HTML 字串

可改變的設定

• elementType 預設是 div，你也可以用 span 他就會建立一個 <span> 的 DOM 元素
• elementClass 預設是 famous-surface，你也可以改掉

模組方法

• on, removeListener, emit, pipe, unpipe 與 EventHandler 有關，主要就是用於監聽事件，或是將自身事件傳遞給指定模組
• setProperties, getProperties 設定與取出 properties 內容
• addClass, removeClass 設定與移除單一 class
• setClasses, getClassList 設定多組 class 與取得目前 classes 列表
• setContent, getContent 設定與取得 content 內容
• setOptions 改變 options 初始值
• getSize, setSize 設定與取得 size

Modifier 核心

之前有提過 Modifier 的一些使用說明，不過最近一次官方更新，有些東西被棄用了（至於要怎麼取代，或是用什麼取代，就沒有特別提及。

<div class="famous-surface" style="/* Modifier 會在這裡發生 */"></div>

其他的就不再贅述，先來看看可以使用的屬性與方法，

• transform CSS3 變形設定，必須傳入 Transform 物件
• opacity 透明度，數字，範圍由 0 ~ 1
• origin 對齊，詳情請看之前的介紹
• size 尺寸，詳情請看之前的介紹

方法

• transformFrom 設定變形
• opacityFrom 設定透明度
• originFrom 設定對齊定位
• sizeFrom 設定尺寸

以下方法將來會棄用

• setTransform
• setOpacity
• setOrigin
• setSize
• halt
• getTransform
• getFinalTransform
• getOpacity
• getOrigin
• getSize

棄用超多的（雖然目前還可用，不過如果有用到，得改掉才行。基本上，在 Modifier 原始碼當中，對於棄用這些方法，都有給建議的替代方式，不過大多都是說，

叫你去原先設定 Transform 的物件去拿

我不知道這樣是好是壞，對於 Modifier 來說，他不用扛那麼多東西在身上或許是好，不過對於開發者來說，還得多準備一個地方來放對應的 Transform 或是 TransitionableTransform 其實也挺傷腦筋的。