东航电商前端技术周刊第四期20180629

标签：rip   sass   允许   get   其它   最小   comm   save   发送   

1.Cookie相关知识

服务器端像客户端发送Cookie是通过HTTP响应报文实现的，在Set-Cookie中设置需要像客户端发送的cookie，cookie格式如下：
Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure"
其中name=value是必选项，其它都是可选项。Cookie的主要构成如下：
name:一个唯一确定的cookie名称。通常来讲cookie的名称是不区分大小写的。
value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码
domain:domain对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域(如： yq.aliyun.com)，也可以不包含它(如：.aliyun.com，则对于aliyun.com的所有子域都有效).
path: 表示这个cookie影响到的路径，浏览器跟会根据这项配置，像指定域中匹配的路径发送cookie。
expires:失效时间，表示cookie何时应该被删除的时间戳(也就是，何时应该停止向服务器发送这个cookie)。如果不设置这个时间戳，浏览器会在页面关闭时即将删除所有cookie；不过也可以自己设置删除时间。这个值是GMT时间格式，如果客户端和服务器端时间不一致，使用expires就会存在偏差。
max-age: 与expires作用相同，用来告诉浏览器此cookie多久过期（单位是秒），而不是一个固定的时间点。正常情况下，max-age的优先级高于expires。
HttpOnly: 告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求张仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
secure: 安全标志，指定后，只有在使用SSL链接时候才能发送到服务器，如果是http链接则不会传递该信息。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以不要把重要信息放cookie就对了服务器端设置
优点：极高的扩展性和可用性
1.可以解决HTTP无状态的问题，与服务器进行交互，分担了服务器存储的负担
2.通过良好的编程，控制保存在cookie中的session对象的大小。
3.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
4.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
5.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
4.浪费带宽，每次请求新页面，cookie都会被发送过去
5.在cookie相关文档信息中，提到cookie是不能跨域访问的，但是在二级域名是可以共享cookie的。这样就是我们的项目有了局限性，必须将多个系统的域名统一，作为二级域名，统一平台提供使用主域名。这样就可以实现cookie的单点登录了。
一级域名相同，只是二级域名不同的情况下，浏览器允许通过设置document.domain共享Cookie。也就是说，Cookie只能跨二级域名来访问，不能跨一级域名来访问。

感谢李楠老师热情分享

2.解析机上WiFi项目pc端src/js/common/index.js中的getTempGather方法

源码：

function getTempGather() {
    return {
    zh: {
      headerTemp
    },
    en: {
      headerTemp: headerENTemp
    }
  }[window.storeCache.isENSite ? ‘en‘ : ‘zh‘];
}

解析：正常写的，可能会如下写

function getTempGather() {
    if(window.storeCache.isENSite){
         return {
             headerTemp: headerENTemp
        }
    }
    else{
        return {
              headerTemp
        }
    }
}

然后对比一下两种写法，哪种更好？显然第二种if/else可读性差，字符比第一种多了12个。而第一种对象键值与表达式得到了完美的运用，简洁可读，基本功扎实体现在这块代码里。

感谢孙爱祥老师热情分享

3.前端常用算法比较测试

冒泡排序、选择排序、插入排序、快速排序执行速度对比

//冒泡排序,遍历,一趟循环后将数组中最大项移至数组尾部,排除此最大项再对剩余项做循环操作
function bubbleSort(array){
    var arr = array.slice(0);
    console.time(‘bubbleSort‘);
    var i = arr.length;
    for(; i > 1; i--) {
        for (var j = 0; j < i; j++) {
            if(arr[j] > arr[ j + 1 ]){
                var temp = arr[j];
                arr[j] = arr[ j + 1 ];
                arr[ j + 1 ] = temp;
            }
        }
    }
    console.timeEnd(‘bubbleSort‘);
    return arr;
}

