按要求完成题目 - Githubissues

lgwebdream commented 4 years ago

/* 
  a)在不使用vue、react的前提下写代码解决一下问题
    一个List页面上，含有1000个条目的待办列表，现其中100项在同一时间达到了过期时间，需要在对应项的text-node里添加“已过期”文字。需要尽可能减少dom重绘次数以提升性能。
  b)尝试使用vue或react解决上述问题
*/

lgwebdream commented 4 years ago

扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。

shuaidada commented 3 years ago

111

Kisthanny commented 4 months ago

<html>
    <head>
        <script src="./index.js" defer></script>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    </head>
    <body>
        <button>update</button>
        <ul></ul>
    </body>
</html>

index.js

// 初始化待办列表
const todoList = Array(1000)
  .fill(undefined)
  .map((e, i) => {
    return {
      id: i,
      text: `todo-${i}`,
      done: false,
    };
  });

// 随机将指定数量的代办变为过期
function randomDone(number) {
  const todoCount = todoList.filter((e) => !e.done).length;
  if (!number || !todoCount) {
    return;
  }
  const randomId = Math.floor(Math.random() * 1000);
  if (todoList[randomId].done) {
    randomDone(number);
  } else {
    todoList[randomId].done = true;
    randomDone(number - 1);
  }
}

// 渲染1000个代办
function renderTodoList() {
  const ul = document.querySelector("ul");
  const frag = document.createDocumentFragment();
  todoList.forEach((item) => {
    const li = document.createElement("li");
    li.textContent = `${item.text}${item.done ? "-已过期" : ""}`;
    frag.append(li);
  });
  // 先清空容器
  ul.innerHTML = ""
  ul.append(frag);
}

renderTodoList();

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  randomDone(100);
  renderTodoList();
});

vue

<template>
    <ul>
        <li v-for="item in todoList" :key="item.id">{{ item.text }}{{ item.done ? "-已过期" : "" }}</li>
    </ul>
</template>
<script>
export default{
    data(){
        return {
            todoList:[]
        }
    },
}

lgwebdream / FE-Interview

按要求完成题目 #848

扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。

index.js

vue