refactor: 🚨 优化重构

.xo-config.cjs

@@ -27,7 +27,7 @@ module.exports = {
     "import/extensions": "off",
     "n/file-extension-in-import": "off",
     // 不限制循环方式
-    "unicorn/no-array-for-each": "off",
+    // "unicorn/no-array-for-each": "off",
     // 不限制注释首字母大小写
     "capitalized-comments": "off",
     // 不强制使用 addEventListener

metaHeader.ts

@@ -40,10 +40,10 @@ const resource = {
   dev: {} as Record<string, string | undefined>,
   prod: {} as Record<string, string | undefined>,
 };
-Object.entries(resourceList).forEach(([k, v]) => {
+for (const [k, v] of Object.entries(resourceList)) {
   resource.prod[k] = v.at(0);
   resource.dev[k] = v.at(-1);
-});
+}
 
 /** 根据 index.ts 的注释获取支持站点列表 */
 const getSupportSiteList = () => {
@@ -143,11 +143,11 @@ export const getMetaData = (isDevMode: boolean) => {
     const _metaData: typeof metaData = JSON.parse(JSON.stringify(metaData));
 
     // 将 @resource 中的 / 替换为 |，以兼容 ios 的油猴扩展
-    Object.keys(_metaData.resource).forEach((key) => {
-      if (!key.includes('/')) return;
+    for (const key of Object.keys(_metaData.resource)) {
+      if (!key.includes('/')) continue;
       _metaData.resource[key.replaceAll('/', '|')] = _metaData.resource[key];
       Reflect.deleteProperty(_metaData.resource, key);
-    });
+    }
 
     const metaText = Object.entries(_metaData)
       .filter(([, val]) => val)

src/components/Manga/actions/abreastScroll.ts

@@ -2,11 +2,9 @@ import { createRootMemo, createThrottleMemo } from 'helper/solidJs';
 import { createSignal } from 'solid-js';
 import { clamp } from 'helper';
 
-import classes from '../index.module.css';
 import { store } from '../store';
 
 import { abreastColumnWidth, isAbreastMode } from './memo/common';
-import { rootSize } from './memo/observer';
 
 /** 并排卷轴模式下的全局滚动填充 */
 export const [abreastScrollFill, _setAbreastScrollFill] = createSignal(0);
@@ -28,7 +26,7 @@ export const abreastArea = createThrottleMemo<Area>(
     const position: Area['position'] = {};
     let length = 0;
 
-    const rootHeight = rootSize().height;
+    const rootHeight = store.rootSize.height;
     if (!rootHeight || store.imgList.length === 0)
       return { columns, position, length };
 
@@ -99,7 +97,7 @@ export const abreastArea = createThrottleMemo<Area>(
 
 /** 头尾滚动的限制值 */
 const scrollFillLimit = createRootMemo(
-  () => abreastArea().length - rootSize().height,
+  () => abreastArea().length - store.rootSize.height,
 );
 export const setAbreastScrollFill = (val: number) =>
   _setAbreastScrollFill(clamp(-scrollFillLimit(), val, scrollFillLimit()));
@@ -113,7 +111,7 @@ export const abreastShowColumn = createThrottleMemo(() => {
     start = abreastArea().columns.length - 1;
 
   let end = Math.floor(
-    (store.page.offset.x.px + rootSize().width) / abreastColumnWidth(),
+    (store.page.offset.x.px + store.rootSize.width) / abreastColumnWidth(),
   );
   if (end >= abreastArea().columns.length)
     end = abreastArea().columns.length - 1;
@@ -130,19 +128,17 @@ export const abreastContentWidth = createRootMemo(
 
 /** 并排卷轴模式下的最大滚动距离 */
 export const abreastScrollWidth = createRootMemo(
-  () => abreastContentWidth() - rootSize().width,
+  () => abreastContentWidth() - store.rootSize.width,
 );
 
-/** 卷轴模式下每个图片所在位置的样式 */
+/** 并排卷轴模式下每个图片所在位置的样式 */
 export const imgAreaStyle = createRootMemo(() => {
   if (!isAbreastMode() || store.gridMode) return '';
 
   let styleText = '';
 
-  const selector = (index: number, imgNum = 0) => {
-    const indexText = `${index}${imgNum === 0 ? '' : `-${imgNum}`}`;
-    return `#mangaFlow > .${classes.img}[data-index="${indexText}"]`;
-  };
+  const selector = (index: number, imgNum = 0) =>
+    `#_${index}${imgNum === 0 ? '' : `-${imgNum}`}`;
 
   for (const index of store.imgList.keys()) {
     let imgNum = 0;

src/components/Manga/actions/helper.ts

@@ -1,7 +1,8 @@
 import { scheduleIdle } from '@solid-primitives/scheduled';
+import { onCleanup } from 'solid-js';
 import { difference, byPath } from 'helper';
 
-import { type State, store, setState, refs } from '../store';
+import { type State, store, setState, refs, _setState } from '../store';
 import { type Option } from '../store/option';
 
 /** 触发 onOptionChange */
@@ -29,6 +30,20 @@ export const bindRef =
   (e: T) =>
     Reflect.set(refs, name, e);
 
+export const watchDomSize = <T extends HTMLElement = HTMLElement>(
+  name: keyof State,
+  e: T,
+) => {
+  const resizeObserver = new ResizeObserver(([{ contentRect }]) => {
+    if (!contentRect.width || !contentRect.height) return;
+    const size = { width: contentRect.width, height: contentRect.height };
+    _setState(name as any, size);
+  });
+  resizeObserver.disconnect();
+  resizeObserver.observe(e);
+  onCleanup(() => resizeObserver.disconnect());
+};
+
 /** 将界面恢复到正常状态 */
 export const resetUI = (state: State) => {
   state.show.toolbar = false;

src/components/Manga/actions/hotkeys.ts

@@ -45,12 +45,12 @@ export const hotkeysMap = createRootMemo(() =>
 
 /** 删除指定快捷键 */
 export const delHotkeys = (code: string) => {
-  Object.entries(store.hotkeys).forEach(([name, keys]) => {
+  for (const [name, keys] of Object.entries(store.hotkeys)) {
     const i = keys.indexOf(code);
     if (i === -1) return;
 
     const newKeys = [...store.hotkeys[name]];
     newKeys.splice(i, 1);
     setHotkeys(name, newKeys);
-  });
+  }
 };

src/components/Manga/actions/imageSize.ts

@@ -3,12 +3,7 @@ import { getImgSize, requestIdleCallback, singleThreaded } from 'helper';
 
 import { type State, store, setState } from '../store';
 
-import {
-  rootSize,
-  abreastColumnWidth,
-  isAbreastMode,
-  placeholderSize,
-} from './memo';
+import { abreastColumnWidth, isAbreastMode, placeholderSize } from './memo';
 import { updateImgType } from './imageType';
 
 let height = 0;
@@ -30,8 +25,8 @@ const getImgDisplaySize = (state: State, index: number) => {
   if (!state.option.scrollMode.enabled) return { height, width };
 
   if (isAbreastMode()) return setWidth(abreastColumnWidth());
-  if (state.option.scrollMode.fitToWidth || width > rootSize().width)
-    return setWidth(rootSize().width);
+  if (state.option.scrollMode.fitToWidth || width > state.rootSize.width)
+    return setWidth(state.rootSize.width);
 
   height *= state.option.scrollMode.imgScale;
   width *= state.option.scrollMode.imgScale;
@@ -61,8 +56,8 @@ createEffectOn(
     () => store.option.scrollMode.fitToWidth,
     () => store.option.scrollMode.imgScale,
     () => store.imgList,
+    () => store.rootSize,
     placeholderSize,
-    rootSize,
   ],
   ([isScrollMode]) => {
     if (!isScrollMode) return;

src/components/Manga/actions/imageType.ts

@@ -4,7 +4,6 @@ import { type State, setState, store } from '../store';
 import { isWideImg } from '../handleComicData';
 
 import { resetImgState, updatePageData } from './image';
-import { rootSize } from './memo';
 
 /** 根据比例判断图片类型 */
 export const getImgType = (
@@ -20,7 +19,7 @@ export const getImgType = (
 
 /** 更新图片类型。返回是否修改了图片类型 */
 const _updateImgType = (state: State, draftImg: ComicImg) => {
-  if (!rootSize().width || !rootSize().height) return false;
+  if (!state.rootSize.width || !state.rootSize.height) return false;
   const { type } = draftImg;
   if (!draftImg.width || !draftImg.height) return false;
   draftImg.type = getImgType(draftImg as Required<ComicImg>, state);
@@ -108,7 +107,7 @@ export const updateImgType = (state: State, i: number) => {
 
 // 处理显示窗口的长宽变化
 createEffectOn(
-  rootSize,
+  () => store.rootSize,
   ({ width, height }) =>
     setState((state) => {
       state.proportion.单页比例 = Math.min(width / 2 / height, 1);
@@ -125,5 +124,4 @@ createEffectOn(
       if (isEdited) resetImgState(state);
       updatePageData(state);
     }),
-  { defer: true },
 );

src/components/Manga/actions/memo/observer.ts

@@ -1,25 +1,21 @@
-import { createRoot, createSignal } from 'solid-js';
+import { createSignal } from 'solid-js';
 import { inRange } from 'helper';
 import { createEffectOn, createRootMemo } from 'helper/solidJs';
 
 import { store, _setState } from '../../store';
-import { useDomSize } from '../../hooks/useDomSize';
 
 import { isAbreastMode } from './common';
 
 /** 记录每张图片所在的页面 */
 export const imgPageMap = createRootMemo(() => {
   const map: Record<number, number> = {};
   for (let i = 0; i < store.pageList.length; i++) {
-    store.pageList[i].forEach((imgIndex) => {
+    for (const imgIndex of store.pageList[i])
       if (imgIndex !== -1) map[imgIndex] = i;
-    });
   }
 
   return map;
 });
-export const [rootSize, watchRootSize] = useDomSize();
-export const [flowSize, watchFlowSize] = useDomSize();
 
 const [_scrollTop, setScrollTop] = createSignal(0);
 /** 卷轴模式下的滚动距离 */
@@ -35,6 +31,7 @@ export const bindScrollTop = (dom: HTMLElement) => {
 };
 
 // 窗口宽度小于800像素时，标记为移动端
-createEffectOn(rootSize, ({ width }) =>
-  _setState('isMobile', inRange(1, width, 800)),
+createEffectOn(
+  () => store.rootSize,
+  ({ width }) => _setState('isMobile', inRange(1, width, 800)),
 );

src/components/Manga/actions/operate.ts

@@ -7,7 +7,6 @@ import {
   abreastColumnWidth,
   isAbreastMode,
   isScrollMode,
-  rootSize,
   scrollTop,
 } from './memo';
 import {
@@ -48,7 +47,9 @@ export const handleMouseDown: EventHandler['on:mousedown'] = (e) => {
 /** 卷轴模式下的页面滚动 */
 const scrollModeScrollPage = (dir: 'next' | 'prev') => {
   if (!store.show.endPage) {
-    scrollTo(scrollTop() + rootSize().height * 0.8 * (dir === 'next' ? 1 : -1));
+    scrollTo(
+      scrollTop() + store.rootSize.height * 0.8 * (dir === 'next' ? 1 : -1),
+    );
     _setState('flag', 'scrollLock', true);
   }
 
@@ -131,10 +132,14 @@ export const handleKeyDown = (e: KeyboardEvent) => {
   if (isAbreastMode()) {
     switch (hotkeysMap()[code]) {
       case 'scroll_up':
-        setAbreastScrollFill(abreastScrollFill() - rootSize().height * 0.02);
+        setAbreastScrollFill(
+          abreastScrollFill() - store.rootSize.height * 0.02,
+        );
         return;
       case 'scroll_down':
-        setAbreastScrollFill(abreastScrollFill() + rootSize().height * 0.02);
+        setAbreastScrollFill(
+          abreastScrollFill() + store.rootSize.height * 0.02,
+        );
         return;
 
       case 'scroll_left':
@@ -143,9 +148,9 @@ export const handleKeyDown = (e: KeyboardEvent) => {
         return scrollTo(scrollProgress() - abreastColumnWidth());
 
       case 'page_up':
-        return scrollTo(scrollProgress() - rootSize().width * 0.8);
+        return scrollTo(scrollProgress() - store.rootSize.width * 0.8);
       case 'page_down':
-        return scrollTo(scrollProgress() + rootSize().width * 0.8);
+        return scrollTo(scrollProgress() + store.rootSize.width * 0.8);
 
       case 'jump_to_home':
         return scrollTo(0);

src/components/Manga/actions/pointer.ts

@@ -6,7 +6,7 @@ import { type UseDrag } from '../hooks/useDrag';
 import { store, setState, refs } from '../store';
 
 import { resetUI } from './helper';
-import { imgPageMap, rootSize } from './memo';
+import { imgPageMap } from './memo';
 import { resetPage } from './show';
 import { zoom } from './zoom';
 import { turnPageFn, turnPageAnimation, turnPage } from './turnPage';
@@ -223,10 +223,10 @@ export const handleTrackpadWheel = (e: WheelEvent) => {
     }
 
     // 滚动过一页时
-    if (dy <= -rootSize().height) {
-      if (turnPageFn(state, 'next')) dy += rootSize().height;
-    } else if (dy >= rootSize().height && turnPageFn(state, 'prev'))
-      dy -= rootSize().height;
+    if (dy <= -state.rootSize.height) {
+      if (turnPageFn(state, 'next')) dy += state.rootSize.height;
+    } else if (dy >= state.rootSize.height && turnPageFn(state, 'prev'))
+      dy -= state.rootSize.height;
 
     state.page.vertical = true;
     state.isDragMode = true;

src/components/Manga/actions/renderPage.ts

@@ -5,7 +5,7 @@ import { type State, setState, store, _setState } from '../store';
 
 import { abreastArea, abreastShowColumn } from './abreastScroll';
 import { scrollLength } from './scroll';
-import { rootSize, scrollTop } from './memo/observer';
+import { scrollTop } from './memo/observer';
 import { contentHeight, imgTopList } from './imageSize';
 
 /** 找到普通卷轴模式下指定高度上的图片 */
@@ -56,9 +56,9 @@ export const updateShowRange = (state: State) => {
   } else {
     // 普通卷轴模式
     const top = scrollTop();
-    const bottom = scrollTop() + rootSize().height;
-    const renderTop = top - rootSize().height;
-    const rednerBottom = bottom + rootSize().height;
+    const bottom = scrollTop() + state.rootSize.height;
+    const renderTop = top - state.rootSize.height;
+    const rednerBottom = bottom + state.rootSize.height;
 
     const renderTopImg = findTopImg(renderTop);
     const topImg = findTopImg(top, renderTopImg);
@@ -77,9 +77,9 @@ createEffectOn(
     () => store.option.scrollMode.enabled,
     () => store.activePageIndex,
     () => store.option.scrollMode.abreastMode,
+    () => store.rootSize,
     abreastShowColumn,
     scrollTop,
-    rootSize,
   ],
   throttle(() => setState(updateShowRange)),
   // 两种卷轴模式下都可以通过在每次滚动后记录

src/components/Manga/actions/scroll.ts

@@ -10,7 +10,7 @@ import {
 } from './abreastScroll';
 import { isScrollMode, isAbreastMode, abreastColumnWidth } from './memo/common';
 import { contentHeight, imgTopList } from './imageSize';
-import { scrollTop, rootSize } from './memo/observer';
+import { scrollTop } from './memo/observer';
 import { setOption } from './helper';
 
 /** 滚动内容的长度 */
@@ -35,8 +35,8 @@ export const scrollPercentage = createRootMemo(
 /** 滚动条滑块长度 */
 export const sliderHeight = createRootMemo(() => {
   let itemLength = 1;
-  if (isScrollMode()) itemLength = rootSize().height;
-  if (isAbreastMode()) itemLength = rootSize().width;
+  if (isScrollMode()) itemLength = store.rootSize.height;
+  if (isAbreastMode()) itemLength = store.rootSize.width;
   return itemLength / scrollLength();
 });