JavaScript implémente l'interface des fans

Avec la popularité des réseaux sociaux, avoir un groupe de fans est devenu un objectif pour de nombreuses personnes. Pour certaines plateformes de médias sociaux, disposer d’une interface de fans permet aux utilisateurs de mieux gérer leurs fans. Dans cet article, nous présenterons comment utiliser JavaScript pour implémenter une interface de ventilateur simple.

1. Planification de l'interface

Afin d'obtenir une interface de ventilateur élégante et facile à utiliser, nous devons d'abord planifier la disposition et les fonctions de l'interface. L'interface des fans comprend généralement les fonctions suivantes :

• Afficher les avatars et les surnoms des fans
• Afficher le statut de suivi des fans
• Rechercher et filtrer les fans
• Gérer les fans par lots (comme ne plus suivre)

2. Obtenir la liste des fans

Avant d'implémenter les fonctions ci-dessus, nous devons d'abord obtenir la liste des fans de l'utilisateur. Pour différentes plateformes de médias sociaux, la manière d'obtenir une liste de followers peut être différente. D’une manière générale, cela peut être réalisé à l’aide d’interfaces ou de robots d’exploration.

Exemple de code pour obtenir la liste des fans via l'interface :

function getFansList(userId, pageNum) {
  // 调用接口获取粉丝列表
  const url = `https://example.com/api/getFansList?userId=${userId}&pageNum=${pageNum}`;
  return fetch(url).then(response => response.json());
}

La fonction getFansList dans le code peut obtenir la liste des fans de l'utilisateur correspondant en fonction des paramètres userId et pageNum transmis. Les données renvoyées par l'interface sont généralement un tableau, et chaque élément contient des informations telles que l'avatar, le surnom et le statut de suivi du fan.

3. Rendu de la liste des fans

Après avoir obtenu la liste des fans, nous devons restituer les données sur l'interface. En JavaScript, les opérations DOM peuvent être utilisées pour restituer l'interface.

Exemple de code :

function renderFansList(list) {
  // 获取ul元素
  const ul = document.querySelector('#fansList');
  // 清空ul元素
  ul.innerHTML = '';
  // 遍历粉丝列表，创建li元素并添加到ul元素中
  for (let i = 0; i < list.length; i++) {
    const fan = list[i];
    const li = document.createElement('li');
    li.innerHTML = `
      <img src="${fan.avatar}">
      <div>${fan.nickname}</div>
      <button class="${fan.isFollowing ? 'following' : 'follow'}">${fan.isFollowing ? '已关注' : '关注'}</button>
    `;
    ul.appendChild(li);
  }
}

La fonction renderFansList dans le code utilise la syntaxe de chaîne du modèle ES6 pour restituer des informations telles que l'avatar, le surnom et le statut de suivi du fan dans l'élément li et les ajouter à l'élément ul.

4. Ajouter des fonctions de recherche et de filtrage

Afin de permettre aux utilisateurs de trouver et de filtrer les fans, nous pouvons ajouter des fonctions de recherche et de filtrage. La fonction de recherche peut effectuer une recherche en fonction des surnoms des fans, et la fonction de filtrage peut filtrer en fonction de l'état d'attention des fans.

Exemple de code :

const input = document.querySelector('#searchInput');
const btnFilter = document.querySelectorAll('.filter-btn');

// 添加搜索功能
function searchFans(keyword, list) {
  const result = list.filter(fan => fan.nickname.includes(keyword));
  renderFansList(result);
}

input.addEventListener('input', function(e) {
  const keyword = e.target.value.trim();
  if (keyword) {
    searchFans(keyword, fansList);
  } else {
    renderFansList(fansList);
  }
});

// 添加过滤功能
function filterFans(status, list) {
  const result = list.filter(fan => {
    if (status === 'all') {
      return true;
    } else if (status === 'following') {
      return fan.isFollowing;
    } else {
      return !fan.isFollowing;
    }
  });
  renderFansList(result);
}

for (let i = 0; i < btnFilter.length; i++) {
  btnFilter[i].addEventListener('click', function(e) {
    const status = e.target.dataset.status;
    filterFans(status, fansList);
  });
}

Les fonctions searchFans et filterFans dans le code sont utilisées respectivement pour rechercher et filtrer les fans. Lors de l'ajout de la fonction de recherche, nous écoutons l'événement d'entrée pour obtenir des mots-clés et appelons la fonction searchFans pour filtrer la liste des fans. Lors de l'ajout de la fonction de filtrage, nous écoutons l'événement de clic de filter-btn et filtrons en fonction de différentes valeurs d'attribut d'état des données.

5. Ajouter une fonction d'opération par lots

Enfin, nous devons ajouter une fonction d'opération par lots pour permettre aux utilisateurs de ne plus suivre plusieurs fans à la fois. Afin de réaliser des opérations par lots, nous pouvons ajouter une case à cocher à chaque élément li et ajouter un bouton "Ne plus suivre" en bas de l'interface.

Exemple de code :

const btnBatch = document.querySelector('#batchBtn');

// 添加复选框和批量操作功能
function addCheckbox(list) {
  const ul = document.querySelector('#fansList');
  for (let i = 0; i < list.length; i++) {
    const li = ul.children[i];
    const input = document.createElement('input');
    input.type = 'checkbox';
    input.value = i;
    li.insertBefore(input, li.firstChild);
  }
  // 监听“取消关注”按钮的点击事件
  btnBatch.addEventListener('click', function() {
    const inputs = document.querySelectorAll('input[type="checkbox"]');
    for (let i = 0; i < inputs.length; i++) {
      const input = inputs[i];
      if (input.checked) {
        const fan = list[input.value];
        cancelFollowing(fan.id).then(() => {
          fan.isFollowing = false;
          input.checked = false;
          li = input.parentNode;
          li.querySelector('button').className = 'follow';
          li.querySelector('button').textContent = '关注';
        });
      }
    }
  });
}

La fonction addCheckbox dans le code ajoute une case à cocher à chaque élément li et un bouton "Ne plus suivre" en bas. Une fois l'ajout terminé, nous écoutons l'événement click de btnBatch, parcourons toutes les cases à cocher et si la case est cochée, appelons la fonction CancelFollowing pour annuler l'attention du ventilateur correspondant et mettons à jour l'état de suivi et le texte du bouton du li. élément.

À ce stade, nous avons réalisé une interface de fan simple. Bien qu'il soit compliqué d'implémenter l'interface du ventilateur à l'aide de JavaScript, il n'est pas difficile de l'implémenter. Il suffit de maîtriser les opérations DOM et la programmation asynchrone.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!