浅谈如何从B端快速过渡到C端

这是我参与更文挑战的第1天，活动详情查看： 更文挑战

前言

      本人一枚小前端，由于前面呆的两家公司都是toB的，
   对于 产品交互体验 以及 代码设计维护 要求没有C端高，
   导致刚进公司的这几个月非常煎熬。
复制代码

问题

 比如：      
  - 代码评审， 仓促写的代码，没有好好检查，以及有没有更优的写法，代码的健壮性等...
  - UI细节， 像素级别，以及动画效果。
  - 功能交互， 良好的人机交互，要求有一定的sense, 不然会被吐槽.
  - 兼容性， C端还需要考虑到浏览器兼容性，设备兼容性等...
  
  这些都是容易被忽视的问题，以往只注重功能的实现，没有考虑到那么多的细节。
复制代码

解决方案：

提测前一定要自查，具体可以从以下几个角度：

    1. UI方面：个人觉得自查非常重要，在写页面的时候，首先是要考虑到布局，
       是固定宽度，还是等比缩放。这就涉及到使用弹性布局，还是固定宽度布局，
       保证在大屏或者小屏UI的一致性。

    2. 兼容性：提前了解到开发的产品所需适配的浏览器、设备等。
       可以使用模拟器模拟这些环境，来测试自己的代码。
       
    3. 自查代码逻辑：一般现在的项目都会使用typescript, 只要我们不要any一把梭，
       代码健壮性已经超过60%的项目了。其次就是代码的逻辑，
      
        - 考虑到js计算精度问题。
        - 变量、接口 命名规范。
        - 能不能把类似的逻辑写到一个类里，保证主流程的代码的简洁。
        - 有没有考虑到接口出现网络错误，导致代码出现错误，从而应用崩溃。
        - 监听一个事件时，考虑到在一个合适的时机卸载它。
复制代码

eg1:

code review 前：

export function updateProducts() {
    return Promise.all([getV1Products(), getV2Products(), getV3Products()])
    .then(results => {
      store.dispatch.product.setV1Products(results[0])
      store.dispatch.product.setV2Products(results[1])
      store.dispatch.product.setV3Products(results[2])
    }).catch(logger.error(error))
}

复制代码

这里就会出现Promise.all里有一个失败就会走到catch, 然后这并不是我们想要的，要考虑到可能会有失败的情况.

code review 后：

export function updateProducts() {
  const p1 = getV1Products().then(products => {
      store.dispatch.product.setV1Products(products);
    }).catch(error => logger.error(error));

  const p2 = getV2Products().then(v2 => {
      store.dispatch.product.setV2Products(v2);
    }).catch(error => logger.error(error));

  const p3 = getV3Products().then(v3 => {
      store.dispatch.product.setV3Products(v3);
    }).catch(error => logger.error(error));

  return Promise.all([p1, p2, p3]);
}

复制代码

eg2: 将关于某一块的逻辑抽象成类，向外暴露出一些方法就可以实现我们的功能，更符合代码设计原则：高内聚低耦合

class Line {
  private _goodLineIndex: number | null = null;
  private _level: number | null = null;
  private _currentIndex: number | null = null;
  
  constructor() {
    ...
  }
  
  get exist() {
    return this._goodLineIndex !== null;
  }

  get level() {
    return this._level;
  }

  get currentIndex() {
    return this._currentIndex;
  }
  
  init() {}
  
  async getLines() {}
  
  async getCurrentLine() {}
  
  optimizedLines() {}
  
  clean() {}
  
  apply() {}
}

const lineInstance = new Line();

export default lineInstance;

复制代码

心得：记得后端大佬的一句话，在很多用户量的基础上， 
前端性能优化一点点，都能够极大的节约服务器带宽资源.
复制代码