function getCounter() {
  let a = 1;

  function counter() {
    a = a + 1;
    return a;
  }
  return counter;
}

console.log(getCounter()());
console.log(getCounter()());
console.log(getCounter()());

function getCounter() {
  let a = 1;

  function counter() {
    a = a + 1;
    return a;
  }
  return counter;
}

const myCounter = getCounter();
console.log(myCounter());
console.log(myCounter());
console.log(myCounter());

let target = {};
let source = {a: {b: 1}};

Object.assign(target, source);
console.log(target);

const shallowClone = (target) => {
  if (target instanceof object) {
    const cloneTarget = Array.isArray(target) ? [] : {};
    for (let key in target) {
      if (target.hasOwnProperty(key)) {
        cloneTarget[key] = target[key];
      }
    }
    return cloneTarget;
  }

  return target;
}

const person = {
  name: '张三',
  age: 18
}
const desc = Object.getOwnPropertyDescriptors(person);
console.log(desc);

const isComplexDataType = obj => ((typeof obj === 'object' || typeof obj === 'function') && obj !== null);

// WeakMap 防止内存泄漏
const deepClone = (obj, hash = new WeakMap()) => {
  // 特判 Date 和 RegExp，返回一个新对象
  if (obj?.constructor === Date) {
    return new Date(obj);
  }
  if (obj?.constructor === RegExp) {
    return new RegExp(obj);
  }

  // 处理循环引用
  if (hash.has(obj)) {
    return hash.get(obj);
  }

  // 得到属性值和属性的描述
  let desc = Object.getOwnPropertyDescriptors(obj);

  // 继承原型链，包括其 descriptors
  let cloneObj = Object.create(Object.getPrototypeOf(obj), desc);

  // 设置 hash，用于后续检测循环引用
  hash.set(obj, cloneObj);

  // 遍历所有键值
  for (let key of Reflect.ownKeys(obj)) {
    cloneObj[key] = (isComplexDataType(obj[key]) && typeof obj[key] !== 'function' ? deepClone(obj[key], hash) : obj[key]);
  }
  return cloneObj;
}

// 验证代码
let obj = {
  num: 0,
  str: 'string',
  boolean: true,
  unf: undefined,
  nul: null,
  obj: { name: 'Jack', id: 1 },
  arr: [0, 1, 2],
  func: function() { console.log('hello') },
  date: new Date(),
  reg: new RegExp('/我是正则/ig'),
  [Symbol('我是 Symbol')]: 1,
}

Object.defineProperty(obj, 'innumerable', {
  enumerable: false,
  value: '不可枚举',
})

obj = Object.create(obj, Object.getOwnPropertyDescriptors(obj));
obj.loop = obj; // 循环引用

let cloneObj = deepClone(obj);
cloneObj.arr.push(1234);
console.log(obj);
console.log(cloneObj);

const element = {
  type: "h1",
  props: {
    title: "foo",
    children: "Hello", // 一个特殊属性，通常是很多 elements 组成的数组
  },
}

// 创建元素
const node = document.createElement(element.type);
// 把 props 的所有属性传递给节点
node.title = element.props.title;
// 因为这里的 child 比较简单，所以我们用 textNode 代替
const textNode = document.createTextNode('');
textNode.nodeValue = element.props.children;
// 把 child 作为 node 的孩子
node.appendChild(textNode);

// 把 node 插入容器
const container = document.getElementById('root');
container.appendChild(node);

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children,
    }
  }
}

{
  type: "div",
  props: { children: [] }
}

{
  "ype: "div",
  props: { children: [a] }
}

{
  type: "div",
  props: { children: [a, b] }
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  }
}

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child => (
        typeof child === 'object' ? child : createTextElement(child)
      ))
    }
  }
}

const Didact = {
  createElement,
}

const element = Didact.createElement(
  "div", // type
  {id: "foo"}, // props
  // children
  Didact.createElement('a', null, 'bar'), 
  Didact.createElement('b')
)

