前端的一些坑，一些記錄，一些冷知識 2

在博客閱讀：https://ssshooter.com/2019-04...

距離同系列 上一篇已經一年了...仍是要驚歎時間過得是如此之快。在對前端開發熟悉以後，對「坑」的定義也發生了變化，因此記錄的反而少了，留下的都是些比較實用的方法。如今看回來，今年踏出的不尋常的一步是接觸了 RN。RN 這個東西...我對他的心情仍是挺複雜的。他確實給前端工程師提供了一個方便編寫安卓、iOS 應用的方法，可是對於一些奇葩需求仍是須要本身對接原生模塊。並且我剛進坑拉下來的第一個版本就連最簡單的 button 組件（沒記錯的話）都是有 bug 的 😂。至於將來，多了 flutter 這個競爭者，但願能夠和 RN 進行一下良性競爭？

node

• 檢查項目依賴更新的方法 1：npm-check 檢查包的升級情況，能夠自選更新

• 檢查項目依賴更新的方法 2：

  npm i -g npm-check-updates
  ncu -u --packageFile package.json

• nvm 可安裝多個 node 版本，自由切換，維護舊項目必備。
• 使用 nrm 能夠更方便地更換 npm 源
• apt-get 會安裝假的 nodejs，真·安裝方法：https://nodejs.org/en/downloa...
• npx 會自動全局安裝所需 npm 包，運行後自動刪除該包，是一種用完即走的方法（存在乎義是你會發現不少全局庫只用一次以後就沒再使用過了）

• npm 依賴能夠來自 git 倉庫連接：

  git+ssh://git@github.com:npm/cli.git#v1.0.27
  git+ssh://git@github.com:npm/cli#semver:^5.0
  git+https://isaacs@github.com/npm/cli.git
  git://github.com/npm/cli.git#v1.0.27

  參考：https://docs.npmjs.com/files/...

• 其實 npm 腳本也是有鉤子的，依賴這樣寫，它被安裝的時候就會自動構建啦，參考官方文檔：https://docs.npmjs.com/misc/s...

  "scripts": {
      "install": "gulp build",
      "test": "mocha --require babel-core/register ./test/**/*.js",
      "lint": "eslint src/**/*.js"
    },

• cross-env 的做用：跨平臺設置環境變量

html

• 點擊穿透（相似的還有滑動穿透）問題的成因以及解決方案：https://segmentfault.com/a/11...
• <a href="download.url" download="filename">下載</a> 爲 a 加上 download 屬性瀏覽器就會下載連接的文件而不是在新頁面打開。
• X-Frame-Options 響應頭用於控制是否容許頁面在 <iframe> 等標記中展示。

• 一個下拉選框默認無選擇的方法

  <select>
    <option value="" selected disabled hidden>請選擇</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>

JavaScript

• 必須在 SVG 名稱空間中建立 SVG 元素,所以不能由 createElement 建立,而必須使用 createElementNS 將 SVG 名稱空間做爲第一個參數
• 抽取 object 中個別屬性
  const picked = (({ a, c }) => ({ a, c }))(object);

• 不能在 forEach 使用 await，forEach 要求同步函數。機制：async 函數返回一個 promise，最終是調用者處理這個 promise。然而，Array#forEach 不會處理回調函數返回的 promise，只是簡單無視了他。

  若是你須要順序執行，能夠這樣

  async function printFiles() {
    const files = await getFilePaths()
  
    for (const file of files) {
      const contents = await fs.readFile(file, 'utf8')
      console.log(contents)
    }
  }

  // 若是你須要並行執行，能夠這樣
  async function printFiles() {
    const files = await getFilePaths()
  
    await Promise.all(
      files.map(async file => {
        const contents = await fs.readFile(file, 'utf8')
        console.log(contents)
      })
    )
  }

• for/of 是遍歷數組最可靠的方式，它比 for 循環簡潔，而且沒有 for/in 和 forEach()那麼多奇怪的特例。for/of 的缺點是咱們取索引值不方便，並且不能這樣鏈式調用 forEach().forEach()。來源

• encodeURIComponent 不處理

  A-Z a-z 0-9 - _ . ! ~ * ' ( )

  encodeURI 不處理

  A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

