如何将jQuery代码转换为JavaScript？

Question

jQuery:

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $('#container'),
        top = $('#top-panel'),
        handle = $('#drag');

    handle.on('mousedown', function (e) {
        isResizing = true;
        lastDownX = e.clientY;
    });

    $(document).on('mousemove', function (e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing) 
            return;
        var offsetRight = top.height() + (e.clientY - container.offset().top);

        top.css('top', offsetRight);
    }).on('mouseup', function (e) {
        // stop resizing
        isResizing = false;
    });
});

JavaScript:

var isResizing = false
// eslint-disable-next-line no-unused-vars
var lastDownX = 0

function resizeVerticallyInit () {
  var top = document.querySelector('#topology-container')
  var handle = document.querySelector('#drag')

  handle.addEventListener('mousedown', function (e) {
    isResizing = true
    lastDownX = e.clientY
  })

  document.addEventListener('mousemove', function (e) {
    // we don't want to do anything if we aren't resizing.
    if (!isResizing) {
      return
    }
    var offsetRight = top.height() + 20

    document.querySelector('#topology-container').style.top = offsetRight
  })

  document.addEventListener('mouseup', function (e) {
    // stop resizing
    isResizing = false
  })
}

mounted () {
  ...
  resizeVerticallyInit()
}

如您所见，我在mounted（）生命周期方法中使用vue.js组件中的JavaScript函数。

我试过转换，但没有用。

首先我要说:

// eslint-disable-next-line no-unused-vars
var lastDownX = 0

我不知道为什么它抱怨lastDownX没有使用。

第二个是错误:

"[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventListener' of null"

它在抱怨:

  handle.addEventListener('mousedown', function (e) {
    isResizing = true
    lastDownX = e.clientY
  })

有人能帮忙转换吗？

Answer 1

如果元素不在DOM中，Document.QuerySelector方法的第一个将返回NULL。 不能对NULL调用AddEventListener。 在jquery中，它能够工作，因为jquery构造了一个单独的对象（称为jquery对象）。 jQuery对象看起来有点像这样:

{
  0: {...} // HTMLElement reference
  length: 1
} // jQuery object

该对象公开了一个jQuery API，该API具有用于事件处理的on方法（无论是否存在实际的DOM元素都可用）。 这是jQuery的一个优点（也是一个缺点）。

而查询选择器方法则返回HtmlElement。 如果该元素在DOM中不存在，则返回null。

现在假设元素将在一定时间后出现在DOM中，您可以做两件事:

1. 等待元素出现在DOM中，一旦它可用，就添加一个侦听器函数。
2. 在JavaScript中使用live事件（事件委派）。

我将向您展示第二种方法:

null

setTimeout(() => {
  document.querySelector('#container').innerHTML = `<button id="btn">Click</button>`;
}, 3000);

document.addEventListener('click', (e) => {
  if (e.target.id === 'btn') {
    alert('Click works!');
  }
});

<div id="container">
  A button will appear after 3 seconds. However, click event would still work.
</div>