| 项目实战

信永项目一期总结

简介

这是一个很复杂，充斥了很多业务逻辑的系统。因为入场的之前别人也已经开发了一段时间了，
所以其实是在别人的基础上，有些模块是二次开发，有些是从零开始。主要负责了四个部分
底稿目录、数据分析、映射表 和 归档。

痛点

  • 需求的反复修改

  • 对审计类业务不熟悉

  • 对视频类问题处理经验不够

  • vue 使用的不够熟练

  • 初次使用 vuex

解决问题

如何克服需求的反复修改？

  • 在项目里在做难免遇到客户对需求整理的并不清楚，或者说客户本上没有从原始操作 Excel 到现在使用现代化系统的
    概念。所以产品经理在需求的转化上有很重要的作用

  • 需求有修改是可以理解的，但是如何控制这个程度和平率是控制项目的人最该思考的问题。
    在接受改变和拒绝需求之间保持一平衡。

  • 作为开发，如果需要的改动是合理的，对业务来说是矫正的作用，都还是尽量积极配合。

如何解决对审计类业务的不了解？

  • 作为前端，不需要完全对业务数据的处理了解的很清楚明白，但是如果可以对开发的业务逻辑及流程掌握的很好对开发
    过程来说是很好的一件事情，这样开发的时候逻辑会更严密。

  • 很快上手不熟悉的业务的时候，可以不过多追究业务，而按照原型和设计交互，去走一遍流程。在这个过程中，会遇到
    有些交互的情况需要做逻辑判断的时候，就顺带了解此处的业务逻辑。以交互操作为主线而不是完全理解透彻业务。

视频类型问题的经验不足

  • 关于 fetch 请求的大揭秘

    在之前使用 fetch 请求的时候我们都会这样写

    1
    2
    3
    fetch('xxx')
    	.then((res) => res.json())
    	.then((res) => console.log(res))

    很多时候，我们都习惯去做 res.json() 的操作，却没有去究其原因，这也是我在这次处理二进制流的时候遇到
    最大的一个问题。

    后来去认真了解 fetch 请求的时候，才发现 fetch 请求的第一个返回参数是一个 ReadableStream 对象
    这个时候返回的类型是未被定义的，所以如果请求返回的是 json 格式的内容我们通常都会 res.json()。同理，
    如果返回的是二进制流，我们需要如下：

  • video 标签可以解析二进制流文件（只体验了 chrome 下支持，其他待验证）

关于 VUE 新 GET 的知识

  • 这是第一次尝试在 vue 里使用 ts ， 最开始很不习惯，但是用了一段时间之后发现还行。主要就是 props 和
    mixins 都是通过 Component 装饰器的方式添加到具体的类上。

  • 关于 vue 的 hook

    在日常开发中，我们可能会为我们所负责的页面或者模块加上一些自定义的监听事件如：resize

    我们在 mounted 的时候加上了这个监听事件 但是在离开我们这个模块的时候 我们为了避免内存泄露或者时间冲突都应该在离开之前的生命周期里去销毁它
    寻常写法如下:

    1
    2
    mounted () { window.addEventListener('resize', this.resizeHandler); },
    beforeDestroy () { window.removeEventListener('resize', this.resizeHandler); }

    不过 Vue 其实为我们提供了很好的 hook
    如下：

    1
    2
    3
    mounted () { window.addEventListener('resize', this.resizeHandler);
    this.$on("hook:beforeDestroy", () => { window.removeEventListener('resize',
    this.resizeHandler); }) }

    官网 DEMO

  • 还有一个第三方的场景

    例如我们用到了第三方组件 想在它数据变化的时候进行一些操作 如果这个组件并未向外暴露这个 api 的时候
    我们就可以利用这个搭配 在外部监听生命周期函数

    1
    <some-temp @hook:updated="”someFunction”"></some-temp>

  • 在这个项目里也是第一次使用到 mixins

    • 基本知识查看官网

    • 总结一下当组件和混入的内容出现冲突的时候是怎样选择合并的

    生命周期钩子重复 | mothods components directives|

    • | -
      重复的生命周期都将会调用，但是混入对象的比组件自身的先执行 | 如果这类出现重复的，则默认执行组件内的方法或值
ESC