• 2011-10-05T14:48:00.000Z 這個格式很常見，這是 ISO 8601 標準，規定日期和時間中間用 T 鏈接，hh:mm:ss.sss 和 hh:mm:ss 都正確。JS 獲取此格式可使用 Date.prototype.toISOString()。然而，轉換得來的是 0 時區的時間，若是要獲得中國（+8）時間須要new Date(+new Date() + 8 * 60 * 60 * 1000).toISOString()
• 這是一個隱性坑：使用 x||y 必定要注意前面若是是 0 的狀況：由於你獲取數據成功，可是獲得的數據 x 若恰好是 0 就會變成用後面的 y 了。
• 一句話解決一個經典入門難題：匿名函數的 this 指向 window，若是不是匿名，this 關鍵字永遠都指向函數(方法)的全部者，若是使用了箭頭函數，是外層函數的 this
• ES7 語法 ::foo.bar 等於 foo.bar.bind(foo)
• const noop = () => {}; 空操做函數，須要回調但無操做時使用
• chrome 控制檯有一個 copy() 方法，能夠用於把數據複製到剪貼板，十分有用，知道之後就不用拿 node 寫數據流了。對於對象能夠這麼寫 copy(JSON.stringify(temp6))
• babel 會把 es6 import 轉爲 commmonjs，啓用 tree shaking 必須 es6，因此須要使用 tree shaking 時必須關閉 babel 的模塊語法轉換。

• 節流防抖的定義：

  • 函數節流（throttle）：函數必須相隔一段時間才能再調用，能夠用於滾動監聽函數的性能優化
  • 函數防抖（debounce）：一段時間內無調用才真正執行函數，能夠用於搜索框輸入完整信息再搜索的狀況
• naturalWidth 和 naturalHeight 屬性能夠直接獲取圖片節點的原始寬高，且瀏覽器廣泛支持。

• 數組也能夠用 __proto__ 繼承

  a = []
  a.__proto__ = [2, 1, 2, 3, 3, 322]
  a[1]
  // 返回 1

• >> 的使用：n 右移 1 位等於 n/2，右移兩位等於 n/4，類推；左移則是相反；同時左右移能夠用於去除小數

vue

• keep-alive 組件的 include 和 exclude 用的 name 是組件 name 而非路由 name。

git

• github 爽快 PR 的方法，upstream 設定到 PR 目標，直接建一條新分支拉最新代碼，而後把本身改好的文件單獨 checkout 到該分支，而後 PR 新建分支，就能精準修改某些文件，並且不用拉到別人的修改。這個方法是避免其餘文件的 merge，若是你須要提交的文件被修改過，請必定要注意合併

react native

• 若是你的 App 但願向用戶展現流暢的動畫效果，那麼絕對不要使用 react native。（iOS 還算能忍受，animated 在安卓就是水土不服，nativedriver 未支持全部屬性）

• 儘管不是全部屬性都支持，可是 Animated 在安卓儘量添加 useNativeDriver

  Animated.timing(this.state.animatedValue, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true, // <-- Add this
  }).start()

• RN 字體相關樣式無繼承，樣式的繼承只存在於 Text 元素內的 Text 元素
• react native 無文字豎排，只能 Array.from()
  拆分句子爲一個個字再用 flexbox 豎排
• 引發 The development server returned response error code: 500 錯誤的緣由：1⃣️ 引入文件路徑錯誤 2⃣️ 重複引入
• attempt to assign to readonly property 在使用了動畫的狀況下是由於組件沒有用動畫組件
• RN 的 View 默認 border-box
• 啓動不了可是沒報錯，是有可能沒 link 好
• 與 web 不一樣，Text 組件寬度自適應須要添加 alignSelf: 'flex-start'

• 按平臺引入文件能夠在文件名後跟上對應平臺，引入時會自動引入對應文件。

  // 定義
  BigButton.ios.js
  BigButton.android.js
  // 引入時
  import BigButton from './BigButton'

CSS

• 關於表格的圓角：分開的話設置 tr td 的 radius 會致使每一個 td 都圓角
  而且有間隔很難看
  border-collapse: collapse;
  設置邊框合併默認合併邊框，詳細看 mdn
  可是合併邊框以後全部邊框的 borderradius 都會失效
  因此只能用 box shadow 模擬邊框
  而後用選擇器去掉四周的邊框（不去掉的話 boxshadow 內面仍是直角）
• :active pseudo-class doesn't work in mobile safari https://stackoverflow.com/que...
• 使用 transition 時不固定一些屬性可能會產生初始動畫，例如用了 scale 後不設定 size。
• position sticky 必須有 top left right bottom 其中一個屬性，而且父元素要發生滾動，由於 sticky 相對於父元素吸附

微信小程序

• 小程序頁面背景色

  page {
      background-color: #f5f5f5;
  }

  而不是 json 裏的 backgroundColor

• <text> 標籤的換行符會如實反映，看起來像多了 padding

其餘

• 我遇到過不止一次，頁面樣式不如預期，不管怎麼調整，都與理論不相符，例如兩個組建使用同一組樣式，表現卻不一樣。在這個狀況能夠試試重啓工程，樣式就恢復了。再強調一次，這個狀況真的不止遇到過一次 😂
• 若是不當心把環境變量清空了，能夠經過 export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 拯救命令丟失
• 時區不對會致使致使證書無效，https 網頁不能登入（macOS）
• 項目中沒用的文件儘早刪掉，否則後來看回來會被無用文件迷惑，增長理解成本