bank app项目

目标

一个用来记录收入和支出的APP

技术点

1. HTML templates and route
2. 登录注册表单
3. 调用Fetch API 和渲染数据
4. 状态管理

结合template标签实现路由

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

1. 创建一个路由对象，实现URL路径和template 的映射。
2. 创建更新路由方法， 获取当前URL路径，在路由对象中映射找到对应的template对象，然后把这个template对象拷贝出一个可以渲染在DOM中的对象。然后添加到要渲染的DOM节点中。

   function updateRoute() {
     const path = window.location.pathname;
     const route = routes[path];
   
     const template = document.getElementById(route.templateId);
     const view = template.content.cloneNode(true);
     const app = document.getElementById('app');
     app.innerHTML = '';
     app.appendChild(view);
   }

添加导航

两件事情

1. 更新当前URL
2. 根据新的URL更新展示的template
   use JavaScript and more specifically the history.pushState that allows to update the URL and create a new entry in the browsing history, without reloading the HTML.

   function navigate(path) {
     window.history.pushState({}, path, path);
     updateRoute();
   }

   let’s create a function to get the URL when a link is clicked, and to prevent the browser’s default link behavior:

   function onLinkClick(event) {
     event.preventDefault();
     navigate(event.target.href);
   }

问题解答

1. 为什么需要cloneNode来将template 加到app节点上？

   function updateRoute(templateId) {
     const template = document.getElementById(templateId);
     const view = template.content.cloneNode(true);
     const app = document.getElementById('app');
     app.innerHTML = '';
     app.appendChild(view);
   }

Retrieve the template element in the DOM, for example using document.getElementById.
Clone the template element, using cloneNode.
Attach it to the DOM under a visible element, for example using appendChild.

Why do we need to clone the template before attaching it to the DOM? What do you think would happen if we skipped this step?

解答：
We need to clone the template before attaching it to the DOM because templates are inert and cannot be directly rendered in the DOM. Cloning the template creates a copy of the template that can be rendered in the DOM.

If we skipped the step of cloning the template and directly attached it to the DOM, the template would not be rendered and would remain inert.

Note that we need to use cloneNode(true) to copy the entire subtree of the template.

我们使用cloneNode 拷贝了template整个子树节点，这时就可以被渲染再DOM中了。如果不拷贝的化，template是不会被渲染在DOM中的。

2. 如何处理未知URL的访问？
   可以添加template， 和路由对象中添加 位置的URL路径。

   const routes = {
     '/login': { templateId: 'login' },
     '/dashboard': { templateId: 'dashboard' },
     '*': { templateId: 'not-found' } // default route for unknown paths
   };

更新路由的方法

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path] || routes['*']; // use default route if path not found

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}