DFS：深度优先搜索 ​

function dfs(node, nodes = []) {
  if (node) {
    nodes.push(node);
    const children = node.childNodes;
    for(let i = 0, len = children.length; i < len; i++) {
      dfs(children[i], nodes);
    }
  }
  return nodes;
}

const root = document.body; // 根节点为document.body
const nodes = dfs(root); // 存储DOM节点到数组中

function bfs(node) {
  const nodes = [];
  const queue = [];
  queue.push(node);
  while(queue.length > 0) {
    const current = queue.shift();
    nodes.push(current);
    const children = current.childNodes;
    for(let i = 0, len = children.length; i < len; i++) {
      queue.push(children[i]);
    }
  }
  return nodes;
}

const root = document.body; // 根节点为document.body
const nodes = bfs(root); // 存储DOM节点到数组中

import React, { useState } from 'react';
import { Input } from 'antd';
import './App.css';

function App() {
  const [text, setText] = useState('');
  const [highlightedText, setHighlightedText] = useState('');

  // 正则表达式匹配
  function highlight(text, keyword) {
    if (!keyword) {
      return text;
    }
    const pattern = new RegExp(`(${keyword})`, 'gi');
    const matches = text.match(pattern);
    if (!matches) {
      return text;
    }
    return text.split(pattern).map((str, i) =>
      matches.includes(str) ? <mark key={i}>{str}</mark> : str,
    );
  }

  function handleChange(e) {
    const keyword = e.target.value;
    setText(text);
    setHighlightedText(highlight(text, keyword));
  }

  return (
    <div className="App">
      <h1>文字高亮示例</h1>
      <Input placeholder="请输入关键字" onChange={handleChange} />
      <div className="text">
        {highlightedText || '请在上方输入框输入关键字'}
      </div>
    </div>
  );
}

export default App;

function domToJson(node) {
  // 处理元素节点
  if(node.nodeType === Node.ELEMENT_NODE) {
    // 获取所有属性
    const attributes = Array.from(node.attributes);
    const attrs = {};
    for(let i = 0; i < attributes.length; i++) {
      attrs[attributes[i].name] = attributes[i].value;
    }

    // 获取所有子节点
    const children = Array.from(node.childNodes);

    const childrenArr = [];
    for(let i = 0; i < children.length; i++) {
      childrenArr.push(domToJson(children[i]));
    }

    // 构造JSON对象
    const obj = {
      tag: node.tagName,
      attrs,
      children: childrenArr,
    };

    return obj;
  }

  // 处理文本节点
  if(node.nodeType === Node.TEXT_NODE) {
    return node.textContent;
  }

  // 处理注释节点
  if(node.nodeType === Node.COMMENT_NODE) {
    return { comment: node.textContent };
  }
}

// 使用
const domNode = document.querySelector('#example');
const jsonData = domToJson(domNode);
console.log(jsonData);

// Observer类用于存储一个将要被观察的对象及其对应的状态改变函数
class Observer {
  constructor(obj, onStateChanged) {
    this.obj = obj;
    this.onStateChanged = onStateChanged;
  }
}

// Observable类用于将Observer添加到观察者列表中，移除观察者，以及通知观察者状态改变的事件。
class Observable {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(toRemove) {
    this.observers = this.observers.filter(observer => observer !== toRemove);
  }

  notifyObservers() {
    this.observers.forEach(observer => {
      observer.onStateChanged(this);
    });
  }

  setState(newState) {
    this.state = newState;
    this.notifyObservers();
  }
}

const observable = new Observable();

const observer1 = new Observer(observable, () => {
  console.log('Observer 1: State changed to', observable.state);
});

const observer2 = new Observer(observable, () => {
  console.log('Observer 2: State changed to', observable.state);
});

observable.addObserver(observer1);
observable.addObserver(observer2);

observable.setState('new state');

observable.removeObserver(observer2);

observable.setState('another state');

class EventEmitter {
  constructor() {
    // 构造函数中存储了一个对象，用于存储不同的事件及其对应的执行函数。
    this.events = {};
  }

  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  }

  off(eventName, listenerToRemove) {
    if (!this.events[eventName]) return;
    this.events[eventName] = this.events[eventName].filter(listener => listener !== listenerToRemove);
  }

  emit(eventName, ...args) {
    if (!this.events[eventName]) return;
    this.events[eventName].forEach(listener => {
      listener(...args);
    });
  }

  once(eventName, listener) {
    const wrapper = (...args) => {
      listener(...args);
      this.off(eventName, wrapper);
    };
    this.on(eventName, wrapper);
  }
}

const emitter = new EventEmitter();

const listener1 = arg => {
  console.log('Listener 1 called with', arg);
};

const listener2 = arg => {
  console.log('Listener 2 called with', arg);
};

emitter.on('update', listener1);
emitter.on('update', listener2);

emitter.emit('update', { data: 'some data' });

emitter.off('update', listener2);

emitter.emit('update', { data: 'some other data' });

emitter.once('login', user => {
  console.log('User logged in', user);
});

emitter.emit('login', { name: 'John Doe', email: 'johndoe@example.com' }); // Logs 'User logged in { name: "John Doe", email: "johndoe@example.com" }'

class Order {
  constructor(name) {
    this.name = name;
  }
  
  getName() {
    return this.name;
  }
}

// 日志装饰器
class OrderLogDecorator {
  constructor(order) {
    this.order = order;
  }
  
  getName() {
    console.log(`Order has been created with name: ${this.order.getName()}`);
    return this.order.getName();
  }
}

// 使用装饰器
const order = new Order('test');
const orderLogDecorator = new OrderLogDecorator(order);
orderLogDecorator.getName(); // 输出结果：Order has been created with name: test