为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天 从函数到函数式编程之路

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

2022.11.16 11:08 81浏览

课程名称:破解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的路由效果组件,当时觉得非常厉害,现在想想应该也是这么实现的,主要还是了解,本节没有细究。对自己说一句,加油😀~

坚持打卡,坚持学习!明天见💪~

https://img4.sycdn.imooc.com/637449df000157c523001544.jpg

https://img4.sycdn.imooc.com/63744be300016f5522441540.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
9
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消