17mall备忘改进专题

H5兽超进化前端菜鸡兽
254 阅读4分钟

改进点

  1. 【已实现】把routeBack注册成全局方法，无参直接后退，有参，当组件名，跳转到指定组件
  2. 应该在router.js中收集路由信息，然后以常量的形式导出
  3. *从新设计common-top，要考虑右方多按钮及下方有插槽的情况，把common-top中收集距离的功能，从组件中剥离，common-top中只保留right和bottom的插槽，左侧插槽变成默认有，标题传参
  4. brand， brand-detail这种路由，应当写成嵌套路由的形式，最外层套一个空组件 redirectParent
  5. *设置统一的api访问限制，未返回之前不能重复访问，思考？？？？
  6. 【要考虑页内后退的情况，例如goods-detail中的遮蔽层，后退键在这里不控制路由，而是单纯的关闭这个遮蔽层，有两种方案，一种是用路由守卫，当store中有指定回调的时候，触发回调，而路由不变，二是采用嵌套路由】
  7. *重写全局alert组件，要求
  1. alert组件需要一个缓存记忆，用来在跳页情况下显示之前页面中的信息
  2. alert组件可以展示html文本段
  3. confirm功能
  4. 除了alert组件，还需要Notify简洁提示组件，出现在最上方，定时消失的
  1. 类似添加收藏，添加购物车这样的登陆跨页回调，需要重新设计，之前只考虑了同步的情况，还有一种情况页面需要异步数据后才能完成加载，那么回调函数会先执行，造成没有效果

8已经通过 _app.$route.matched[length- 1].instances.default 解决，参考 17mall-goodsDetail页-size-selector组件 应当先提示，该操作需要登录，再登录回来后，应当先询问再执行操作，

  1. 应该在路由mate中添加信息，哪些是需要进入即判定登录状态的，统一处理这个逻辑，而调用页面方法才需要登录的沿用之前的逻辑【如果是嵌套路由，那么进入子路由也必定要走顶端的redirectParent，一种是整套页面都需要登录的，采用redirectPath，另一种是单独页面需要注册的，这两种都可以靠在mate中添加信息解决，还有一种是页面上单独的api需要登录，这种需要另外设计】
  2. 根据页面需求，准备不同的store结构，哪些先渲染再等待数据，哪些等待数据完备再渲染
  3. 需要判断支付方式，如果是微信浏览器，则只显示微信支付
  4. 用户的核心信息写在cookie中，并为cookie设置主键，不太重要的信息通过这个主键生成localStorage索引存储
  5. 骨架屏实现方案:
1. 多个页面共用一个骨架屏
2. 骨架屏需要v-once和缓存
3. 在需要设置骨架屏的页面mate中添加信息，当路由进入这些页面的时候，
先触发dispatch，传入会关闭骨架屏的dispatch回调，并replace到所需页面

1. 或者采用全局遮罩层
  1. 统一的初始化出错画面，也用全局遮罩层，让用户选择回退或刷新页面
  2. 关于缓存，应该是一个类，其中以apiPath为主键，以字符串化的请求数据加上访问方法为2层主键来缓存，还应当配置清楚缓存等方法，缓存与下拉刷新，以swiper-list切换为例，采用缓存以后，切换到已经初始化的页，不会再请求数据，所以需要下拉刷新来更新数据，已经上拉加载过的页面，下拉刷新后从第一页开始显示
  3. 不能以1作为line-height的默认值，有些手机上，字体上部会被遮盖，所以注意蓝湖上的标注，要给文字一个打底色块，高度为行高，用这个色块的边距到其他元素的距离，才是准确的边距
  4. 子组件只提交动作，不要处理数据，数据由父组件统一处理
  5. 提取页面中常用位置，给与统一的命名，这样也有利于共用样式，也可以避免css混乱
  6. 要考虑更换角色时候，state中需要重置数据，不能采取公用函数遍历清除的方法，因为有可能有默认值，所以只能采取深拷贝的方法
  7. 对于类似省市区三级联动第一级这种比较固定的表，应该用storage来存储，这个storage应该是带时限的
avatar
文章
阅读
粉丝