JS-混淆&遺忘&難點

時間 2019-11-12

標籤混淆遺忘難點欄目 JavaScript 简体版

原文原文鏈接

記錄一些我常常混淆和遺忘的JS點javascript

1. Date類型之時間格式化

1）toGMLString()、toUTCString()、toLocalString()、toString()

toGMLString() 和 toUTCString() 都是表示國際標準時間，toGMLString() 已經被淘汰，建議使用 toUTCString() 。html
toLocalString() 表示當地的時間vue
toString() 表示根據當地的時間，可是格式是國際上的格式java

2. slice、subStr、substring

這三者都表示字符串切割("斷章取義") [ slice方法Array對象也可使用 ]node

1）區別1：android

slice 和 substring 的第一個參數表示起分割index，第二個參數表示結束分割index,（不包括結束index）ios
substr 的第一個參數同上，第二個參數是表示要分割的個數git

2）區別2：es6

僅有 substring 會根據選擇兩個參數中較小的那個做爲起始點

3）區別3：github

參數中趕上負數

substring 中遇到負數直接視爲0
substr 中遇到負數，第一個參數是字符串長度加上負數，第二個參數視爲0
slice 中遇到負數，兩個參數都是字符串長度加上負數

3. XSS和CSRF

XSS: 跨站腳本攻擊（Cross Site Scripting），惡意攻擊者往Web頁面裏插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web裏面的Script代碼會被執行，從而達到惡意攻擊用戶的目的。
XSS
CSRF: 跨站請求僞造（Cross-site request forgery）一般縮寫爲CSRF或XSRF，是一種對網站的惡意利用。XSS 利用站點內的信任用戶，而CSRF則經過假裝來自受信任用戶的請求來利用受信任的網站。
CSRF

4. sessionStorage、localStorage、session、cookie

localStorage 、 sessionStorage、cookie 都是用戶存儲客戶端臨時信息的對象，且同源的。
session 是存儲在服務器的臨時會話數據
localStorage 生命週期是永久
sessionStorage 生命週期爲當前窗口或標籤頁
cookie生命週期取決於設置的cookie過時時間（若是沒有設置過時時間，則瀏覽器關閉生命週期結束）
cookie 數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器來回傳遞。它還有路徑的概念，能夠限制cookie只屬於某個路徑下。cookie數據不能超過4k，由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據。
sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
Web Storage 實際上由兩個部分組成：sessionStorage 和 localStorage

點擊這裏

5. querySelector 和 getElementBy..區別以及性能比較

點擊這裏

6. 獲取不重複的隨機數

// 生成隨機數
    getRandomNum(randomLength) {
      let rL = randomLength || 18;
      return Number(Math.random().toString().substr(3,rL) + Date.now()).toString(36);
    },

7. 判斷瀏覽器是不是PC

// 判斷是不是pc
isPc: function(req, res){
    let sUserAgent = req.headers["user-agent"].toLowerCase();
    let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    let bIsMidp = sUserAgent.match(/midp/i) == "midp";
    let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    let bIsAndroid = sUserAgent.match(/android/i) == "android";
    let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    let bIsWP = sUserAgent.match(/windows phone/i) == "windows phone";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || bIsWP) {
        return false;  //Mobile
    } else {
        return true;   //pc 
    }
},

8.上報錯誤到後臺

window.onerror
addEventListener('error')
pormise用catch

doc

JS難點

1. 頁面之間的通訊

url帶參數 -- 單向傳遞
可使用iframe進行嵌套
1. 方法調用
  - 父頁面調用子頁面方法：FrameName.window.方法;
  - 子頁面調用父頁面方法：parent.window.方法;
  - 子頁面獲取父頁面屬性：parent.屬性
  - 父頁面獲取子頁面屬性：Frame.contentWindow.屬性
    
    vue中父頁面的方法須要寫到index.html或者定義window.parent/window.top = 方法
2. 自定義事件的監聽與調用
  - 建立事件createEvent
  - 觸發事件dispatchEvent
  - addEventListener監聽事件的觸發
postMessage -- 單向傳遞

postMessage API

注意： IE8 和 IE9 僅支持窗口與<frame>和 <iframe>之間的通訊
localStorage
websocket
- websocket

2. 數組中兩個交換位置

方法一

es6中引入擴展運算符（...），它用於把一個數組轉化爲用逗號分隔的參數序列，它經常使用在不定參數個數時的函數調用，數組合並等情形
```
arr = [1, 2, 3, 4, 5]
    // 交換第三個和第四個元素
    // x < y
    x = 2, y = 3

    arr.splice(x, 1, ...arr.splice(y, 1, arr[x]))
    console.log(arr) /// [1,2,4,3,5]
```

