写点儿东西

Halo


# 可拖拽 div

## HTML

```html
<div id="box"></div>
```

## CSS

```css
#box {
  background-color: greenyellow;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translate(100px, 100px);
}
```

## JS

```javascript
let isDrag = false;
const prevPos = { x: 0, y: 0 };

box.addEventListener('mousedown', (event) => {
  isDrag = true;
  prevPos.x = event.clientX;
  prevPos.y = event.clientY;
});

document.addEventListener('mousemove', (event) => {
  if (isDrag) {
    const currentMouseX = event.clientX;
    const currentMouseY = event.clientY;
    const moveX = currentMouseX - prevPos.x;
    const moveY = currentMouseY - prevPos.y;
    // box position left/top/width/height
    const { left, top, width, height } = box.getBoundingClientRect();
    box.style.transform = `translate(${left + moveX}px, ${top + moveY}px)`;
    prevPos.x = currentMouseX;
    prevPos.y = currentMouseY;
  }
});

document.addEventListener('mouseup', (event) => {
  isDrag = false;
});
```


Drag Div


# 事件委托

## version 1

```javascript
<ul id="ul">
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
</ul>;

ul.addEventListener('click', (event) => {
  if (event.target.nodeName.toLowerCase() === 'li') {
    console.log(event.target.innerHTML);
  }
});
```

## version 2

```javascript
<ul id="ul2">
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
</ul>;

function delegate(element, eventType, selector, fn) {
  element.addEventListener(eventType, (e) => {
    let el = e.target;
    while (!el.matches(selector)) {
      if (element === el) {
        el = null;
        break;
      }
      el = el.parentNode;
    }
    el && fn.call(el, e, el);
  });
}
delegate(ul2, 'click', 'li', (event, el) => {
  console.log(event.target.innerHTML);
});
```


Delegate


# 封装 EventHub

```javascript
class EventHub {
  #events = {};
  // 订阅
  on(eventName, fn) {
    this.#events[eventName] = this.#events[eventName] || [];
    this.#events[eventName].push(fn);
  }
  // 发布
  emit(eventName, data) {
    if (!this.#events[eventName]) return;
    this.#events[eventName].map((fn) => fn.call(undefined, data));
  }
  off(eventName, fn) {
    if (!this.#events[eventName]) return;
    const index = this.#events[eventName].indexOf(fn);
    if (index < 0) return;
    this.#events[eventName].splice(index, 1);
  }
  once(eventName, fn) {
    const onceFn = (data) => {
      fn(data);
      this.off(eventName, onceFn);
    };
    this.on(eventName, onceFn);
  }
}
```

# test

```javascript
const eventHub = new EventHub();

const fn = (data) => console.log('click1', data);
eventHub.on('click', fn);
eventHub.on('click', (data) => console.log('click2', data));

eventHub.once('click', (data) => console.log('once', data));

eventHub.emit('click', 'hello');
eventHub.off('click', fn);
eventHub.emit('click', 'world');

// click1 hello
// click2 hello
// once hello
// click2 world
```


EventHub


- 防抖：input 输入停止 1000ms 后触发
- 节流：send 频繁点击，在 1000ms 内只触发一次

![dog](https://raw.githubusercontent.com/oh-mine/oh-mine.cn/main/posts/images/3.jpg)

```javascript
<input id=msg value="hello">
<button id=btn>send</button>

const click = (event) => { console.log("send msg: ", msg.value) }
const input = (event) => { console.log("value: " + msg.value) }

msg.addEventListener('click', throttle(click, 1000))
btn.addEventListener('input', debounce(input, 1000))
```

# throttle

```javascript
const throttle = (fn, delay) => {
  let timer = null;

  return function () {
    const ctx = this;
    const args = arguments;

    if (!timer) {
      fn.apply(ctx, args);
      timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
      }, delay);
    }
  };
};
```

# debounce

```javascript
const debounce = (fn, delay) => {
  let timer = null;

  return function () {
    const ctx = this;
    const args = arguments;

    if (timer) {
      clearTimeout(timer);
      timer = null;
      return;
    }

    timer = setTimeout(() => {
      fn.apply(ctx, args);
      clearTimeout(timer);
      timer = null;
    }, delay);
  };
};
```


Throttle(节流)、Debouce(防抖)


# 居中显示

## img 标签

![dog](https://raw.githubusercontent.com/oh-mine/oh-mine.cn/main/posts/images/1.jpg)

```html
<img width="300" src="xxx.jpg" />
<img class="img1" src="xxx.jpg" />
<img class="img2" src="xxx.jpg" />
```

```css
.img1 {
  width: 180px;
  height: 300px;
  object-fit: cover;
}

.img2 {
  width: 300px;
  height: 200px;
  object-fit: cover;
}
```

## background-image 属性

![cat](https://raw.githubusercontent.com/oh-mine/oh-mine.cn/main/posts/images/2.jpg)

```html
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
```

```css
div {
  display: inline-block;
  background: url(xxx.jpg) no-repeat;
}

.box1 {
  width: 300px;
  height: 225px;
  background-size: 100% auto;
}

.box2 {
  width: 180px;
  height: 225px;
  background-position: center;
  background-size: cover;
}

.box3 {
  width: 300px;
  height: 200px;
  background-position: center;
  background-size: cover;
}
```

# 铺满显示

```css
background-image: url(xxx.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
```


写点儿东西

Drag Div

Delegate

EventHub

Throttle(节流)、Debouce(防抖)

图片的显示问题

关于我