【金秋打卡】第24天 从函数到函数式编程之路

课程名称：破解JavaScript高级玩法
课程章节：第8章 被我们忽视的BOM
主讲老师：Cloud

课程内容：

今天学习的内容包括：
8-6 实战：从0到1手写一个简易Router——使用Web Components模式和history的pushState/onpopState/replaceState实现简易Router。
8-7 综合训练——回顾本章学习知识点。

课程收获：

一个简单的Router应该具备哪些功能

• 容器（组件）
• 路由
• 业务组件 & 链接组件

不借助第三方工具库，如何实现路由呢

• 如何实现自定义的标签， 比如 vue的, react的
• 如何实现业务组件
• 如何动态切换路由

实现思路

• 自定义标签： web components
• 组件： 也可以使用Web Components。还得支持动态加载，远程去加载一个html文件，里面的结构如下， 支持模板（template）， 脚本

CustomLink(c-link)

• pushState更新访问历史记录

CustomRoute(c-route)

• 主要是提供配置信息，对外提供getData的方法

CustomRouter(c-router)

• 主要是收集路由信息，监听路由信息的变化，然后加载对应的组件。

CustomComponent(c-component)

• 实现组件，动态加载远程的html，并解析。

动态加载组件 loadComponent

• 动态加载远程的html并缓存

重写history.pushState

• 让其触发自定义事件，达到更换路由的目的

今天 学习了 实战：从0到1手写一个简易Router。很早以前有使用过js的路由效果组件，当时觉得非常厉害，现在想想应该也是这么实现的，主要还是了解，本节没有细究。对自己说一句，加油😀~

坚持打卡，坚持学习！明天见💪~
​
​

​

​