const container = document.getElementById('root');
ReactDOM.render(element, container);

function render(element, container) {
  const dom =  element.type === 'TEXT_ELEMENT' ? document.createTextNode('') 
    : document.createElem(element.type);

  // 一个函数，用于判断键值是否为 children
  const isProperty = key => key !== 'children';

  Object.keys(element.props).filter(isProperty)
    .forEach(name => {
      dom.name = element.props.name;
    })

  // 递归渲染
  element.props.children.forEach(child => render(child, dom));

  container.appendChild(dom);
}

let nextUnitOfWork = null; // 下一个单元是否需要渲染

function workLoop(deadline) {
  let shouldYield = false; // 是否应该让路

  // 当下一个单元需要被渲染，且不需要让路的时候，就继续渲染
  while (nextUnitOfWork && !shouldYield) {
    // performUnitOfWork 会执行当前的渲染，并返回下一个 unit
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = deadline.timeRemaining() < 1;
  }

  // 当主线程空闲的时候浏览器会执行回调函数 workLoop
  requestIdleCallback(workLoop);
}

// 首次执行
requestIdleCallback(workLoop);

Didact.render(
  <div>
    <h1>
      <p />
      <a />
    </h1>
    <h2 />
  </div>,
  container
)

function render(element, container) {
  nextUnitOfWork = {
    dom: container, // 初始化设置为 root
    props: {
      children: [element],
    },
  }
}

let nextUnitOfWork = null;

function workLoop(deadline) {
  let shouldYield = false; // 是否应该让路

  // 当下一个单元需要被渲染，且不需要让路的时候，就继续渲染
  while (nextUnitOfWork && !shouldYield) {
    // performUnitOfWork 会执行当前的渲染，并返回下一个 unit
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = deadline.timeRemaining() < 1;
  }

  // 当主线程空闲的时候浏览器会执行回调函数 workLoop
  requestIdleCallback(workLoop);
}

requestIdleCallback(workLoop);

function performUnitOfWork(fiber) {
  // 1. add dom node
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  if (fiber.parent) {
    fiber.parent.dom.appendChild(fiber.dom);
  }

  // 2. create a new fiber for each child
  const elements = fiber.props.children;
  let index = 0;
  let prevSibling = null;

  while (index < elements.length) {
    const element = elements[index];

    const newFiber = {
      type: element.type,
      props: element.props,
      parent: fiber,
      dom: null,
    }

    // 把 fiber 挂载到树上，具体要作为 child 还是 sibling 取决于它是第一个节点还是后来的节点
    if (index === 0) {
      fiber.child = newFiber;
    } else {
      prevSibling.sibling = newFiber;
    }

    prevSibling = newFiber;
    index++;
  }

  // 3. search and return the next unit of work
  if (fiber.child) {
    return fiber.child;
  }
  let nextFiber = fiber;
  while (nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling;
    }
    nextFiber = nextFiber.parent;
  }
}

function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
  }
  nextUnitOfWork = null;
}

let wipRoot = null;

function commitRoot() {
  commitWork(wipRoot.child);
  wipRoot = null;
}

function commitWork(fiber) {
  if (!fiber) {
    return;
  }
  const domParent = fiber.parent.dom;
  domParent.appendChild(fiber.dom);
  commitWork(fiber.child);
  commitWork(fiber.sibling);
}

