18歲的 jQuery 依然堅挺？ v3.7.0 最新釋出！

大家好，很高興又見面了，我是"進階前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

前言

jQuery v3.7.0 已釋出，此版本包含衆多内容更新，比如：錯誤修複、新方法和性能改進。 jQuery v3.7.0 放棄了長期使用的選擇器引擎 Sizzle，同時将它移到了 jQuery 核心中，進而有助于為未來 jQuery 版本選擇的進一步變更做好準備。 但這個技術方案确實使得 jQuery 減少了幾個位元組的體積，因為 Sizzle 需要支援比 jQuery 更舊的浏覽器。

像往常一樣，該版本可在 cdn 和 npm 包管理器上下載下傳安裝， 其他第三方 CDN 很快也會內建但可能需要一定的時間。

jQuery v3.7.0 新特性

新方法.uniqueSort()

一些 API，如 .prevAll()以相反的順序傳回元素，這在與包裝方法一起使用時可能會導緻一些令人困惑的行為。 例如，

$elem.prevAll().wrapAll('<p/>');           

上面的代碼會按預期包裝所有元素，但會以相反的順序将這些元素寫入 DOM。 為了防止破壞現有代碼的方式解決這個問題，jQuery 記錄了 .prevAll() 和類似方法傳回倒序集合，這在許多情況下仍然是可取的。 同時 jQuery v3.7.0 還添加了一個新方法，如 .uniqueSort()，該方法與 jQuery.uniqueSort()行為類似。

是以，之前的示例将變為：

$elem.prevAll().uniqueSort().wrapAll('<p/>');           

并且 DOM 中的元素順序将保持不變。

添加了一些無機關的 CSS 屬性

jQuery 3.7.0 添加了對更多 CSS 屬性的支援，這些屬性在沒有機關的情況下不應自動添加“px”。 例如.css('aspect-ratio', 5) 會導緻 CSS aspect-ratio: 5px;，這次更改很多都來自于 React 的啟發。

export const isUnitlessNumber = {
  animationIterationCount: true,
  aspectRatio: true,
  borderImageOutset: true,
  borderImageSlice: true,
  borderImageWidth: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  columns: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridArea: true,
  gridRow: true,
  gridRowEnd: true,
  gridRowSpan: true,
  gridRowStart: true,
  gridColumn: true,
  gridColumnEnd: true,
  gridColumnSpan: true,
  gridColumnStart: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  scale: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,
  // SVG-related properties
  fillOpacity: true,
  floodOpacity: true,
  stopOpacity: true,
  strokeDasharray: true,
  strokeDashoffset: true,
  strokeMiterlimit: true,
  strokeOpacity: true,
  strokeWidth: true,
};           

值得注意的是，jQuery v4.0 将改變處理無機關 CSS 屬性的方式，不是依賴 CSS 屬性清單來避免添加“px”，而是有一個屬性清單，當沒有傳遞任何機關時，肯定要添加“px”， 那樣更具前瞻性。

操作性能提升

jQuery 3.7.0 在使用 .append() 等操作方法時為某些用例帶來了可衡量的性能改進。 當删除不再支援的浏覽器的支援測試時，這意味着根本不再需要運作針對文檔更改的檢查。

從本質上講，這導緻了 0% 到 100% 之間的任何加速。 最顯著的加速出現在一些罕見的情況下，在這些情況下，使用者經常在不同文檔之間切換上下文，可能是通過跨多個 iframe 運作操作。

outerHeight 中的負邊距

jQuery v3.3.0 修複了一個問題，在 .innerWidth() 和 .innerHeight() 的計算中包含滾動條。 但是，該修複沒有考慮負邊距，這意味着 .outerWidth(true) 和 .outerHeight(true) 不再考慮負邊距。 在 3.7.0 中通過将邊距計算與滾動條調整分開來解決了這個問題。

在 IE 中使用不同的原生焦點事件

焦點和 blur 事件可能是 jQuery 必須跨浏覽器處理的最複雜的事件。 jQuery 3.4.0 在修複通過焦點事件傳遞資料的問題時引入了一些小的回歸，在 jQuery 3.7.0 中移除了這些修改。

但是，需要指出 IE 中可能發生的重大變化。 在所有版本的 IE 中，焦點和 blur 事件都是異步觸發的。 在所有其他浏覽器中，這些事件是同步觸發的，IE 中的異步行為導緻了一些問題。 解決方法是更改本機使用的事件。 幸運的是，focusin 和 focusout 在 IE 中是同步運作的，是以現在在 IE 中通過 focusin 模拟焦點，通過 focusout 模拟 blur。 這一更改使 jQuery 能夠依賴 IE 中的同步焦點事件，這解決了很多問題。

參考資料

https://blog.jquery.com/2023/05/11/jquery-3-7-0-released-staying-in-order/