css/js(工做中遇到的問題)-4

JS生成隨機的由字母數字組合的字符串

Math.random().toString(36).substr(2)

移動端自適應方案

• lib-flexible
• 介紹

XSS跨站腳本

• 書籍

使用ReactCSSTransitionGroup

• 介紹

使用google analytics進行分析

• 指南

頁面之間跨域通訊

• 頁面之間跨域通訊

文件下載

• 前端

1.直接使用ajax，ajax的返回值類型是json,text,html,xml類型，或者能夠說ajax的發送，接受都只能是string字符串，不能流類型，因此沒法實現文件下載，強用會出現response衝突。
2.能夠在ajax接受中使用Blob，注意兼容性

.then(function (response) {
  var headers = response.headers();
  var blob = new Blob([response.data],{type:headers['content-type']});
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = "Filename";
  link.click();
});

3.使用隱藏form

function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

• 後端

1. express API: res.download(path, fiilename);

2. 設置頭信息
    res.set({
       'Content-Type': 'application/octet-stream',
       'Content-Disposition': 'attachment; filename='+fileName,
       'Content-Length': stats.size
    });
    fs.createReadStream(filePath).pipe(res);  // res.send(data)

輪詢和Web Socket

• 傳統輪詢

取setInterval或者setTimeout和ajax實現;
前者保證輪詢時間間隔一致，但沒法保證返回順序
後者保證返回順序，但輪詢間隔不能保證;


傳統輪詢方式存在一個嚴重缺陷：程序在每次請求時都會新建一個HTTP請求，然而並非每次都能返回所需的新數據。當同時發起的請求達到必定數目時，會對服務器形成較大負擔。

• 長輪詢

長輪詢的基本思想是在每次客戶端發出請求後，服務器檢查上次返回的數據與這次請求時的數據之間是否有更新，若是有更新則返回新數據並結束這次鏈接，不然服務器「hold」住這次鏈接，直到有新數據時再返回相應。參考comet模式，須要修改服務器端;

長輪詢能夠有效地解決傳統輪詢帶來的帶寬浪費，可是每次鏈接的保持是以消耗服務器資源爲代價的; 因爲有默認的「worker threads」數目的限制，當長鏈接較多時，服務器便沒法對新請求進行相應。

• websocket

輪詢與長輪詢都是基於HTTP的，二者自己存在着缺陷:輪詢須要更快的處理速度；長輪詢則更要求處理併發的能力;二者都是「被動型服務器」的體現:服務器不會主動推送信息;

websocket實現主動推送，無需循環等待（長輪詢），CPU和內存資源不以客戶端數量衡量，而是以客戶端事件數衡量；

• 前端注意

第一個事情是因爲http是短鏈接，通常瀏覽器都會設置一個超時時間，因此前端這個鏈接若是超過必定時間沒有返回，須要abort掉，從新發起，推薦30秒;
第二個事情是每次服務器有數據返回後，這個請求就結束了，你須要發起一個新的請求作監聽；
第三個事情是多頁面請求衝突問題，比較麻煩，不過若是大家是小遊戲，應該是單頁面應用就不用處理了，通常多頁面應用或者WEB網站這類的，是經過localstorage來共享信息避免重發請求，也能夠關掉前一個請求，在當前頁面從新發起一個請求