将 jQuery 代码更改为 JavaScript

Question

我有jquery 函数来控制具有动态屏幕大小的页面菜单元素。但是这段代码需要jquery lib's。但这会影响我的加载性能。 我不能为jquery 使用async 加载属性，因为这个函数需要这个库。但是，如果我可以更改为纯JavaScript，那么加载性能将会很高。 （渐进式 Web 应用程序） 但是当我真的为这种转换而苦苦挣扎时。有谁知道如何转换成纯JavaScript？

function calcWidth() {
  var navwidth = 0;
  var morewidth = $('#main .more').outerWidth(true);
  $('#main > li:not(.more)').each(function() {
      navwidth += $(this).outerWidth( true );
  });
  var availablespace = $('nav').outerWidth(true) - morewidth;

  if (navwidth > availablespace) {
    var lastItem = $('#main > li:not(.more)').last();
    lastItem.attr('data-width', lastItem.outerWidth(true));
    lastItem.prependTo($('#main .more ul'));
    calcWidth();
  } else {
    var firstMoreElement = $('#main li.more li').first();
    if (navwidth + firstMoreElement.data('width') < availablespace) {
      firstMoreElement.insertBefore($('#main .more'));
    }
  }

  if ($('.more li').length > 0) {
    $('.more').css('display','inline-block');
  } else {
    $('.more').css('display','none');
  }
}
$(window).on('resize load',function(){
  calcWidth();
});

Answer 1

试试这个：

function calcWidth() {
  var navwidth = 0;
  var morewidth = document.querySelectorAll('#main .more')[0].width;
  document.querySelectorAll('#main > li:not(.more)').forEach(function(item,index) {
      navwidth += item.width;
  });
  var availablespace = document.querySelectorAll('nav')[0].width - morewidth;

  if (navwidth > availablespace) {
    var arr = document.querySelectorAll('#main > li:not(.more)');
    var lastItem = arr[arr.length-1];
    lastItem.setAttribute('data-width', lastItem.width);
    document.querySelectorAll('#main .more ul')[0].appendChild(lastItem);
    lastItem.parentNode.removeChild(lastItem);
    calcWidth();
  } else {
    var firstMoreElement = document.querySelectorAll('#main li.more li')[0];
    if (navwidth + firstMoreElement.width < availablespace) {
              firstMoreElement.parentnode.insertBefore(firstMoreElement,document.querySelectorAll('#main .more')[0]);
      firstMoreElement.parentNode.removeChild(firstMoreElement);
    }
  }

 if (document.querySelectorAll('.more li').length > 0) {
      document.querySelectorAll('.more').forEach(function(item,index){item.style.display='inline-block';});
} else {document.querySelectorAll('.more').forEach(function(item,index){item.style.display='none';});
}
}

window.onload=calcWidth;
window.onresize=calcWidth;

如果有效，请回答:)