Famo.us - HINA::工程幼稚園

[Famous] New Engine 介紹

Famous 更新之後，完全是一種爹不親娘不認的狀態！除了整個 Github 的專案直接捨棄之外，結構上也完全重新來過一次。看著我之前大費周章寫在 Github issue 上面的那些文章，不免有些難過（淚這一切都是幻覺，嚇不倒我的！開發環境全新的結構跟之前落差太大，所以只好重新介紹一遍。這次 Famous 在開發工具上，直接做了一個 CLI 工具，讓你可以直接使用命令列，來建立你的 Famous 專案。詳情請見：http://famous.org/get-started.

[Famo.us] inputs 模組 Part 2

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github 接續著講滑鼠、觸控等其他的模組。 MouseSync 顧名思義，就是跟滑鼠控制相關的同步事件模組，預設值有以下項目， MouseSync.DEFAULT_OPTIONS = { direction: undefined, // 方向 rails: false, // 指定單一方向移動 scale: 1, // 滑鼠軌跡放大倍率 propogate: true // 在文件中加入 mouseleave 事件監聽 }; 常數這兩個常數是給 direction 所使用的，

[Famo.us] inputs 模組 Part 1

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github 在 Famo.us 當中，提供了不少關於輸入（input）的模組，主要是用於接收使用者的操作輸入，諸如滑鼠、捲軸、觸控等等。輸入控制常見的輸入控制，除了滑鼠與觸控外，捲軸與手勢動作也包含在這些模組當中，主要有下列輸入模組可以使用，非輸入模組 Accumulator 累加器，他提供一組累加功能，單純的使用 setter/getter 來加入或是取得你所累加的數字（或是數字陣列 TouchTracker 追蹤觸控輸入，

[Famo.us] SlideShow 模組開發

[UPDATE] Famo.us 官方已捨棄此模組，所以本範例只能在舊有的 Famo.us 上面運行，詳情請看官方 Github 身為農夫，種點菜也是很合理的。 Slideshow 概念是這樣，我們利用左右兩邊的頁面來置換中間的頁面，所以只需要兩段 Transform 來做這個動作。這個東西其實用 Famo.us 幾個模組就能兜出來，只是為了方便起見，所以才把它打包成模組方便使用。 Famo.us 模組由於 Famo.us 是使用 AMD 的方式來載入外部組件，

[Famo.us] Event 核心與模組介紹

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github EventHandler, EventEmitter 這兩項核心很常出現在其他的模組當中，主要是負責事件控制、監聽與觸發，但是他跟 DOM 就沒有關係，單純的是綁在模組或是元件上面。 EventEmitter 核心是 EventHandler 核心所依賴的核心（沒有之一，用於將事件往下擴散（或是將其子元件事件綁定在自己身上。方法 emit(type, event) 觸發一個事件 type，並將該方法傳送到底下所屬的所有子處理程序 on(type, handler)

[Famo.us] Transform 核心模組

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github Transform 是整個 Famo.us 動態效果的核心，預設全部都使用 matrix3d() 來做，有關於 matrix 的部分，可以參考 MDN 的說明。 Transform 核心由於是使用 matrix3d 的關係，所以 Transform 最終輸出的結果，都會是一組 16 個數字的陣列（它是由一組 4x4

[Famo.us] RenderNode 核心說明

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github RenderNode 算是整個 Famo.us 對於元件樹狀結構的核心，他專門用來處理你的元件，在樹狀結構中應該要怎麼長是靠他來處理。 RenderNode 核心這個核心很特殊，你應該也幾乎沒有機會能直接使用他。他的初始化必須要是一個可渲染（renderable）的元件，而這個元件經過初始化後，自身就會轉換成 RenderNode 物件，來提供給 Famo.us 的引擎去做渲染動作。什麼叫做可渲染元件？官方定義的有， core/Group core/

[Famo.us] Scene 核心說明

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github 這個核心模組是用於提供一個已經定義好的結構化場景，定義什麼呢？ Scene 核心說穿了，他等同於一組 Modifier 物件，定義了以下這些事情， translate rotate rotateX rotateY rotateZ rotateAxis scale skew 以上必須要是 Transform 模組的相對應物件。 matrix3d 以上必須要是一個 Function 用以返回 matrix3d 的數組（陣列數組

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

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github Surface 與 Modifier 是最常使用的模組，先前有提過，這次稍微詳細介紹一下。 Surface 核心模組這個模組預設會產生一組 <div> 的 DOM 元素，然後再進行操作。初始化的參數可以有， size 是個陣列 [width, height] 單位是 px，必須要是數字 classes 也是陣列，這裡的內容會是

[Famo.us] Engine, Context 與 ElementAllocator

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github 這三樣東西是組成 Famo.us 引擎的主要功臣，負責 rFA 與 DOM 的溝通橋樑。 Engine 核心在 Famo.us 當中，這個核心做的事情其實並不會太多，大抵上就是這些，設定 rFA 監聽 resize 強迫取消 touchmove 事件（使用 preventDefault() 使用

[Famo.us] ViewSequence 核心說明

標題與內容不符（不解釋 ViewSequence 核心他是用來儲存一個序列化資料的模組，所以雖然字面上是 ViewSequence，但是骨子裡跟 View 沒有關係。初始化方法這個模組初始化可以傳入這幾個數值（使用 Object 的方式傳入， array 傳入一個陣列，這個陣列用來儲存你的物件。 index 定義第一個元素，這個模組用這個元素來當作第一個被 render 的物件 loop 當巡迴過整個陣列之後，決定是否要返回第一個（或最後一個）元素 firstNode 第一個元素 lastNode 最後一個元素這個模組建立後，

[Famo.us] Views 模組說明

Views 模組，但是其實還是有跟 Views 無關的東西，大概有動畫特效的都可以算在這裡。只是有部分比較多功能的東西，放在 widgets 裡面去了。 Views 模組 views/* 的模組，與 core/View 核心部分有些許不同，他並不是都會提供 RenderNode 給你使用，我這裡簡易說明一下底下的模組， views/Deck 提供一個 SequentialLayout 並且讓他有開啟以及關閉的動畫效果。 views/Flipper 提供一個滑動翻頁的動畫效果 views/GridLayout 提供一個

[Famo.us] View 核心說明

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github 見山不是山，大概就是在說這個 View 模組。 View 核心核心模組 core/View 是用於提供一個或是多個 RenderNode 的容器給框架引擎使用，它本身在輸出的時候並不會產生 DOM 實例，所以你在畫面上其實是看不到 View 這個模組的。先解釋一下 RenderNode 這個東西，整個框架系統中，只要是產出與畫面有關的模組，都算是一種 RenderNode 核心 core/

[Famo.us] Surface 核心說明

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github 簡單的核心說明，隨時會補充（因為不知道官方還會不會新增東西 Surface 核心模組這個模組預設會產生一組 <div> 的 DOM 元素，然後再進行操作。初始化的參數可以有， size 是個陣列 [width, height] 單位是 px，必須要是數字 classes 也是陣列，這裡的內容會是 <div>

[Famo.us] 安裝與 Surface, Modifier 基本操作

[UPDATE] Famo.us 官方已捨棄此模組，詳情請看官方 Github Famo.us 原始碼可以在官方的 github 下載如果你已經可以進入 Famo.us University，那這裡或許可以跳過。基本使用 Famo.us 是基於 AMD 的架構來撰寫，且搭配使用 require.js，所以稍微了解一下這兩個東西會比較容易上手。安裝你可以從官方的 github 把專案抓下來直接使用，也可以用 nodeJS 來安裝，

[Famo.us] 新一代 HTML5 Web Application JavaScript Framework

其實開始研究已經好一陣子了，只是想說 Blog 好久沒有文章，所以拿來灌水一下，免得乾旱過頭。我剛開始寫的時候，很多人都在問，到底 Famo.us 是什麼東西？其實我本來也不理解，直到我聽到有人跟我說 Z>B... Famo.us 這個 JavaScript Framework 是早在 2012 年發表展示的一個專案，一開始的 hello world 應用程式，可以看看這個影片，這個影片當初造成轟動，但是等到 Famo.