在Web开发中，经常需要根据用户的交互动态地改变页面内容。例如，在一个餐厅网站中，用户点击不同的菜单选项（如“首页”、“关于”、“菜单”）时，页面应该显示相应的内容。一种实现方案是使用事件监听器和条件渲染，根据用户点击的菜单选项，有条件地渲染不同的页面内容。

核心思想：条件渲染

条件渲染的核心在于，根据某种条件（例如用户点击的菜单选项），决定渲染哪个函数。每个页面（“首页”、“关于”、“菜单”）都应该有自己独立的函数，负责渲染该页面所需的所有元素。当用户点击某个菜单选项时，就调用相应的函数来渲染页面。

实现步骤

1. 创建页面函数： 为每个页面创建一个函数，例如 home()、about()、menu()。每个函数负责创建和渲染该页面所需的所有HTML元素。

   function home() {
     const content = document.getElementById('content');
     content.innerHTML = '<h1>Welcome to our restaurant!</h1><p>Delicious food awaits you.</p>';
   }
   
   function about() {
     const content = document.getElementById('content');
     content.innerHTML = '<h1>About Us</h1><p>We are a family-owned restaurant...</p>';
   }
   
   function menu() {
     const content = document.getElementById('content');
     content.innerHTML = '<h1>Our Menu</h1><ul><li>Pizza</li><li>Pasta</li><li>Salad</li></ul>';
   }

2. 创建事件监听器： 为每个菜单选项添加事件监听器，监听用户的点击事件。当用户点击某个菜单选项时，调用相应的页面函数。

   

   蓝湖代码转vue2.0+element-ui

   将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

   下载

   const homeLink = document.getElementById('home-link');
   const aboutLink = document.getElementById('about-link');
   const menuLink = document.getElementById('menu-link');
   
   homeLink.addEventListener('click', () => {
     clearPage();
     home();
   });
   
   aboutLink.addEventListener('click', () => {
     clearPage();
     about();
   });
   
   menuLink.addEventListener('click', () => {
     clearPage();
     menu();
   });

3. 创建 clearPage() 函数： 在渲染新的页面内容之前，需要先清除页面上已有的内容。创建一个 clearPage() 函数，用于删除所有元素并准备页面以渲染来自其他函数的内容。

   function clearPage() {
     const content = document.getElementById('content');
     while (content.firstChild) {
       content.removeChild(content.firstChild);
     }
   }

4. 初始页面加载： 在页面加载时，默认渲染“首页”内容。

   home(); // 页面加载时默认显示首页

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Restaurant Website</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#" id="home-link">Home</a></li>
        <li><a href="#" id="about-link">About</a></li>
        <li><a href="#" id="menu-link">Menu</a></li>
      </ul>
    </nav>
  </header>
  <div id="content">
    <!-- Content will be dynamically loaded here -->
  </div>

  <script>
    function home() {
      const content = document.getElementById('content');
      content.innerHTML = '<h1>Welcome to our restaurant!</h1><p>Delicious food awaits you.</p>';
    }

    function about() {
      const content = document.getElementById('content');
      content.innerHTML = '<h1>About Us</h1><p>We are a family-owned restaurant...</p>';
    }

    function menu() {
      const content = document.getElementById('content');
      content.innerHTML = '<h1>Our Menu</h1><ul><li>Pizza</li><li>Pasta</li><li>Salad</li></ul>';
    }

    function clearPage() {
      const content = document.getElementById('content');
      while (content.firstChild) {
        content.removeChild(content.firstChild);
      }
    }

    const homeLink = document.getElementById('home-link');
    const aboutLink = document.getElementById('about-link');
    const menuLink = document.getElementById('menu-link');

    homeLink.addEventListener('click', () => {
      clearPage();
      home();
    });

    aboutLink.addEventListener('click', () => {
      clearPage();
      about();
    });

    menuLink.addEventListener('click', () => {
      clearPage();
      menu();
    });

    home(); // 页面加载时默认显示首页
  </script>
</body>
</html>

注意事项

• 性能优化： 对于更复杂的应用，频繁地删除和重新创建DOM元素可能会影响性能。可以考虑使用虚拟DOM或模板引擎来优化渲染过程。
• 状态管理： 如果应用需要维护更复杂的状态，可以考虑使用状态管理库，如Redux或Vuex。
• 模块化： 将代码分解成更小的模块，可以提高代码的可维护性和可重用性。

总结

通过使用事件监听器和条件渲染，可以实现动态替换页面内容的功能。这种方法简单易懂，适用于小型项目。对于更复杂的应用，需要考虑性能优化、状态管理和模块化等问题。