1 of 14

Glue.js 規劃及介紹

2018/1/11 上德

2 of 14

名稱由來

之所以叫Glue.js，是因為像是膠水一樣可以把網頁封裝成Component並把彼此黏貼起來

3 of 14

特點

1. ES5 style，適用jquery為主要前端開發技術

2. 將頁面切分為多個Component，動態載入html & js & css

3. 每個步驟的html & script以陣列方式紀錄在元件當中（因此可以不用重新下載頁面即可直接回覆至上一個動作的畫面）

4. 可管理router將每個操作狀態對應到網址

5. Component由參數方式作為溝通方式 (依賴注入delegate function)

4 of 14

和前身Stackup.js之差異

​

Stackup.js

Glue.js

動態載入html

單個(整頁)

多個

網址路由 & �紀錄狀態

狀態紀錄在元件內

狀態紀錄在元件內�並且紀錄html history & 對應網址

適用系統

手機版web

所有web

切換頁動畫

有

APP UI

有

5 of 14

和主流前端框架之差異 – 主要差異

​

Such as angular/react/vue.js

Glue.js

設計模式

MVVM

無

(重點在封裝，但裡面怎麼寫不管)

門檻及環境

es6 , 通常建議儘量減少使用jquery

適用es5+jquery

其實是XX比雞腿

其他

應有盡有

6 of 14

和主流前端框架之差異 – 依功能比較

​

主流作法（就我所知）

Glue.js

動態載入Compoent

(1)Vue.js/Angular：將viewmodel視為view的instance�(2)React：使用JSX (virtual-dom)以javascript去渲染成html

載入html並執行script

狀態管理

Flux/Redux：將狀態獨立出來透過生命週期管理和控制

將參數及html紀錄至陣列空間當中

（就我所知應該沒有其他框架/元件這樣做）

前端Router

(1)自己手寫html history api/hash

(2)前端框架

←類似前端框架之做法

以上一起用

(1)自己刻 (蛛思v1.5~v1.6目前的做法)

(2)前端框架：

1.React + Redux/Flux + React-Router

2.Vue + Vuex + Vue-Router

3.Angular + ngrx/ng-redux + ??� （以上通常還要結合node.js/webpack/babel等工具）

只需載入glue.js、

容易整合至現有專案、

用ES5沒什麼問題

7 of 14

網頁

Component 1~11

將網頁的區塊切割為Component

8 of 14

Template (載入為Component)

網頁腳本 (main.html)

網頁

Glue.js

main.html

template.html

檔案結構範例

main.js

glue.js

template.js

(由Glue.js控制動態載入)

9 of 14

Glue.js初始化

目前操作步驟

主程式建構式：� 1. Template路徑

2. Router

3. 參數

main.html

template.html

main.js

glue.js

template.js

Template：� Delegate functions

10 of 14

「stick」(黏貼)分解動作說明

[0]

[1]

[2]

[3]

[4]

目前操作步驟

Component

Html String

.html

Template

(1) Load html 檔案

.js

.css

(2) 更換innerHtml

+

Router , {參數}

(3) 執行html中的script

(5) 將Component新增至陣列空間

(6) Html History API

(4) 帶入參數，並執行script中的delegate function

Push State

11 of 14

「move」(移動)分解動作說明

[0]

[1]

[2]

[3]

[4]

Component

Html String

(2) 更換innerHtml

+

Router , {參數}

(3) 執行html中的script

(1) 指向指定的陣列空間位置

(5) Html History API

下一步

上一步

(4) 帶入參數，並執行script中的delegate function

目前位置

不移動

Pop State

12 of 14

「change」(變更)分解動作說明

目前操作步驟

(3) Html History API

(2) 執行script中的delegate function

Replace State

Component

Html String

+

Router , {參數}

(1) 帶入新參數

Delegate functions ()

13 of 14

由網址列載入頁面分解動作說明

[0]

Component

Html String

.html

Template

(3) Load html 檔案

.js

.css

(4) 更換innerHtml

+

Router , {參數}

(5) 執行html中的script

(2) 由Router對應至Component並帶入參數

(1) 網址開啟網頁

{網址參數}

(6) 帶入參數，並執行script中的delegate function

14 of 14

To be continue…