差異處

這裏顯示兩個版本的差異處。

--- guide:frontend-dev [2022/05/17 06:58] – 移除 - 外部編輯 (Unknown date) 127.0.0.1
+++ guide:frontend-dev [2022/06/25 18:06] (目前版本) – [map & object 的使用時機] admin_wi1d5ky
@@ 行 1: / 行 1: @@
+# 前端開發指南
+## 圖片
+```html
+<img
+  src="pic_1x.jpg"
+  srcset="pic_1x.jpg 1x, pic_2x.jpg 2x"
+/>
+```
+---
+## lazy import
+```jsx
+import React, { useState, createElement } from 'react';
+import MessageList from './MessageList';
+import MessageInput from './MessageInput';
+import ErrorBoundary from './ErrorBoundary';
+const Channel = () => {
+  const [emojiPickerEl, setEmojiPickerEl] = useState(null);
+  const openEmojiPicker = () => {
+    import(/* webpackChunkName: "emoji-picker" */ './EmojiPicker')
+      .then(module => module.default)
+      .then(emojiPicker => {
+        setEmojiPickerEl(createElement(emojiPicker));
+      });
+  };
+  const closeEmojiPickerHandler = () => {
+    setEmojiPickerEl(null);
+  };
+  return (
+    <ErrorBoundary>
+      <div>
+        <MessageList />
+        <MessageInput onClick={openEmojiPicker} />
+        {emojiPickerEl}
+      </div>
+    </ErrorBoundary>
+  );
+};
+```
+---
+## map & object 的使用時機
+### 使用 Map：
+  * 储存的键不是字符串/数字/或者 Symbol 时，选择 Map，因为 Object 并不支持
+  * 储存大量的数据时，选择 Map，因为它占用的内存更小
+  * 需要进行许多新增/删除元素的操作时，选择 Map，因为速度更快
+  * 需要保持插入时的顺序的话，选择 Map，因为 Object 会改变排序
+  * 需要迭代/遍历的话，选择 Map，因为它默认是可迭代对象，迭代更为便捷
+### 使用 Object：
+  * 只是简单的数据结构时，选择 Object，因为它在数据少的时候占用内存更少，且新建时更为高效
+  * 需要用到 JSON 进行文件传输时，选择 Object，因为 JSON 不默认支持 Map
+  * 需要对多个键值进行运算时，选择 Object，因为句法更为简洁
+  * 需要覆盖原型上的键时，选择 Object
+Src: <https://zhuanlan.zhihu.com/p/358378689>
+---
+## PDF 頁面開發
+- 可以在後端用 puppeteer 的 `.pdf()` 來輸出，文件可見 [[https://github.com/puppeteer/puppeteer/blob/v1.10.0/docs/api.md#pagepdfoptions | github]]。
+- 前端建議長度單位直接用 cm，設計圖也是。
+## options
+```javascript
+{
+      format: 'A4',
+      printBackground: true,
+      timeout: 300000,
+      displayHeaderFooter: true,
+      headerTemplate: '',
+      footerTemplate: `
+        <div class="page-footer" style="width:100%; text-align:center; font-size: 8px; color:#999999; background-color:#fcfcfc;">
+          <span class="pageNumber"></span>
+        </div>
+      `,
+      margin: { bottom: '15mm' },
+      pageRanges: '2-',
+}
+```