Hina Chen
Hina Chen
`OptionsManager` 是一個讓你放資料的地方，奇妙的是他因為有 `EventHandler` 可以用，所以本身也能夠觸發監聽事件。 ### OptionsManager 核心 他只能接收 JSON 格式的物件（_Object_），所以你亂丟東西他是不會收的。由於自己擁有一個 `EventHandler` 所以也可以綁定或是觸發事件。 另外，這兩種東西不收， - Document Fragments - Functions #### 方法 - `patch` 修改 options 當中的某個 `key-value` - `setOptions` 等同於 `patch`...
RenderNode 算是整個 Famo.us 對於元件樹狀結構的核心，他專門用來處理你的元件，在樹狀結構中應該要**怎麼長**是靠他來處理。 ### RenderNode 核心 這個核心很特殊，你應該也幾乎沒有機會能直接使用他。他的初始化必須要是一個可渲染（_renderable_）的元件，而這個元件經過初始化後，自身就會轉換成 RenderNode 物件，來提供給 Famo.us 的引擎去做渲染動作。 什麼叫做可渲染元件？官方定義的有， - `core/Group` - `core/RenderNode` - `core/Scene` - `core/Surface` - `core/View` - `core/ViewSequence` - `surfaces/ContainerSurface` - `views/EdgeSwapper` -...
Famo.us 原始碼可以在[官方的 github 下載](https://github.com/Famous/famous) 如果你已經可以進入 [Famo.us University](https://famo.us/university)，那這裡或許可以跳過。 ### 基本使用 Famo.us 是基於 [AMD](http://requirejs.org/docs/whyamd.html) 的架構來撰寫，且搭配使用 [require.js](http://requirejs.org)，所以稍微了解一下這兩個東西會比較容易上手。 #### 安裝 你可以從官方的 github 把專案抓下來直接使用，也可以用 nodeJS 來安裝，這裡介紹一下 nodeJS 的安裝方法，或者是參考官方的 [Install](https://famo.us/install) ``` sudo npm install -g yo...
### Scene 核心 這個核心模組是用於提供一個已經定義好的結構化場景（他等同於一組 `Modifier` 物件，定義什麼呢？ - `translate` - `rotate` - `rotateX` - `rotateY` - `rotateZ` - `rotateAxis` - `scale` - `skew` 以上必須要是 `Transform` 模組的相對應物件。 - `matrix3d` 以上必須要是一個 `Function` 用以返回...
#1 提到了 Surface 模組，這裡詳細說明這個模組的功用。 ### Surface 核心模組 這個模組預設會產生一組 `` 的 DOM 元素，然後再進行操作。初始化的參數可以有， - `size` 是個陣列 [width, height] 單位是 px，必須要是數字 - `classes` 也是陣列，這裡的內容會是 `` 元素的 class 屬性值 - `properties` 必須是一個 Object，內容是...
#1 聊到基本安裝與 `Surface`, `Modifier` 使用，現在來介紹 `View` 核心模組。 ### View 核心 核心模組 `core/View` 是用於提供一個或是多個 `RenderNode` 的**容器**給框架引擎使用，它本身在輸出的時候並不會產生 DOM 實例，所以你在畫面上其實是看不到 `View` 這個模組的。 先解釋一下 `RenderNode` 這個東西， - 整個框架系統中，只要是產出與畫面有關的模組，都算是一種 `RenderNode` - 核心 `core/RenderNode` 只包含簡單的方法，一切由其他元件自行擴展 -...
#2 有提到了 View 核心，延伸的核心模組還有 ViewSequence 這個部分，不過目的不同。 ### ViewSequence 核心 他是用來儲存一個序列化資料的模組，所以雖然字面上是 `ViewSequence`，但是骨子裡跟 `View` 沒有關係。 #### 初始化方法 這個模組初始化可以傳入這幾個數值（使用 `Object` 的方式傳入， - `array` 傳入一個陣列，這個陣列用來儲存你的物件。 - `index` 定義第一個元素，這個模組用這個元素來當作第一個被 render 的物件 - `loop` 當巡迴過整個陣列之後，決定是否要返回第一個（或最後一個）元素 -...
#6 Engine 核心中，最主要的就是 `Context` 核心處理 DOM 的部分。而處理 DOM 的部分則是 `ElementAllocator` 來負責，這裡就分別說明。 ### ElementAllocator 核心 這個核心專門在處理 DOM 中的元素，當你初始化這個物件的時候，預設就會拿到 `document.createDocumentFragment()` 來當作初始物件（或者是，你也可以傳入一個 DOM 的物件給他 但是，由於這個物件的方法，在官方說明下都是屬於私有方法，單獨要拿出來用也不是不行。只是用法有別。主要這個物件，是用來儲存 DOM 的物件， - `allocate` 用於儲存 DOM 物件 -...
#### Engine 核心 在 Famo.us 當中，這個核心做的事情其實並不會太多，大抵上就是這些， - 設定 [rFA](https://developer.mozilla.org/zh-TW/docs/Web/API/Window.requestAnimationFrame) - 監聽 `resize` - 強迫取消 `touchmove` 事件（使用 preventDefault() - 使用 `EventHandler` 監聽事件 - 使用 `OptionsManager` 設定預設值，並且監聽其 `change` 來更新元件 #### Engine 方法...
由於 `Scrollview` 對於邊界偵測的演算法，加上 JavaScript 本身對於浮點數的運算問題，會導致靠近邊界時，運算數值會無窮逼近頂點（或是無窮逼近下緣 這樣會讓 Chrome 瀏覽器因為瞬間大量運算的關係而耗費效能（目前實測的狀況，只有 Chrome 較為明顯 解決的辦法，是在邊界偵測的監聽上，強迫讓無窮逼近頂點（或下緣，給定一個固定數值，讓他不要再重複演算 雖然會重複給予值，但是比起無窮逼近要來的好很多。 ``` js define(function(require, exports, module) { var Engine = require('famous/core/Engine'); var Surface = require('famous/core/Surface'); var Modifier = require('famous/core/Modifier');...