淺談如何從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;

複製代碼

心得：記得後端大佬的一句話，在不少用戶量的基礎上， 
前端性能優化一點點，都可以極大的節約服務器帶寬資源.
複製代碼