function reconcileChildren(wipFiber, elements) {
  let index = 0;
  let oldFiber = wipFiber.alternate?.child;
  let prevSibling = null;

  while (index < elements.length || oldFiber !== null) {
    const element = elements[index];
    let newFiber = null;

    if (oldFiber) {
       const sameType = oldFiber && element && element.type === oldFiber.type;
    }

    // 新旧节点类型相同，对 element 创建新的 fiber，并且复用旧的 dom，但是用的是 element 上的 props
    if (sameType) {
      // 更新节点属性
      newFiber = {
        type: oldFiber.type, /// 复用
        props: element.props, // 用新的
        dom: oldFiber.dom, // 复用
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: 'UPDATE', // 这个属性会在  commit 的时候用到
      }
    }

    // 对于需要生成新 DOM 节点的 fiber，我们标记 effectTag 为 PLACEMENT
    if (element && !sameType) {
      // 添加新节点
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        parent: wipFiber,
        alternate: null,
        effectTag: 'PLACEMENT',
      }
    }

    // 对于需要删除的节点，我们不会生成 fiber，而是会在 oldFiber 上添加标记。当我们 commit 整棵 fiber 树的时候，并不会遍历旧的 fiber，而是把 fiber 的变更提交上去。
    if (oldFiber && !sameType) {
      // 删除旧节点
      oldFiber.effectTag = "DELETION";
      deletions.push(oldFiber);
    }
  }
}

function render(element, container) {
  wipRoot = {
    dom: container,
    props: {
      children: [element],
    },
    alternate: currentRoot,
  }
  deletions = [];
  nextUnitOfWork = wipRoot;
}
​
let nextUnitOfWork = null;
let currentRoot = null;
let wipRoot = null;
let deletions = null;

function commitWork(fiber) {
  if (!fiber) {
    return;
  }
  const domParent = fiber.parent.dom;

  // 如果标记为 PLACEMENT，那么在其父亲节点的 DOM 节点上添加该 fiber 的 DOM。
  // 如果标记为 DELETION，则删除节点
  // 如果标记为 UPDATE，我们需要更新已经存在的旧 DOM 节点的属性值
  if (fiber.effectTag === 'PLACEMENT' && fiber.dom !== null) {
    domParent.appendChild(fiber.dom);
  } else if (fiber.effectTag === "DELETION") {
    domParent.removeChild(fiber.dom)
  } else if (
    fiber.effectTag === "UPDATE" &&
    fiber.dom != null
  ) {
    updateDom(
      fiber.dom,
      fiber.alternate.props,
      fiber.props
    );
  }
  
  commitWork(fiber.child);
  commitWork(fiber.sibling);
}

const isProperty = key => key !== "children";
const isNew = (prev, next) => key => prev[key] !== next[key];
const isGone = (prev, next) => key => !(key in next);

function updateDom(dom, prevProps, nextProps) {
  // 删除旧属性
  Object.keys(prevProps).filter(isProperty)
    .filter(isGone(prevProps, nextProps))
    .forEach(name => {
      dom.name = '';
    })
  
  // 添加新属性
  Object.keys(nextProps).filter(isProperty)
    .filter(isNew(prevProps, nextProps))
    .forEach(name => {
      dom.name = nextProps.name;
    })
}

const isEvent = key => key.startsWith("on");
const isProperty = key => key !== "children" && !isEvent(key);

// 移除原来的事件
Object.keys(prevProps).filter(isEvent)
  .filter(key => !(key in nextProps) || isNew(prevProps, nextProps))
  .forEach(name => {
    const eventType = name.toLowerCase().substring(2);
    dom.removeEventListener(eventType, prevProps.name);
  })

// 添加新的事件监听
Object.keys(nextProps).filter(isEvent)
  .filter(isNew(prevProps, nextProps))
  .forEach(name => {
    const eventType = name.toLowerCase().substring(2);
    dom.addEventListener(eventType, nextProps.name);
  })

function App(props) {
  return Didact.createElement(
    "h1",
    null,
    "Hi ",
    props.name
  )
}

const element = Didact.createElement(App, {
  name: "foo",
});

function performUnitOfWork(fiber) {
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  const elements = fiber.props.children;
  reconcileChildren(fiber, elements);
}

const isFunctionComponent = fiber.type instanceof Function;
if (isFunctionComponent) {
  updateFunctionComponent(fiber);
} else {
  updateHostComponent(fiber);
}

function updateHostComponent(fiber) {
  if (!fiber.dom) {
    fiber.dom = createDom(fiber);
  }
  reconcileChildren(fiber, fiber.props.children);
}

