自動產生「原始碼」的 JavaScript

2016-01-05 03-37-44 的螢幕擷圖

最近一直在忙於 Tocas UI 阿,

然後在尋找 Semantic UI 到底是怎麼做出「自動產生原始碼」的功能,

所以後來我的想法就是自己做一個,

基本上概念就是:

  1. 取得指定容器內的 HTML
  2. 透過 Tidy 去清潔這個 HTML
  3. 輸出到指定容器

不過卻少了一個功能,就是「重點標記」,所以後來我又新增了這個功能,

最後概念變成:

  1. 取得指定容器內的 HTML
  2. 透過 Tidy 去清潔這個 HTML
  3. 輸出到指定容器
  4. 檢查每個容器想要標示的重點
  5. 把容器內的文字新增重點樣式

我想之後應該會在 Github 公開這個原始碼,因為真的是很方便,

其實使用起來也很方便就是了。

Tocas 現在支援點擊編輯 .. ?

螢幕快照 2015-09-12 下午5.36.52

新的功能:$(元素).clickToEdit(回傳函式)

不過不會將文字變成 input 就是了,倒是要先用一個 div 把文字包起來,

然後 click 的時候會將 div 變成像文字框的樣式(就是 Tocas 中的 .tb),一旦使用者編輯完後會變回 div,

然後「自動回傳文字」,算是變相的 .. 簡易使用方法吧。

螢幕快照 2015-09-12 下午5.38.51

TeaMeow 的懶人教室 —— 條件式

這裡是我本身會寫的懶人作法,有時候會讓程式更簡潔,通常是 PHP 或者 JS 都可以用。


如果⋯⋯

你可以把「如果怎樣,這個值就怎樣的」方式縮短,例如原本:

if($Foo)
{
    $Bar = 'OK';
{
else
{
    $Bar = 'Not OK';
}

可以變成

if($Foo)
    $Bar = 'OK';
else
    $Bar = 'Not OK';

更可以變成

$Foo = ($Bar) ? 'OK' 
              : 'Not OK';

必須⋯⋯

有時候你會用「IF 去框住,例如必須大於多少,才可以」的方式,大概是:

function Foo($Bar)
{
    // 必須大於 50 才執行下面語句
    if($Bar > 50)
    {
        $Msg  = 'Im Really OK.';
        $Time = time();
    }
}

可以改成

function Foo($Bar)
{
    // 直接在開頭就先做了斷
    if($Bar > 50) return;

    $Msg  = 'Im Really OK.';
    $Time = time();
}

關於 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 的部分該怎麼辦呢,

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