方法二

let a=[1,2,3];
    [a[1], a[2]]=[a[2], a[1]];

3. https中的iframe不能加載http的，會出現跨域問題

doc

4. 導出文件（後臺傳輸迴流的格式）

DOC

導出excel文件，請求頭的accety格式爲application/vnd.ms-excel

1.blob格式

new blob能夠轉化爲blob格式

blob doc

<!--if (window.navigator.msSaveOrOpenBlob) // IE10+-->
<!--window.navigator.msSaveOrOpenBlob(file, filename);-->

let link = document.createElement('a');
let year = this.descData.year ? this.descData.year : '- -';
let month = this.descData.month ? this.descData.month : '- -';
link.style.display = 'none';
link.href = window.URL.createObjectURL(response.data);
link.download = `彙報明細_${year}年${month}月`;
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);

2.若是是base64格式

加類型說明可直接下載

能夠直接把base64加到a標籤的link屬性中在前面加上data:文件類型;base64,，download屬性設置文件名字，能夠下載

轉化爲file格式，在轉換爲blob格式，用1去下載

base64ToFile(base64Data, tempfilename, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    var file = new File(byteArrays, tempfilename, { type: contentType });
    return file;
}

download屬性的兼容性較差，不建議使用，建議後臺直接返回url去下載

download兼容一覽

5. split方法分割多個字符

str.split(/[字符集合]/)

eg:
'aa-bb_cc/dd' -> [aa, bb, cc ,dd]
'aa-bb_cc/dd'.split(/[-_/]/)

6. base64 和 binary轉化

btoa()/atob

ps: a -> ascii, b -> binary

7. onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。

該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面仍是離開當前頁面。

兼容性好

8. 移動端阻止頁面下拉事件

addEventListener

document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默認的處理方式(阻止下拉滑動的效果)
}, {passive: false}); //passive 參數不能省略，用來兼容ios和android

9. 拿到其餘頁面的內容（僅瀏覽內容）

僅適用不考慮樣式或內聯樣式的頁面【例如：微信公衆號文章】
【PS: 若是帶有多圖，必需要有瀏覽行爲才能夠拿到圖片！！】
【全部跨域問題的解決必須有服務器權限和服務器配合】

使用iframe作隱形的橋樑（拖慢頁面渲染） -- 跨域不可取，瀏覽器安全限制
將連接內容放到iframe中，獲取iframe中的innerHTML拷貝出來。具體方法以下
格式：

window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 
實例：window.frames["ifm"].document.getElementById("btnOk").click(); 
 
格式： 
var obj=document.getElementById("iframe的name").contentWindow; 
var ifmObj=obj.document.getElementById("iframe中控件的ID"); 
ifmObj.click(); 
實例： 
var obj=document.getElementById("ifm").contentWindow; 
var ifmObj=obj.document.getElementById("btnOk"); 
ifmObj.click();

考慮使用node抓取數據（後臺爬蟲）
JQ的load()方法 -- 跨域不可取，瀏覽器安全限制
直接請求頁面，將拿到的結果回填 -- 跨域不可取，瀏覽器安全限制
(ajax,fetch等）
使用代理轉發一層（還未測試）-- 多圖不可行，必須模擬瀏覽器行爲

📌8. async await,promise,setTimeout執行順序!!

9.解決瀏覽器保存密碼自動填充問題

場景：註冊/修改密碼時含有type=password的input和在他以前非type=password的input時會自動填充瀏覽器保存的密碼

form表單能夠隔斷填充密碼問題

<form>
 <input type="text" />
</form>
<form>
 <input type="password" />
</form>

用隱藏input隔開在chorme無效
經過focus修改type只在密碼在上/除密碼以外的input框在下的狀況

10.formData

自行建立一個formData格式的請求用於上傳文件

建立formData對象

const formData = new FormData();
formData.append('file', (某input元素對象).files[0]);

!!不能設置headers的contentType,由於設置Content-Type:multipart/form-data;後不會自動加boundary及以後的內容（例如Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBHCQAyJZJXeOYet1）
注意body中的內容不須要JSON.stringify

js兼容

Response.redirected

一個Boolean是true若是響應表示您的請求被重定向。

ie監聽storage差別與其餘瀏覽器

storage變化，ie會刷新全部頁面（與當前storage相關的）其餘瀏覽器值會刷新當前頁。能夠經過比較newValue和oldValue再作出相應的操做

ie和safari不支持

ie get請求緩存不更新

// 兼容IE處理（IE緩存坑）
if (newConf.method.toLowerCase() === 'get') {
    newConf.params = Object.assign({}, (newConf.params || {}), {          _: new Date().getTime()
    });
}