Context, ElementAllocator 核心說明

[hinablue]

#6 Engine 核心中，最主要的就是 Context 核心處理 DOM 的部分。而處理 DOM 的部分則是 ElementAllocator 來負責，這裡就分別說明。

ElementAllocator 核心

這個核心專門在處理 DOM 中的元素，當你初始化這個物件的時候，預設就會拿到 document.createDocumentFragment() 來當作初始物件（或者是，你也可以傳入一個 DOM 的物件給他

但是，由於這個物件的方法，在官方說明下都是屬於私有方法，單獨要拿出來用也不是不行。只是用法有別。主要這個物件，是用來儲存 DOM 的物件，

• allocate 用於儲存 DOM 物件
• deallocate 用於取出儲存的 DOM 物件
• migrate 把原本所屬的 DOM 子元件，轉移到新的 DOM 父元件底下
• getNodeCount 計算所屬的子元件數量

底下的例子就會在 document.body 底下加入一個空的 <div> 元素。

  var body = new ElementAllocator(document.getElementsByTagName('body')[0]);
  body.allocate('div');

不過既然他是私有物件，就不再多贅述了。

Context 核心

這個核心主要是將 RenderNode 打包成物件並且將它放到 DOM 裡面。

這個核心包含了，

• ElementAllocator
• RenderNode
• EventHandler

方法

• add 在這個物件內加入一個 renderable 物件
• migrate 與 ElementAllocator 類似，將這個物件搬移到另一個物件下
• getSize 取得該物件的寬度與高度
• setSize 設定該物件的寬度與高度，如果沒有傳入值，就是 document 的尺寸
• getPerspective 取得該物件的透視深度（單位 px
• setPerspective 設定物件透視深度，允許三個傳入值，分別是 perspective，transition 與 callback，其中 transition 必須要是 Transitionable 物件
• on 監聽事件
• emit 觸發事件
• removeListener 移除監聽事件
• pipe, unpipe 將自身事件指定（或取消）到其他物件上

使用方式

這一個元件必須要傳入一個 DOM 的元件，舉個簡單的例子來看，

  var elem = document.createElement('div');
  elem.style.backgroundColor = 'black';
  elem.style.width = '100px';
  elem.style.height = '100px';
  document.body.appendChild(elem);

  var ctx = new Context(elem);

  console.log(ctx);

這個 ctx 物件就可以用來控制 DOM 元件了。