1.面包屑导航
学习设计页面的时候发现我好像对那种记录页面点击跳转的模式不是很明白,like this:
第一次注意到这种页面跳转
按了按F12,发现了一个breadcrumb
image.png
image.png
叫面包屑导航,还挺形象,这下找到突破口了。
什么是面包屑导航,使用面包屑导航的优点 - 知乎 (zhihu.com)
感悟:其实在网站中使用的情景还是非常多的,一个侧边栏导航再加上一个面包屑导航,可以让用户随心所欲地浏览不怕迷路了。
但主要还是想知道怎么实现的,搜了搜react 面包屑导航:
react antd 面包屑导航这篇纯代码,不太看得进去
react 实现动态面包屑导航这篇不错,能看进去,能对实现方式有一个很好的了解。
1.首先得给每个路由添加breadcrumb属性,表示面包屑名称(breadcrumb: 'home')
2.然后对于页面上的路径进行文字展示(首页/login/page)
第二步的思路是将路径进行拆解对应,最后将对应的名称组织一下就ok了。
而且这篇文章很严谨,最后的总结实现方式的扩展,还有refer,真不错~
真的很喜欢这种一篇文章就能解决我全部疑惑还扩展我思路的感觉。
2.发布订阅模式
由于太喜欢上面的那篇文章,我又点进了作者的另一篇文章,有点碎片化阅读了哈哈。先来看看这篇好文章的结构:
image.png
实际问题说明-定义理解(举例子)-文章主角-用主角解决问题-完善主角-主角存在的问题-总结
问题:多模块通信,新增通信模块时代码多次发生变化
定义:两个对象(消息发布者、订阅者)和一个事件(订阅信息的动作)
发布订阅模式的模型:在js中通常用事件模型来表示一个发布订阅模型。