# 4/16 教育訓練補充

* 原始碼打包成 `TIPO-Trademark-Application-{日期}.zip` 提供給建置廠商
* 交付的網頁採用 BEM 命名法的變體，改用一個 `-` 和一個 `_` 分隔區塊名稱
* 複雜的元件以 PUG 撰寫，用起來會比開發元件頁列出的 HTML 精簡一些
* 互動性高的元件，例如商標圖樣產生器、簽名板，實作成了 jQuery plugin ，放在 `src/js/widgets/` 目錄下

---

* 更複雜的元件可以實作成 React 或 Vue 元件，放在 `src/js/examples/` 目錄下
* 實作 React 或 Vue 元件時，可以靠改變 HTML class 來改變元件的狀態，減少撰寫 JavaScript 的需要
* 實作 React 或 Vue 元件時，應注意原本的 HTML UI 元件會因為放在不同的父元件中，而補上特殊的 CSS 規則，此時應該用 React 或 Vue 慣用的方式，在父元件中補上一樣的規則，而不是直接使用交付的 CSS class

---

* 若以 React 改寫輸入元件，可以考慮將所有輸入元件 `props` 的介面設計成 `{ data: T, onChange: (T) => void }` ，方便以小的輸入元件組合出大的輸入元件
* 以 React 改寫輸入元件時，最好全部寫成 controlled component ，避免在子元件中紀錄了重複的狀態
* 只有部分元件使用 React 改寫時，可以靠 `postMessage()` 和 React 元件溝通，避免直接存取全域變數或函數