關於 TeaMeow 如何星號的方法

螢幕快照 2015-08-12 上午4.00.14

說穿了,就只是一個下面這樣的按鈕而已

<button data-star-action="star"
        data-star-id="4"
        data-star-target="Meow"
        class="js-star-btn"></button>

這裡是他們的說明:

data-star-action 用來存放接下來應該「Star(星號)」還是「Unstar(取消星號)」的動作。
data-star-id        則是目標對象的編號。
data-star-target 則是目標的種類。


其實 Twitter 也是採用這種方法,但是他們不會將編號寫在按鈕上,

螢幕快照 2015-08-12 上午3.57.14

而是在包含這個按鈕的「容器」上,如此一來就不需要一直寫 data 的標籤到每一個按鈕

只需要取得這按鈕容器的標籤就可以了,那為什麼我不這樣做呢,

因為我想說統一化就好了,如果我選擇寫在容器上,每個地方的 HTML 不同,

取得容器的方式也有所不同,那不如我先暫時寫在按鈕上吧 ..

TeaMeow 怎麼傳遞新/舊貼文的?

螢幕快照 2015-08-05 下午10.17.20

其實很簡單就是 JSON 格式啦,很多網站都是,不過差別在於你接收到的資料是不一樣的

有的網站他們會回傳很多個 Object,然後到你電腦上在自己建立成 HTML

但是 TeaMeow 的方式跟 Twitter 很像,是在伺服器端建立好 HTML,才傳給你,

不過沒有 Twitter 這麼先進就是了(因為 Twitter 不只回傳 HTML,還有每篇文章的 Object):

螢幕快照 2015-08-05 下午10.21.58


如果你有興趣的話,這裡是 TeaMeow 從產生到回傳的流程:

  1. 透過 Tocas 去告訴伺服器要資料。
  2. 伺服器找資料然後丟給 Builder(建造者)。
  3. Builder 丟給 Teapot(茶葉系統)來做整理的動作。
  4. Teapot 丟給 Avane(模板系統)建立 HTML 內容。
  5. 最後將 Avane 回傳的內容跟一些其他的參數傳回客戶端。
  6. 客戶端(就是使用者)接收到資料後,透過 Tocas 來將資料顯示到螢幕上。

好啦,既然 TeaMeow 回傳的是 HTML,

那麼手機版跟 API 的部分該怎麼辦呢,

就這樣,熬夜的日子又要持續下去了。