開課吧視頻內容匯總

1. 前端讀取文件內容， FileReader對象（兼容IE10+）

FileReader對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
使用場景：文件讀取和圖片預覽

具體實現可借鑒（https://www.jianshu.com/p/5fd16155901a）

2. 用戶聯網狀態

在Chrome和Safari中，如果瀏覽器連接不上局域網 (LAN)或者路由器，就是離線狀態；否則就是在線狀態。所以當該屬性值為false的時候，你可以說瀏覽器不能正常聯網，但如果該屬性值為true的時候，並不意味着瀏覽器一定能連接上互聯網。還有其他一些可能引起誤判的原因，比如你的電腦安裝了虛擬化軟件，可能會有一個虛擬網卡，這時它總是會顯示正常聯網。因此，如果你想得到瀏覽器確切的聯網狀態，應該使用其他額外的檢查手段。

在Firefox和Internet Explorer中，如果瀏覽器處於"脫機工作"狀態，則返回 false,其他情況都返回true.

 3. application/x-www-form-urlencoded 參數序列化 （具體借鑒jquery的$.param方法），后端接收到的數據格式是 a[0][a] = 1,並不會將其整理成對象或者數組

var nextStr = '';

function changeDataType(obj) {
    let str = ''
    if (typeof obj == 'object') {
        for (let i in obj) {
            if (typeof obj[i] != 'function' && typeof obj[i] != 'object') {
                str += i + '=' + obj[i] + '&';
            } else if (typeof obj[i] == 'object') {
                nextStr = '';
                str += changeSonType(i, obj[i])
            }
        }
    }
    return str.replace(/&$/g, '');
}

function changeSonType(objName, objValue) {
    if (typeof objValue == 'object') {
        for (let i in objValue) {
            if (typeof objValue[i] != 'object') {
                let value = objName + '[' + i + ']=' + objValue[i];
                nextStr += encodeURI(value) + '&';
            } else {
                changeSonType(objName + '[' + i + ']', objValue[i]);
            }
        }
    }
    return nextStr;
}

4 兩種方式，一種是通過Vue.set, 另外一種是 直接在watch里改變

5 生命周期注意點，通過v-if來控制組件顯隱，是會觸發子組件的生命周期的，而keep-alive則可以緩存，然后只會觸發activated、deactivated鈎子函數；beforeCreate是獲取不到data屬性的；mouted只執行一次，要對每次視圖變化都進行相關操作的話，要在updated里執行

6. 對於ajax請求，存在mounted先執行后才執行beforeCreate的ajax響應，async和promise都是一樣

7. spa 的實現原理核心

8. 動態添加路由

9. axios

 10. 文件上傳格式

form表單的content-type：enctype="multipart/form-data"
POST文件
<分隔符>\r\n字段信息\r\n\r\n內容\r\n<分隔符>\r\n字段頭\r\n\r\n內容\r\n<分隔符>\r\n字段頭\r\n\r\n內容\r\n<分隔符>--

--------------------------------------------------------------------------------

<分隔符>\r\n字段信息\r\n\r\n內容\r\n<分隔符>\r\n字段頭\r\n\r\n內容\r\n<分隔符>\r\n字段頭\r\n\r\n內容\r\n<分隔符>--

1.用<分隔符>切分
[
  null,
  "\r\n字段信息\r\n\r\n內容\r\n",
  "\r\n字段信息\r\n\r\n內容\r\n",
  "\r\n字段信息\r\n\r\n內容\r\n",
  '--'
]

2.第0個和最后1個，扔掉
[
  "\r\n字段信息\r\n\r\n內容\r\n",
  "\r\n字段信息\r\n\r\n內容\r\n",
  "\r\n字段信息\r\n\r\n內容\r\n",
]

3.每一項
"\r\n字段信息\r\n\r\n內容\r\n"

"字段信息\r\n\r\n內容"
"字段信息", "內容"

--------------------------------------------------------------------------------
<分隔符>可以通過boundary='--'+req.headers['content-type'].split('; ')[1].split('=')[1]獲取;

Content-Type: multipart/form-data; boundary=----WebKitFormBoundarykZzbr3mNbnA2Beus