Skip to content

Latest commit

 

History

History
103 lines (69 loc) · 2.3 KB

README.md

File metadata and controls

103 lines (69 loc) · 2.3 KB

TS Decorators

利用 TypeScript 開發好用的 Decorator

demo

Debounce

避免短時間執行多次的方法,造成效能上的浪費,譬如: resize、scroll

// 連續執行該方法,間隔時間在300ms內,僅會在最後一次間隔超過300ms,才執行    
@Debounce(300)
public debounce() {
    // TODO
}

Throttle

限制該方法間隔時間內,不會被重新執行

// 該方法被執行後,1000ms內無法再被執行
@Throttle(1000)
public throttle() {
    // TODO
}

Async

其實就是 setTimeout,用來寫動畫還滿好用的

// 顯示訊息
public showMessage() {
    let message = document.createElement('div');
    message.className = 'message';
    message.innerText = this.status.message;
    this.messageWrapRef.nativeElement.appendChild(message);
    this.doShow(message);
}

// 顯示
@Async()
private doShow(message: HTMLElement) {
    message.classList.add('show');
    this.doClose(message);
}

// 3000ms後,隱藏
@Async(3000)
private doClose(message: HTMLElement) {
    message.classList.remove('show');
    this.doRemove(message);
}

// 配合動畫時間,310ms後,移除
@Async(310)
private doRemove(message: HTMLElement) {
    message.remove();
}

Cache

簡單的使用 localStoragesessionStorage

CCache.Local

localStorage 讀取變數名稱的值,window.unload時,將變數值回寫到 localStorage

@CCache.Local('App', defaultStatus())
public status: Status;

CCache.Session

sessionStorage 讀取變數名稱的值,window.unload時,將變數值回寫到 sessionStorage

@CCache.Session<User>('App', defauleUser())
public user: User;

Clear

清除目前的 cache 並還原成預設值

// 清除還原所有區塊
CCache.clearAllLocal();

// 清除還原所有區塊
CCache.clearAllSession();

// 清除還原指定區塊
CCache.clearLocal('_');

// 清除還原指定區塊
CCache.clearSession('_');

Json Viewer

js object 轉成 html 格式

element.innerHTML = jsonToHtml(obj);
// or
<div [innerHTML]="jsonToHtml(obj)||safeHtml">