第十五天挑战(本地存储菜谱)

地址：https://javascript30.com/

所有内容均上传至gitee，答案不唯一，仅代表本人思路

中文详解：https://github.com/soyaine/JavaScript30

该详解是Soyaine及其团队整理编撰的，是对源代码的详解，强烈推荐大家观看学习!!!

本人gitee：https://gitee.com/thats-all-right-ha-ha/30-days—js-challenge

效果

• 样式分析

  • 组件整体居中，组件内部由头部，菜单主体，菜单添加模块组成

• 逻辑分析

  • 在输入框输入菜名，点击添加后，菜名在菜单主体内显示

  • 输入框非空限定

  • 点击菜单左侧的多选框，出现选中样式

  • 菜单保存在本地，当页面刷新或关闭后，菜单内容和选中状态不会被重置

本人代码及思路分析

仅提供布局及逻辑代码

结构：

<div class="wrapper">
  <h2>LOCAL TAPAS</h2>
  <p></p>
  <ul class="plates">
    <li>Loading Tapas...</li>
  </ul>
  <form class="add-items">
    <input type="text" name="item" placeholder="Item Name" required>
    <input type="submit" value="+ Add Item">
  </form>
</div>

逻辑：

//获取元素
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const submit = document.querySelector('input[type="submit"]')
const items = JSON.parse(localStorage.getItem('Tapas')) || [];
//页面添加元素 + 本地存储
function addItem(e) {
  e.preventDefault()
  const text = document.querySelector('input[type="text"]').value
  console.log(text)
  let content = {
    text,
    isDone: false
  }
  template(content, items.length)
  items.push(content)
  localStorage.setItem('Tapas', JSON.stringify(items))
  this.reset()
}
//模板函数
function template(dom, index) {
  let check = ''
  if (dom.isDone) check = 'checked'
  itemsList.innerHTML += `<li>
        <input type='checkbox' data-index=${index} id='item${index}'  ${check}>
        <label for='item${index}'>${dom.text} </label>
        </li>`
}
//页面初始化
function getItem() {
  items.forEach((item, index) => {
    template(item, index)
  })
}
getItem()
//事件标记，动态存储
function check(e) {
  const checkbox = document.querySelectorAll('input[type="checkbox"]')
  const index = e.target.dataset.index 
  console.log(index) 
  if(index || index === 0){
    items[index].isDone = !items[index].isDone
    localStorage.setItem('Tapas',JSON.stringify(items))
  }
}
//事件监听
addItems.addEventListener('submit', addItem)
itemsList.addEventListener('click', check)

分析：

• **整体思路：**当提交事件执行的时候，使用localStorage对输入的内容和内容状态进行本地存储，在页面初始化的时候获取本地存储的数据并进行渲染，

• 具体实现：

  • 首先选定需要监听和修改的元素
  • addItem：
    • 进行提交的时候会对默认对页面进行刷新，先使用e.preventDefault阻止默认事件
    • 获取输入框内的内容，并初始化需要添加的数据，并将数据添加到模板中，通过模板添加到页面中
    • 将数据添加到数组中，再将该数组添加到本地，最后重置表单内容
  • template：构建字符串模板，并初始化元素属性(data-index & item)和选中状态
  • getItem:页面刷新或打开时，获取本地数据，并将他们通过template函数渲染到页面中
  • check:
    • 获取页面中所有的复选框
    • 这里监听的是itemsList父级元素，target会返回父级元素中所包含的所有元素，这里会返回两个元素，分别是label和input
    • 事先定义了data-index作为页面中添加元素的下标，并对其进行了唯一标识
    • 首先判断其是否携带data-index属性来判断其是否是input标签，如果存在那么便从checkbox集合中通过index寻找出对应的被点击的input元素，并对其状态进行动态修改，修改后保存到本地

• 弊端分析(与官方方法对比)：

  • DOM操作频繁： 在模板函数中，每次添加一个待办事项都会重新设置itemsList的innerHTML，这样会引起DOM操作频繁，效率较低。
  • 事件委托不足： 目前勾选完成待办事项的事件监听是直接添加在每个checkbox上的，当待办事项较多时，会导致事件监听器过多，影响性能。应该考虑使用事件委托，将事件监听器添加到父元素上，然后通过事件冒泡来处理。
  • **页面初始化渲染性能开销大：**页面初始化渲染的时候使用的是forEach方法，该方法频繁对页面元素进行增加，消耗性能

官方代码

官方代码仅代表该案例原作者思路，不唯一

结构

<div class="wrapper">
  <h2>LOCAL TAPAS</h2>
  <p></p>
  <ul class="plates">
    <li>Loading Tapas...</li>
  </ul>
  <form class="add-items">
    <input type="text" name="item" placeholder="Item Name" required>
    <input type="submit" value="+ Add Item">
  </form>
</div>

逻辑

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];

function addItem(e) {
  e.preventDefault();
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    text,
    done: false
  };
  items.push(item);
  populateList(items, itemsList);
  localStorage.setItem('items', JSON.stringify(items));
  this.reset();
}

function populateList(plates = [], platesList) {
  platesList.innerHTML = plates.map((plate, i) => {
    return `
        <li>
          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
          <label for="item${i}">${plate.text}</label>
        </li>
      `;
  }).join('');
}

function toggleDone(e) {
  if (!e.target.matches('input')) return; // skip this unless it's an input
  const el = e.target;
  const index = el.dataset.index;
  items[index].done = !items[index].done;
  localStorage.setItem('items', JSON.stringify(items));
  populateList(items, itemsList);
}

addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);

populateList(items, itemsList);

分析

仅代表本人对该代码的分析

建议直接去看Soyaine的中文详解

• **整体思路：**整体写法与上述保持一致

• 具体实现：

  • addItem：与上述相比，这里是通过name属性来选择元素
  • toggleDone：这里使用正则的方法对父级元素内的子元素进行过滤，保留input元素
  • populateList：这里使用map方法对添加元素进行整合，最后整体添加到页面中

• 优点：

  • 通过map方法一次性生成所有待办事项的HTML字符串，然后一次性插入到DOM中，减少了浏览器的重绘和重排次数，但在处理大量数据时仍有优化空间。
  • 第二段代码通过在列表的父元素上监听点击事件，使用了事件委托的策略，这样做可以减少事件监听器的数量，提高性能，尤其是在待办事项数量较多时。

​