function updateFunctionComponent(fiber) {
  const children = [fiber.type(fiber.props)]
  reconcileChildren(fiber, children)
}

function App(props) {
  return <h1>Hi {props.name}</h1>
}
const element = <App name="foo" />

function commitWork(fiber) {
  if (!fiber) {
    return
  }

  // 找 dom 节点的父节点的时候我们需要往上遍历 fiber 节点，直到找到有 dom 节点的 fiber 节点
​  let domParentFiber = fiber.parent;
  while (!domParentFiber.dom) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.dom;

  if (
    fiber.effectTag === 'PLACEMENT' && fiber.dom !== null) {
    domParent.appendChild(fiber.dom)
  } else if (
    fiber.effectTag === 'UPDATE' &&
    fiber.dom != null
  ) {
    updateDom(
      fiber.dom,
      fiber.alternate.props,
      fiber.props
    )
  } else if (fiber.effectTag === 'DELETION') {
    // 移除节点也同样需要找到该 fiber 下第一个有 dom 节点的 fiber 节点
    domParent.removeChild(fiber, domParent);
  }
​
  commitWork(fiber.child)
  commitWork(fiber.sibling)
}

/** @jsx Didact.createElement */
function Counter() {
  const [state, setState] = Didact.useState(1)
  return (
    <h1 onClick={() => setState(c => c + 1)}>
      Count: {state}
    </h1>
  )
}
const element = <Counter />

let wipFiber = null;
let hookIndex = null;

function updateFunctionComponent(fiber) {
  wipFiber = fiber;
  hookIndex = 0;
  wipFiber.hooks = [];
  const children = [fiber.type(fiber.props)];
  reconcileChildren(fiber, children);
}

function useState(initial) {
  const oldHook =
    wipFiber.alternate &&
    wipFiber.alternate.hooks &&
    wipFiber.alternate.hooks[hookIndex];
  const hook = {
    state: oldHook ? oldHook.state : initial,
    queue: [], // 添加一个队列，用于存储 action
  };
​
  wipFiber.hooks.push(hook);
  hookIndex++;
  return [hook.state];
}

// 在下一次渲染的时候，我们才会执行 action，我们把所有的 action 从旧的 hook 队列中取出，然后将其一个个调用得到新的 hook state，因此最后返回的 state 就已经是更新好的。

const actions = oldHook ? oldHook.queue : [];
actions.forEach(action => {
  hook.state = action(hook.state)
});

const setState = action => {
  hook.queue.push(action);
  wipRoot = {
    dom: currentRoot.dom,
    props: currentRoot.props,
    alternate: currentRoot,
  }
  nextUnitOfWork = wipRoot;
  deletions = [];
}

const draggables = document.querySelectorAll(".draggable");
const containers = document.querySelectorAll(".container");

draggables.forEach((draggable) => {
  draggable.addEventListener("dragstart", () => {
    // console.log("start");
    draggable.classList.add("dragging");
  });

  draggable.addEventListener("dragend", () => {
    // console.log("end");
    draggable.classList.remove("dragging");
  });
});

containers.forEach((container) => {
  // 在框框内的时候就是 drag over
  container.addEventListener("dragover", (e) => {
    // console.log("over");
    e.preventDefault(); // 关闭禁止 cursor
    const afterElement = getDragAfterElement(container, e.clientY);
    // console.log(afterElement);
    const draggable = document.querySelector(".dragging");
    if (!afterElement) {
      container.appendChild(draggable);
    } else {
      container.insertBefore(draggable, afterElement);
    }
  });
});

function getDragAfterElement(container, y) {
  const draggableElements = [
    ...container.querySelectorAll(".draggable:not(.dragging)"),
  ];

  return draggableElements.reduce(
    (closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      // console.log(offset);
      if (offset < 0 && offset > closest.offset) {
        return {
          offset,
          element: child,
        };
      } else {
        return closest;
      }
    },
    {
      offset: Number.NEGATIVE_INFINITY,
    }
  ).element;
}

