如何拆分过长的jQuery :not选择器以提升代码可读性？

当你直接在过长的:not()选择器字符串内分行时，JavaScript会把换行符当作选择器的一部分，导致jQuery无法正确解析选择器。以下是几种可行的实现方式：

方法一：字符串拼接拆分 #

通过+将长字符串拆分为多行，避免引入无效的换行符：

jQuery('*:not("' +
  '.navbutton, ' +
  '.navbutton span, ' +
  '#menuContainer, ' +
  '#rollmenu, ' +
  '#postersTheme, ' +
  'optgroup, ' +
  'optgroup option, ' +
  '.custom-select, ' +
  '.select-selected, ' +
  '#divSelectedSize, ' +
  '#divSelectedQty, ' +
  '#divSelectedCountry, ' +
  '#divSizeItems, ' +
  '#divQtyItems, ' +
  '#divCountryItems' +
'")').click(function(e) {
    // some code here...
});

方法二：ES6模板字符串+替换换行 #

利用模板字符串支持多行书写的特性，再通过replace移除换行符及多余缩进：

jQuery(`*:not(".navbutton,
  .navbutton span,
  #menuContainer,
  #rollmenu,
  #postersTheme,
  optgroup,
  optgroup option,
  .custom-select,
  .select-selected,
  #divSelectedSize,
  #divSelectedQty,
  #divSelectedCountry,
  #divSizeItems,
  #divQtyItems,
  #divCountryItems")`.replace(/\n\s*/g, '')).click(function(e) {
    // some code here...
});

方法三：数组转字符串（推荐） #

将需要排除的选择器存入数组，通过join(', ')拼接成标准选择器字符串，这种方式最便于后续维护：

const excludedSelectors = [
  '.navbutton',
  '.navbutton span',
  '#menuContainer',
  '#rollmenu',
  '#postersTheme',
  'optgroup',
  'optgroup option',
  '.custom-select',
  '.select-selected',
  '#divSelectedSize',
  '#divSelectedQty',
  '#divSelectedCountry',
  '#divSizeItems',
  '#divQtyItems',
  '#divCountryItems'
];

jQuery(`*:not("${excludedSelectors.join(', ')}")`).click(function(e) {
    // some code here...
});

内容的提问来源于stack exchange，提问作者fafa