---
tags: share
disqus: hackmd
---

1100303
===

關於 Promise
---
* `new Promise()` 為實例化一個 `Promise Class`，`()`須傳入帶 ==成功`resolve（自定義）`== 和 ==失敗`reject（自定義）`== 參數的 `function`。
* 可只帶一個參數，則代表成功時參數。
* 因為較複雜，所以通常用在第三方套件，如 `ajax return` 的也是一個 `promise`，所以可以寫 `$ajax().then()`。
* 語法糖 `async` （ES7）
* `async` 搭配 `await`
* 強制將非同步事件轉為同步事件（實際上是讓其看起來像同步）。
* 通常打 API 都是非同步。
* 缺點：不適合寫太長，因此還是建議寫 `then` 比較彈性。
* `try{}`、`catch{}`：先執行`try{}`，`try{}`有錯誤即跳到`catch{}`。

JS 小知識
---
* `function` 型參：定義 `function` 時的所自定義的名稱。
* `function` 實參：呼叫函式時所傳入的參數。
* `console.log()` 時，可將物件用 `{}` 包起來，如 `console.log({data})`（等同於`console.log({data:data})`），此寫法會多印出物件名稱。
* `for` 語法底層都是 `Iterator`。
* `if(){}else{}`有短路寫法`&&`。

關於DTO
---
* DTO 就是在作資料轉換（把收到的資料轉成我要用的資料格式）

// ========== Vue 畫面 ==========
// 點擊按鈕時呼叫 open()
// open()主要功能為將資料寫進表格相對應欄位，因此open內會對資料格式作處理。
// 即使兩者資料格式一模一樣，還是會透過DTO處理，避免日後資料修改新增）。
open(data?: IBKE0205LinkItem) {
console.log({ data });
this.dialog = true;
if (data) {
  const { imageData, ...etc } = data; // 因為資料從外部來所以在此解構
  const { imageId } = imageData; // 因為資料從外部來所以在此解構
  const { pageId } = this; // 因為資料從外部來所以在此解構
  this.form = new BKE0205EditLinkReqDTO({ ...etc, pageId, imageId });
}
}

// ========== TypeScript 畫面 ==========
export class BKE0205EditLinkReqDTO {
  // 將資料在建構式中作解構，以利此 class 在 new BKE0205EditLinkReqDTO()時，自動將資料帶入正確位置
  constructor(data?: BKE0205EditLinkReqDTO) { // 問號表示 data 可能為空
    if (!data) return;
    const { 
      linkId = 0,
      pageId = 0,
      title = "",
      subTitle = "",
      desc = "",
      linkUrl = "",
      labelId = 0,
      beginDT = "",
      endDT = "",
      status = StatusEnum.ACTIVE,
      top = StatusEnum.ACTIVE,
      imageId = 0
    } = data;
    this.linkId = linkId;
    this.pageId = pageId;
    this.title = title;
    this.subTitle = subTitle;
    this.desc = desc;
    this.linkUrl = linkUrl;
    this.labelId = labelId;
    this.beginDT = beginDT;
    this.endDT = endDT;
    this.status = status;
    this.top = top;
    this.imageId = imageId;
  }
  // 強型別語言本身就需要先定義資料型態
  linkId?: number = 0; //	Integer	連結ID
  pageId = 0; //	Integer	頁面ID
  title = ""; //	String	連結標題
  subTitle = ""; //	String	連結副標題
  desc = ""; //	String	連結簡介
  linkUrl = ""; //	String	URL
  labelId = 0; //	Integer	標籤ID
  beginDT = ""; //	String	發布時間	YYYYMMDDhhmmss
  endDT = ""; //	String	結束時間	YYYYMMDDhhmmss
  status = StatusEnum.ACTIVE; //	String	上下架	Y / N
  top = StatusEnum.ACTIVE; //	String	置頂	Y / N
  imageId = 0; //	Integer	圖片ID
}

TypeScript
---
* `class` 的屬性和方法，都要先定義型別。
* `inerface` 內只定義型別，用於約束物件的型別用，例如 API 的回傳值、要傳入 `function` 的參數。沒有 `constructor` 所以不能 `new`（無法被量產）。
* 用`$refs`方法時，通常會搭配`<>`強轉型，如`(<any>this.$refs.douvuments).open(item)`;
* ref 是標記在 html 元素上的`<tag-name ref="">`，`js`裡有防呆寫法`(<any>this.$refs.douvuments)?.open(item)`，`?`表示前方物件可能沒有，`data?:`表示該 `data` 可能為空

寫 Code 習慣
---
* 常量：全大小的變數命名方式，表示值不改變。
* 函式由 on 開頭

Vue
---
* Vue component 繼承 Vue 的所有屬性跟方法
* get、set：Vue 把 get 跟 set 覆蓋掉
* get()、set()是prototype都會有的方法，下方寫法等同於A = "a"，CCC將取得A = "a";
<!-- class CCC{
get A(){
return "a"
}
set A(){
return "a"
}
} -->

==看 evernote vuetify & vue 規則==