sum(1)(2)(3)(4)	// 10
sum(1, 2)(3)(4)	// 10
sum(1)(2, 3)(4)	// 10

function sum(a, b, c, d) {
  return a + b + c + d;
}

function curry(fn, ...args) {
  // fn.length 表示的是 fn 需要的参数个数
  // 当前函数的参数个数大于或等于原函数时，直接执行
  console.log("args", args);
  if (args.length >= fn.length) {
    return fn(...args);
  }
  // args2 是即将出现的参数
  return function (...args2) {
    console.log("args2", args2);
    return curry(fn, ...args, ...args2);
  };
}

// (1)(2, 3)
// args []，刚开始参数个数为零
// args2 [ 1 ]，即将出现参数 1
// args [ 1 ]，拼接后获得参数 1
// args2 [ 2, 3 ]，即将出现参数 [2, 3]
// args [ 1, 2, 3 ]，拼接后获得参数 [1, 2, 3]，完成任务

// (1, 2)(3)
// args []
// args2 [ 1, 2 ]
// args [ 1, 2 ]
// args2 [ 3 ]
// args [ 1, 2, 3 ]

const join = (a, b, c) => {
  return `${a}_${b}_${c}`;
};

const curriedJoin = curry(join);

curriedJoin(1, 2, 3); // '1_2_3'
curriedJoin(1)(2, 3); // '1_2_3'
curriedJoin(1, 2)(3); // '1_2_3'

function curry() {
  // 接收第一次参数
  const args = [...arguments];

  // 接收第二次参数
  const inner = function() {
    args.push(...arguments);
    // 递归获取剩下的所有参数
    return inner;
  }

  inner.toString = function() {
    return args.reduce((acc, cur) => acc + cur);
  }

  return inner;
}

function flat(arr, depth = 1) {
  return depth > 0 ?
    arr.reduce((prev, cur) => {
      if (Array.isArray(cur)) {
        return [...prev, ...flat(cur, depth - 1)];
      }
      return [...prev, cur];
    }, []) : arr;
}

function throttle(fn, delay = 200) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
    }, delay);
  }
}

function debounce(fn, delay = 200) {
  let timer = null;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}

function shuffle(arr) {
  let i = arr.length;

  for (let i = arr.length; i >= 0; i--) {
    const j = Math.floor(Math.random() * i);
    [arr[i], arr[j]] = [arr[j], arr[i]]
  }

  return arr;
}

/**
 * @param {string[][]} message
 * @return {string}
 */
function decode(message) {
  if (message.length === 0 || message[0].length === 0) {
    return '';
  }
  let res = '';
  let i = 0, j = 0;
  let top = true; // 表示目前正在向 i 增大方向行进，对应图中的向下行进

  while (j < message[0].length) {
    if (top) {
      res += message[i++][j++];
    } else {
      res += message[i--][j++];
    }
    if (i === message.length - 1) {
      top = false;
    }
    if (i === 0) {
      top = true;
    }
  }

  return res;
}

/**
 * Definition for isBadVersion()
 * 
 * @param {integer} version number
 * @return {boolean} whether the version is bad
 * isBadVersion = function(version) {
 *     ...
 * };
 */

/**
 * @param {function} isBadVersion()
 * @return {function}
 */
var solution = function(isBadVersion) {
    /**
     * @param {integer} n Total versions
     * @return {integer} The first bad version
     */
    return function(n) {
      let l = 1, r = n;
      let ans = 1;
      while (l <= r) {
        const mid = l + ((r - l) >> 1);
        if (isBadVersion(mid)) {
          // 满足条件，寻找最左满足，因此收缩右边界
          r = mid - 1;
          ans = mid;
        } else {
          l = mid + 1;
        }
      }    

      return ans;
    };
};

/**
 * @param {Array<(arg: any) => any>} funcs 
 * @return {(arg: any) => any}
 */
function pipe(funcs) {
	return function (arg) {
		return funcs.reduce((acc, func) => {
			return func.call(this, acc);
		}, arg);
	}
}

