我又開始寫部落格了
本來平時是使用公司內部的語雀來進行日常工作的記錄，但是想了想，一些不涉及內部知識的東西還是寫在公共平臺上比較好。隨時可以查得到。被看到的可能性更大，錯漏也會被指出。蠻好的。

這段時間第一次接觸c端的工作，需要學習的地方很多。除了幹雜活之外，終於正式開始了模組的開發。（雖然只是協助大佬開發，先做切圖。

1 切圖是什麼？

我開始聽到“切圖”兩個字的時候，以為是ui設計的切圖。然而最後發現是，除了呼叫介面、資料處理和聯動等高階邏輯之外的html、css以及基本的邏輯部分。
目前知做了一次切圖，所以只總結一部分內容。

2 css優化

2.1 相容性查詢

can i use it
一個成熟的大佬和一個新手切圖仔最重要的積累差距就是在css上。ccs海無涯，回頭是岸～
這次被指出了一些不成熟的寫法，現在記錄下來。後續避免同樣的錯誤。

2.2 字型

字型這部分我一般在開發的時候直接複製貼上ui給的字型，很少會去思考字型的選擇。沒想到這次在字型上出了錯。

2.2.1 預設字型：

這裡設計給出的字型是PingFangSC-Semibold。但在寫css的時候stylelint就給我報錯了，當時只是以為字型沒引入之類的，沒太放在心上，直接註釋掉了。後來才知道這個字型是ui設計軟體的預設字型。遇到這種情況字型其實不用設定，因為各個系統都有自己的預設字型。
關於各個系統的預設字型可參考：各個系統的前端字型

2.2.2 引入外部字型

這裡又出現了之前沒有見過的三個屬性：

• 關於font-style
• 關於font-display
• 關於unicode-range
• unicode-range的騷操作

@font-face {
  font-family: "CSD";
  src: url("https://xxxxxxxx.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+30-39, U+A5, U+3A;
}

2.2.3 rgb和#ccc的選擇？

一般來講，如果字型有透明度的要求，則使用rgb來進行設定，畢竟程式碼會少一行不是。

opacity: 0.8;
color: #000000; 
// 改為：
color: rgba(0,0,0,.8);

2.3 居中

居中是最最最常見和有最多種方案實現的需求。垂直居中、水平居中，各種方案總有一種能夠實現。
在這次切圖的過程中也暴露了我的一個問題，那就是，我會習慣性地使用position、top、transform的方式。當然這個方式肯定是對的只是有的時候會不太合適。

2.3.1 flex實現文字垂直居中

本來使用的就是上述的暴力解決方式。但是被指出並不合適，建議使用flex。那麼flex怎麼實現文字的垂直居中呢？
簡單到令人髮指：

<div class = "content">
    文字垂直居中
</div>

<style>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    background-color: #ccc;
    justify-content: center;
}
</style>

這樣一來水平和垂直都居中了。
就像這位博主對自己的評價，我此刻也是這個想法：我簡直是個智障。
圖片和文字垂直居中-flex佈局

2.4 滾動軸

這次的切圖中出現了橫向滾動的需求，同時需要將滾動軸隱去，使得ui更加和諧。
在查了很多資料之後，我找到了::-webkit-scrollbar這個屬性來實現滾動條的隱藏。

2.5 偽元素

怎麼實現這個效果？

3 動畫

上面提到的滾動條，一般在點選某一個元素的時候，會自動居中。
這個實現就要依靠js相關的程式碼了。
貼一個實現（沒看懂。。。）

import raf from './raf';
import cancelRaf from './cancelRaf';

// 是否支援scroll-behavior
const isSupportScrollBehavior = ('scroll-behavior' in document.body.style);
// 因效能問題，針對 IOS gpu < A10的裝置，禁止動畫
const banAnim = (function () {
  let result = false;
  if (navigator.userAgent.indexOf('iPhone') !== -1) {
    try {
      const canvas = document.createElement('canvas');
      const gl = canvas.getContext('experimental-webgl');
      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
      const gpu = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
      const gpuVersion = gpu.match(/Apple A(\d+) GPU/);
      if (gpuVersion && gpuVersion[1] < 10) {
        result = true;
      }
    } catch (e) { // eslint-disable-line
    }
  }

  return result;
})();

export default (scroller, target, noAnim = false) => {
  const scrollerWidth = scroller.offsetWidth;
  const maxScrollLeft = scroller.scrollWidth - scrollerWidth;
  let currentScrollLeft = scroller.scrollLeft;
  let targetScrollLeft = target.offsetLeft - scrollerWidth / 2 - scroller.offsetLeft + target.offsetWidth / 2;
  if (targetScrollLeft < 0) {
    targetScrollLeft = 0;
  } else if (targetScrollLeft > maxScrollLeft) {
    targetScrollLeft = maxScrollLeft;
  }

  if (currentScrollLeft !== targetScrollLeft) {
    if (noAnim) {
      scroller.scrollLeft = targetScrollLeft;
    } else if (isSupportScrollBehavior) {
      scroller.scrollTo({ left: targetScrollLeft, top: 0, behavior: 'smooth' });
    } else if (banAnim) {
      scroller.scrollLeft = targetScrollLeft;
    } else {
      const startTime = Date.now();
      const distance = targetScrollLeft - currentScrollLeft;
      const originScrollLeft = currentScrollLeft;
      const duration = 200;
      const scroll = () => {
        const p = (Date.now() - startTime) / duration;
        currentScrollLeft = originScrollLeft + p * distance;
        if (p >= 1) {
          scroller.scrollLeft = currentScrollLeft;
        } else {
          scroller.scrollLeft = currentScrollLeft;
          scroller._raf = raf(scroll);
        }
      };
      scroller._raf && cancelRaf(scroller._raf); // 停掉上次的動畫
      scroller._raf = raf(scroll);
    }
  }
}

還有優化的餘地嗎？

上文我實現了滾動條的隱藏。
但是還有優化的餘地嗎？
是有的。

-webkit-overflow-scrolling: touch;

這個屬性是在ios8+的系統中將滑動操作設定得更加順滑的屬性。
關於在相容性和優化體驗之間的取捨，引用大佬原話：

判斷你的加的css樣式是做什麼的，如果是錦上添花，在低端裝置不支援那就不支援，不會影響主體功能。但如果是主要功能，那就需要考慮相容性更好的方案。

4 設計稿沒提到？

作為一隻兢兢業業的切圖仔，除了使出渾身解數實現prd和ued的所有要求之外，還需要根據自己的經驗，對prd和ued中沒有出現的，但是明顯是疏忽了的地方進行補充。
例如下圖這種店名的顯示，prd中並沒有給出如果超長怎麼辦，但是作為一名敬業的切圖仔，當然是要考慮到超長時的處理情況，進行合適的截斷或者換行的。