/ Famo.us

[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, unpipeEventHandler 有關,主要就是用於監聽事件,或是將自身事件傳遞給指定模組
  • 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 其實也挺傷腦筋的。