/* you can use this Class which is bundled together with your code

class Stack {
  push(element) { // add element to stack }
  peek() { // get the top element }
  pop() { // remove the top element}
  size() { // count of element }
}
*/

class Queue {
  constructor() {
    this.stack1 = [];
    this.stack2 = [];
  }
  enqueue(element) {
    // add new element to the rare
    this.stack1.push(element);
  }
  peek() {
    // get the head element
    if (this.stack2.length) {
      return this.stack2[this.stack2.length - 1];
    }
    while (this.stack1.length) {
      this.stack2.push(this.stack1.pop());
    }
    return this.stack2[this.stack2.length - 1];
  }
  size() {
    // return count of element
    return this.stack1.length + this.stack2.length;
  }
  dequeue() {
    // remove the head element
    if (this.stack2.length) {
      return this.stack2.pop();
    }
    while (this.stack1.length) {
      this.stack2.push(this.stack1.pop());
    }
    return this.stack2.pop();
  }
}

/**
 * @param {Function} func
 * @param {(args:[]) => string }  [resolver] - cache key generator
 */
function memo(func, resolver = (...args) => args.join('_')) {
  const cache = new Map();

  return function(...args) {
    const key = resolver(...args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const val = func.apply(this, args);
    cache.set(key, val);
    return val;
  }
}

$('#button')
  .css('color', '#fff')
  .css('backgroundColor', '#000')
  .css('fontWeight', 'bold')

function $(elem) {
  return {
    css: function(property, value) {
      elem.style[property] = value;
      // 最后返回原对象，因为需要支持链式调用
      return this;
    }
  }
}

const emitter = new Emitter()

const sub1  = emitter.subscribe('event1', callback1)
const sub2 = emitter.subscribe('event2', callback2)

// 同一个callback可以重复订阅同一个事件
const sub3 = emitter.subscribe('event1', callback1)

emitter.emit('event1', 1, 2);
// callback1 会被调用两次

sub1.release()
sub3.release()
// 现在即使'event1'被触发, 
// callback1 也不会被调用

class EventEmitter {
  constructor() {
    this.subscriptions = new Map();
  }

  subscribe(eventName, callback) {
    if(!this.subscriptions.has(eventName)) {
      this.subscriptions.set(eventName, new Set());
    }
    // 获取具体的事件列表
    const subscriptions = this.subscriptions.get(eventName);
    // 这里之所以要把 callback 放进一个 obj 里面，是因为题目允许重复订阅同一个事件
    // 以 obj 作为键值，不会重复
    const callbackObj = {
      callback
    }
    subscriptions.add(callbackObj);

    return {
      // 取消订阅
      release: () => {
        subscriptions.delete(callbackObj);
        if (subscriptions.size === 0) {
          this.subscriptions.delete(eventName);
        }
      }
    }
  }
  
  emit(eventName, ...args) {
  	const subscriptions = this.subscriptions.get(eventName);
    if (subscriptions) {
      subscriptions.forEach(callbackObj => {
        callbackObj.callback.apply(this, args);
      })
    }
  }
}

const map = new Map()
map.set(domNode, somedata)

class NodeStore {
  constructor() {
    this.nodes = {};
  }
   /**
   * @param {Node} node
   * @param {any} value
   */
  set(node, value) {
   node.storeKey = Symbol();
   this.nodes[node.storeKey] = value;
  }
  /**
   * @param {Node} node
   * @return {any}
   */
  get(node) {
   return this.nodes[node.storeKey];
  }
  
  /**
   * @param {Node} node
   * @return {Boolean}
   */
  has(node) {
    return this.nodes.hasOwnProperty(node.storeKey);
  }
}

/**
 * @param {HTMLElement} rootA
 * @param {HTMLElement} rootB - rootA and rootB are clone of each other
 * @param {HTMLElement} nodeA
 */
const findCorrespondingNode = (rootA, rootB, target) => {
  if (rootA === target) {
    return rootB;
  }

  // children 是一个 DOM 的 api，表示所有的子节点
  for (let i = 0; i < rootA.children.length; i++) {
    const res = findCorrespondingNode(rootA.children[i], rootB.children[i], target);
    // 注意这里必须要判断 res 是否存在
    if (res) {
      return res;
    }
  }
}

/**
 * @param {any} data
 * @return {string}
 */
function detectType(data) {
  const res = Object.prototype.toString.call(data).slice(8, -1);
  return res.toLowerCase();
}

/**
 * @param {any} data
 * @return {string}
 */
function stringify(data) {
  const type = typeof data;

  const undefinedOptions = ['undefined', 'function', 'symbol'];
  const stringOptions = ['number', 'boolean'];

  // 处理 undefined
  if (undefinedOptions.includes(type)) {
    return undefined;
  }

  // 处理 null
  if (Number.isNaN(data) || data === Infinity || data === -Infinity || data === null) {
    return "null";
  }

  // 处理 number 和 boolean
  if (stringOptions.includes(type)) {
    return `${data}`;
  }

  // 处理字符串
  if (type === 'string') {
    return `"${data}"`
  }

  // 错误处理
  if (typeof data === 'bigint') {
    throw new Error('stringify 无法序列化 bigint 数据类型');
  }

  // 剩下的就是 object 类型

  // 若存在 toJSON 函数，如 Date()，直接调用
  if (data.toJSON && typeof data.toJSON === 'function') {
    return stringify(data.toJSON());
  }

  // 处理数组
  if (Array.isArray(data)) {
    const result = [];
    data.forEach((item, index) => {
      // undefined、function 以及 symbol 变为 null
      if (undefinedOptions.includes(typeof item)) {
        result[index] = 'null';
      } else {
        result[index] = stringify(item);
      }
    })
    return "[" + result + "]";
  }

  // 处理普通对象
  const result = [];
  Object.keys(data).forEach((key, index) => {
    // 键值不能为 symbol
    // 值忽略 undefined、function 以及 symbol
    if(typeof key !== 'symbol' && !undefinedOptions.includes(typeof data[key])) {
      result.push(`"${key}":${stringify(data[key])}`);
    }
  })
  return `{${result.join(',')}}`;
}

function parse(str) {
  if (str === '' || str[0] === "'") {
    throw new Error();
  }
  // 特殊情况
  if (str === 'null') return null;
  if (str === '{}') return {};
  if (str === '[]') return [];
  // 判断 boolean
  if (str === 'true') return true;
  if (str === 'false') return false;
  // 判断 number
  if(+str === +str) return Number(str);
  // 判断 string
  if(str[0] === '"') {
    return str.slice(1, -1);
  }
  // 判断对象
  if (str[0] === '{') {
    return str.slice(1, -1).split(',').reduce((acc, cur) => {
      const index = cur.indexOf(':');
      const key = cur.slice(0, index);
      const value = cur.slice(index + 1);
      acc[parse(key)] = parse(value);
      return acc;
    }, {})
  }
  // 判断数组
  if (str[0] === '[') {
    return str.slice(1, -1).split(',').map((value) => parse(value));
  }
}

// math.js
export const sum = (a, b) => {
  return a + b;
};

export const mul = (a, b) => {
  return a * b;
};

// foo.js
function foo() {
  console.log("foo");
}

module.exports = {
  foo,
};

import { sum, mul } from "./js/math";
const { foo } = require("./js/foo");

console.log(sum(2, 3));
console.log(mul(2, 3));

foo();

import "../css/title.css";

function setTitle(title) {
  const h1 = document.createElement("h1");
  h1.innerHTML = title;
  h1.className = "title";
  document.body.appendChild(h1);
}

export default setTitle;

import setTitle from "./js/title";

setTitle("hello world");

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

rules: [
  {
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
  },
  {
    test: /\.less$/,
    use: ["style-loader", "css-loader", "less-loader"],
  },
],