时间戳

首页 > 解决方案 > 缩小的javascript代码，我不明白，谁能解释一下

javascript - 缩小的javascript代码，我不明白，谁能解释一下

问题描述

我正在尝试通过编写代码来提高自己。我可以理解它的正常状态，没有任何问题。在下面的示例代码中，嵌套了 jquery、值读取、值分配和 if-else 查询。我无法以有意义的可读方式获取代码。任何人都可以以简单的扩展可读格式编写下面的代码吗？

$('.input-required input, .input-required select, .input-required textarea').on('focusin keyup', function () {
  var inputSpan = $(this).parent().find('span').text();
  $(this).val() != inputSpan && '' != $(this).val() && $(this).parent().find('span').addClass('input-style-1-active').removeClass('input-style-1-inactive'),
  '' === $(this).val() && $(this).parent().find('span').removeClass('input-style-1-inactive input-style-1-active')
});

$('.input-required input, .input-required select, .input-required textarea').on('focusout', function () {
  $(this).parent().find('span').text();
  '' === $(this).val() && $(this).parent().find('span').removeClass('input-style-1-inactive input-style-1-active'),
  $(this).parent().find('span').addClass('input-style-1-inactive')
});

第一个代码块的扩展版本正确如下？

$('.input-required input, .input-required select, .input-required textarea').on('focusin keyup', function () {
  var inputSpan = $(this).parent().find('span').text();
  if(($(this).val() != inputSpan) && ('' != $(this).val())){
    $(this).parent().find('span').addClass('input-style-1-active').removeClass('input-style-1-inactive');
  }else{
    $(this).parent().find('span').removeClass('input-style-1-inactive input-style-1-active');
  }
});

标签： javascriptjquerypackeryunminifyminifiedjs

解决方案

不管是谁写的，都没有考虑到维护。它是由某些工具生成的代码吗？

我认为它可以浓缩为

$(':input.input-required').on('input focusout', function (e) {
  let $inputSpan = $(this).parent().find('span'), 
      text = $inputSpan.text(), 
      val = $(this).val();

  if (val && val != text) {
    $inputSpan
      .addClass('input-style-1-active')
      .removeClass('input-style-1-inactive')
  }
  else { 
   $inputSpan
     .removeClass('input-style-1-active')
     .addClass('input-style-1-inactive')
  }
});

使用 toggleClass 可能更具可读性

推荐阅读