为什么在渲染业务写完要立刻调用函数，只在删除或增加业务模块渲染页面（调用函数）不可以吗？

Question

问题在54行：为什么在渲染业务写完要立刻调用函数，只在删除或增加业务模块渲染页面（调用函数）不可以吗？求小伙伴们解答~😊

<script>
    // 参考数据
    const initData = [
      {
        stuId: 1,
        uname: '欧阳霸天',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海',
        time: '2022/10/09/ 23:32:43'
      }
    ]
    //1.存储本地数据，要注释掉，否则会覆盖之前的数据
    // localStorage.setItem('data', JSON.stringify(initData))
    // const data = localStorage.setItem('data')
    // 2.将存储的数据转变为数组对象，arr渲染时使用
    const arr = JSON.parse(localStorage.getItem('data')) || []
    // console.log( typeof arr);
    //获取tbody元素
    const tbody = document.querySelector('tbody')


    // 渲染业务
    //3.渲染模块函数
    function render() {
      // 3.1map遍历数组，有几个对象就生成几个tr
      const trArr = arr.map(function (ele, index) {//ele数组元素，index下标/索引号
        //返回的是tr数组，map的作用是遍历，处理数据，返回的是新数组
        return `
        <tr>
          <td>${ele.stuId}</td>
          <td>${ele.uname}</td>
          <td>${ele.age}</td>
          <td>${ele.gender}</td>
          <td>${ele.salary}</td>
          <td>${ele.city}</td>
          <td>${ele.time}</td>
          <td>
            <a href="javascript:" data-id= "${index}">删除</a>
          </td>
        </tr> 
        `
      })
      // console.log(trArr)
      //3.2将遍历的数组追加给tbody,将数组转变为字符串再追加
      tbody.innerHTML = trArr.join('')
      document.querySelector('.num span').innerHTML = `
     ${arr.length}
      `
    }
 // 调用函数😯why?
render()



    // 新增业务
    // 4.录入模块
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    // 4.1为info注册提交事件
    info.addEventListener('submit', function (e) {
      // 4.1.1阻止默认行为：跳转
      e.preventDefault()
      // 4.1.2非空判断.即如果是判断条件为真，则执行if里的内容
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 4.1.3将提交的内容追加到数组里
      arr.push({
        // 当arr为空时，为假，这时候要执行冒号后面的内容
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
        time: new Date().toLocaleString()
      })
      // 4.1.4渲染页面。数组发生变化时重新渲染页面
      render()
      // 4.1.5页面渲染结束后，重置表单
      this.reset()
      // 4.1.6重新存储本地数据，相当于更新
      localStorage.setItem('data', JSON.stringify(arr))
    })


    //删除业务
    // 5.删除模块
    tbody.addEventListener('click', function (e) {
      // if (e.target.tagName === 'A') {
      //   alert('您确定删除此条数据吗?')
      // }
      if (confirm('您确定要删除这条数据吗？')) {
        arr.splice(e.target.dataset.id, 1)
        // 删除之后，数组发生变化，重新渲染页面
        render()
        // 更新本地存储数据
        localStorage.setItem('data', JSON.stringify(arr))
      }
    })
  </script>

Answer 1

在渲染业务结束后，立刻调用渲染函数的原因是为了确保页面初始化时就能够显示出正确的数据，否则页面会一开始为空。另外，在删除或增加业务模块时调用函数也是必要的，因为这些操作会改变数据，需要重新渲染页面以反映出这些变化。如果不调用函数，页面的显示就不会更新，这显然不符合预期。