# 前端開發指南

## 圖片

```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-',

}
```