前端開發指南

snippet.html

<img
  src="pic_1x.jpg"
  srcset="pic_1x.jpg 1x, pic_2x.jpg 2x"
/>

snippet.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>
  );
};

• 储存的键不是字符串/数字/或者 Symbol 时，选择 Map，因为 Object 并不支持
• 储存大量的数据时，选择 Map，因为它占用的内存更小
• 需要进行许多新增/删除元素的操作时，选择 Map，因为速度更快
• 需要保持插入时的顺序的话，选择 Map，因为 Object 会改变排序
• 需要迭代/遍历的话，选择 Map，因为它默认是可迭代对象，迭代更为便捷

• 只是简单的数据结构时，选择 Object，因为它在数据少的时候占用内存更少，且新建时更为高效
• 需要用到 JSON 进行文件传输时，选择 Object，因为 JSON 不默认支持 Map
• 需要对多个键值进行运算时，选择 Object，因为句法更为简洁
• 需要覆盖原型上的键时，选择 Object

Src: https://zhuanlan.zhihu.com/p/358378689

• 可以在後端用 puppeteer 的 .pdf() 來輸出，文件可見 github。
• 前端建議長度單位直接用 cm，設計圖也是。

snippet.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-',
 
}