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来共享信息避免重发请求，也可以关掉前一个请求，在当前页面重新发起一个请求