平時工做和學習中總結的一些知識點(3)

2六、處理 retina 1px的兼容問題

https://github.com/jonathantneal/postcss-write-svg

2七、src和href的區別

• href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
• src 是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；
• 在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片和 frame 等元素。 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將 js 腳本放在底部而不是頭部。

2八、parseInt

parseInt(string, radix)

參數	描述
string	必需。要被解析的字符串。
radix	可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。若是省略該參數或其值爲 0，則數字將以 10 爲基礎來解析。若是它以 「0x」 或 「0X」 開頭，將以 16 爲基數。

若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

['1', '7', '11'].map(parseInt) 的結果是 [1, NaN, 3] 的緣由是由於，map() 方法是向傳遞給他的函數中傳遞三個參數，分別爲當前值，當前索引以及整個數組

而 parseInt 函數接收兩個參數：須要轉換的字符串，以及進制基數，因此，整個語句能夠寫做：['1', '7', '11'].map((value, index, array) => parseInt(value, index, array))，array 被 parseInt 捨棄以後，獲得的結果分別是：parseInt('1', 0)、parseInt('7', 1) 以及 parseInt('11', 2)，也就是上面看到的 [1, NaN, 3]。

2九、cherry-pick

先切一個新的分支
git cherry-pick 某次commit的標識
git cherry-pick continue

30、vscode 保存時自動格式化代碼

"editor.formatOnSave": true,  //保存時自動格式化

3一、階段總結

到了什麼都懂一點，可是什麼都不精通的階段

3二、睡眠函數

/**
 * 睡眠函數
 *
 * @param {number} time 睡眠時間
 * @returns
 */
export const sleep = (time = 0) => {
  return new Promise((reslove) => {
    setTimeout(reslove, time)
  })
}

3三、sentry介紹

• Sentry 是一個實時事件日誌記錄和聚集的平臺。其專一於錯誤監控以及提取一切過後處理所需信息而不依賴於麻煩的用戶反饋。它分爲客戶端和服務端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應用程序中間，程序出現異常就向服務端發送消息，服務端將消息記錄到數據庫中並提供一個web頁方便查看。Sentry由python編寫，源碼開放，性能卓越，易於擴展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等。

3四、空格和tab

tab在不一樣的系統中佔位不一樣，因此不推薦tab

3五、PostCSS

PostCSS是一款使用插件去轉換CSS的工具

3六、多個select框不能選同一個值的問題

每次選擇的時候，都去遍歷全部的select框的值，

把這些值放到一個數組，把這個數組中有的值設置爲disabled

3七、查詢git歷史操做

fc -il 1

3八、insertAdjacentElement

句法
targetElement .insertAdjacentElement（position，element）;

參數
position
A DOMString表示相對於的位置targetElement; 必須匹配（不區分大小寫）如下字符串之一：
'beforebegin'：在targetElement本身以前。
'afterbegin'：就在targetElement第一個孩子面前。
'beforeend'：就在targetElement最後一個孩子以後。
'afterend'：targetElement本身以後。

element
要插入樹中的元素。

返回值
插入的元素，或者null插入失敗的元素。

3九、map ( )

//不會改變原數組
//返回一個新數組

The map() method creates a new array 
with the results 
of calling a provided function on every 
element in the calling array

40、數組中返回某個匹配的值

function testMap3(key) {
    let arr = [
      {
        key: 1,
        value: 1
      },
      {
        key: 2,
        value: 2
      },
      {
        key: 3,
        value: 3
      },
      {
        key: 4,
        value: 4
      },
    ]
    let data = arr.filter((item, index) => {
      return item.key === key
    })
    return data
  }
  console.log(testMap3(2));//[{key: 2, value: 2}]

4一、移動端調試神器

<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
<script>
   var vConsole = new VConsole();
</script>

移動端調試模擬pc端的控制檯
直接在html頁面引入 奇蹟就會出現

4二、try catch finaly語句

catch語句中不能聲明變量e,不然會報錯
finaly 語句必定會執行 通常用於釋放資源