我该如何解决这种循环依赖关系？ JavaScript

如何解决我该如何解决这种循环依赖关系？ JavaScript

下一个问题是：我一直在使用GIPHY API创建用于搜索GIF的网页，一切正常，直到必须实现将GIF添加到收藏夹的功能，收藏夹存储在本地存储中并显示出来在使用CSS网格的单独HTML文件中。我可以在/favorites.html之外添加和删除收藏夹而不会出现问题，也可以从该URL内的趋势GIF添加收藏夹，问题是当我需要删除收藏夹并且我在/favorites.html上时，我想要网格从零开始创建，因此用户将看到gif消失。

为此功能，我创建了一个GIFCard类，该类使我可以为卡片创建所有HTML元素，并使用CSS样式添加它们所需的所有看起来不错的类，该类还处理事件，因此它会自动添加事件收听所有按钮。我有一个名为favoritePage.js的文件，该文件定义了一个名为showAllUntilOffset（）的函数，只要用户按下GIF卡的“收藏夹”按钮，并且看到收藏夹，其工作就是再次创建GIF网格，以便对其进行更新，则将使用该函数。我还需要在favoritePage.js中导入GIFCard类以创建Card对象，添加html类并添加事件侦听器。

这是我的网页正常工作的图像，由于循环依赖（我想），当我从favoritePage.js导入“ showAllUntilOffset”时，它只是停止工作。

接下来是我的收藏夹Page.js文件的代码，此处未显示与该问题不相关的GIFCard类，构造函数和其他方法。

favoritesPage.js：

import { GIFCard as Card } from "../entities/GIFCard.js";

import { favoriteGIFs } from "../favorites.js";

import {
  favoritesGrid,favoritesEmpty,favoritesShow,seeMoreFavorites,} from "../dom/favoritesSelectors.js";

import { displayComponent,hideComponent } from "../utils/utils.js";

function createAndAddFavGIFCards(start,end) {
  for (let i = start; i < end; i += 1) {
    const newCard = new Card(
      favoriteGIFs[i].id,favoriteGIFs[i].title,favoriteGIFs[i].username,favoriteGIFs[i].url,favoriteGIFs[i].fixedHeightURL,i,"Favorite GIF"
    );

    if (window.innerWidth >= 1280) {
      favoritesGrid.append(newCard.createCardDesktop());
    } else {
      favoritesGrid.append(newCard.createCardMobile());
    }
  }
}

function loadAndShowFavorites() {
  favoritesGrid.innerHTML = "";

  if (favoriteGIFs.length === 0) {
    displayComponent(favoritesEmpty);
  } else {
    displayComponent(favoritesShow);

    let limit = favoriteGIFs.length >= 12 ? 12 : favoriteGIFs.length;

    if (favoriteGIFs.length > 12) {
      displayComponent(seeMoreFavorites);
    }

    createAndAddFavGIFCards(0,limit);
  }
}

export function showAllUntilOffset() {
  favoritesGrid.innerHTML = "";

  if (favoriteGIFs.length === 0) {
    displayComponent(favoritesEmpty);
    hideComponent(favoritesShow);
  }

  if (favoriteGIFs.length <= 12) {
    hideComponent(seeMoreFavorites);
    offset = favoriteGIFs.length;
  } else if (favoriteGIFs.length < offset) {
    offset -= 1;
  }

  createAndAddFavGIFCards(0,offset);
}

function getOffsetAndUpdateBtn() {
  start = offset;

  if (offset + 12 <= favoriteGIFs.length) {
    offset += 12;
  } else {
    const excess = favoriteGIFs.length - offset;
    offset += excess;
  }

  if (offset === favoriteGIFs.length) {
    hideComponent(seeMoreFavorites);
  }
}

let start;
let offset = 12;

loadAndShowFavorites();

seeMoreFavorites.addEventListener("click",() => {
  getOffsetAndUpdateBtn();

  createAndAddFavGIFCards(start,offset);
});

GIFCard类别：

import { showAllUntilOffset } from "../favorites/favoritesPage.js";

export class GIFCard {
  createCardDesktop() {
    const card = document.createElement("div");
    card.classList.add("card");

    const overlay = document.createElement("div");
    overlay.classList.add("overlay");

    const text = this.createCardInfo();

    const favoriteBtn = this.createCardButton("favorite","card-btn");
    this.favoriteBtn = favoriteBtn;

    const downloadBtn = this.createCardButton("download","card-btn");
    this.downloadBtn = downloadBtn;

    const expandBtn = this.createCardButton("expand","card-btn");
    this.expandBtn = expandBtn;

    const gifImg = this.createCardImg();
    gifImg.classList.add("card-img");

    card.append(overlay,text,favoriteBtn,downloadBtn,expandBtn,gifImg);

    this.htmlDesktopCard = card;

    this.checkAndUpdateFavBtn();
    this.expandGIFDesktopEventListener();
    this.addFavoriteEventListener();

    return card;
  }

  favEventAction() {
    if (!seeingFavorites()) {
      if (!this.isInFavorites()) {
        this.pushToFavorites();
      } else {
        this.removeFromFavorites();
      }
    } else {
      if (!this.isInFavorites()) {
        this.pushToFavorites();

        if (this.type === "Trending GIF") {
          hideComponent(favoritesEmpty);
          displayComponent(favoritesShow);

          if (window.innerWidth >= 1280) {
            favoritesGrid.append(this.createCardDesktop());
          } else {
            favoritesGrid.append(this.createCardMobile());
          }
        }
      } else {
        this.removeFromFavorites();

        if (this.type === "Favorite GIF") {
          showAllUntilOffset();
        }
      }
    }
  }
  
  addFavoriteEventListener() {
    this.favoriteBtn.addEventListener("click",() => {
      this.favEventAction();
    });
  }
}

希望您能为我提供帮助，我已经尝试了所有方法，但无法解决。这是我的第一个JavaScript大项目，因此，如果您可以向我推荐好的做法，我将不胜感激。 非常感谢您。