//#改进冒泡排序在一趟排序结束时发现未有任何交换位置,说明已经有序,无须再进行下趟循环
function advbubbleSort(array) {
    var arr = array.slice(0);
    console.time(‘advbubbleSort‘);
    var i = arr.length, exchange;
    for(; i > 1; i--){
        exchange = false;
        for(var j = 0; j < i; j++){
            if(arr[j] > arr[ j + 1 ]){
                exchange = true;
                var temp = arr[j];
                arr[j] = arr[ j + 1 ];
                arr[ j + 1 ] = temp;
            }
        }
        if (!exchange) {
            console.timeEnd(‘advbubbleSort‘);
            return arr;
        }
    }
    console.timeEnd(‘advbubbleSort‘);
    return arr;
}

    //#选择排序将数组第n个元素暂存,再与剩余的数据比较将最小的指放入暂存并重复,不必在内循环中读写数组,比冒泡算法提高了执行效率
    function selectSort(array){
        var arr = array.slice(0);
        console.time(‘selectSort‘);
        var i = 0, len = arr.length,  min;
        for(; i < len - 1; i++){
            min = i;
            for(var j = i + 1; j < len ; j++){
                if(arr[j] < arr[min]){
                    min = j;
                }
            }
            if(min != i) {
                var temp = arr[i];
                arr[i] = arr[min];
                arr[min] = temp;
            }
        }
        console.timeEnd(‘selectSort‘);
        return arr;
    }

    //插入排序很好理解,就像打扑克,抓起一张牌插入队列,右边的牌顺序向右移动
    function  insertSort(array) {
        var arr = array.slice(0);
        console.time(‘insertSort‘);
        var temp, i = 1, len = arr.length;
        for(; i < len; i++){
            temp = arr[i];
            var j = i;
            while ( j > 0 && arr[j-1] > temp){
                arr[j] = arr[j-1];
                j--;
            }
            arr[j] = temp;
        }
        console.timeEnd(‘insertSort‘);
        return arr;
    }

    //快速排序，选择一个元素作为基准值(pivot)。将小于基准值的元素和大于基准值的元素分开保存      
    function  qSort(array) {
        var arr = array.slice(0);
        return (function () {
            console.time(‘qSort‘);
            var quickSort = function(ar){
                if(ar.length == 0){
                    return ar;
                }
                var left = [],
                    right = [],
                    start = ar[0],
                    len = ar.length;
                for(var i = 1; i < len; i++){
                    if(ar[i] < start){
                        left.push(ar[i]);
                    }else{
                        right.push(ar[i]);
                    }
                }
                return quickSort(left).concat(start, quickSort(right));
            }
            var result = quickSort(arr);
            console.timeEnd(‘qSort‘);
            return result;
        }());
    }


    //生成随机数组
    function getArray(len){
        var i = 0, rArray = [len];
        for(; i < len; i++ ){
            rArray[i] = Math.floor(Math.random() * len );
        }
        return rArray;
    }
    //转字符串
    function arrayToString(arr){
        var resString = arr.join(‘ ‘);
        return resString.replace(/(\d+\s){10}/g, ‘$&\n‘);;
    }

    //开始测试
    var testArray = getArray(50000);
    var inA = insertSort(testArray);
    var selA = selectSort(testArray);
    var bubA = bubbleSort(testArray);
    var qA = qSort(testArray);
    console.time(‘JSNativeSort‘);
    testArray.sort();
    console.timeEnd(‘JSNativeSort‘);

5万条数据在Chrome浏览器中测试结果如下

insertSort: 715.124ms
selectSort: 1312.504ms
bubbleSort: 12704.735ms
qSort: 89.784ms
JSNativeSort: 27.051ms

4.开始使用Yarn管理依赖

Yarn是一个快速高效的依赖管理工具。
装Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

那么，是时候抛弃npm缓慢的进度条了，看下效果:

ymk:mbr-scaffold Halley$ yarn add sass
yarn add v1.7.0
[1/4] ??  Resolving packages...
[2/4] ??  Fetching packages...
[3/4] ??  Linking dependencies...
warning " > eslint-plugin-prettier@2.6.1" has unmet peer dependency "prettier@>= 0.11.0".
[4/4] ??  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ sass@1.7.3
info All dependencies
└─ sass@1.7.3
?  Done in 5.17s.

5.17s，sass安装完成

安装Yarn

使用Homebrew安装Yanr安装非常简单

brew update
brew install yarn

初始化项目

yarn init

添加依赖包

yarn add [package]
yarn add [package]@[version]

更新依赖包

yarn upgrade [package]
yarn upgrade [package]@[version]

删除依赖包

yarn remove [package]

5.常用git命令

git log --pretty=oneline 显示提交日志，完整版本号

git reflog 查看命令历史

git reset --hard HEAD^ 回到上一版本

git reset --hard cb926e7e 回到某一个版本

git add 加入暂存取

git commit 提交到当前分支

git checkout -- file 丢弃工作区修改

git reset HEAD file 撤销暂存区

git rm file 删除文件

git remote prune origin 远程分支删除后同步本地

东航电商前端技术周刊第四期20180629

标签：rip   sass   允许   get   其它   最小   comm   save   发送   

原文地址：https://www.cnblogs.com/yuebai/p/9261023.html