2018年7月

开篇比较大，后续有新感知再继续完善

一直使用的是console.log()来打印输出的形式，来debug，如果利用一下chrome的devtool工具来帮助我们debug会带来很大的遍历，如果有后端基础，例如javaweb中常用的log4j，强大的junit，这些辅助工具可以在项目的运行中给予我们很多的信息，可以快速的定位bug

- 阅读剩余部分 -

commonjs

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

require方法用于加载模块

以上来自CommonJS规范-阮一峰

commonjs的详细：可以从node的使用中获悉

- 阅读剩余部分 -

注：有缺陷，没有进行scroll事件的防抖、节流处理

某项目需要一下抖音的下拉刷新效果，目前做出来的效果如下：

做的还是很勉强，简而言之：

  1. 手指按住下滑时，需要出现一个旋转的spinner
  2. 随着手指往下滑动，spinner要能跟着旋转
  3. 用户可以取消刷新，取消刷新的动作是再往上滑
  4. 在取消刷新的过程中，spinner需要能跟着倒着旋转回去，在超过一定距离后，即成功取消刷新，spinner消失
  5. 若直接下滑到一定距离，再松开，则开始刷新，此时的spinner开始无限旋转，直到页面刷新完成

spinner怎么做？

也就是一个带缺口的1/4圆怎么做？

参考：mint-ui/mint-spinner

也即：设一个宽高相等的div，再设 border-radius: 50%;，这样就把div变成了一个圆

再设border: 4px solid transparent;，这样就形成了一个圆环，但是这个圆环还是透明的，还看不出效果

1/4圆环的最重要一步就来了：

border-top-color: #f5f5f5;
border-left-color: #f5f5f5;
border-bottom-color: #f5f5f5;

大家可以看出这个缺口是哪一边吗？ --对的，就是右边，不过还隐藏了一点就是div默认的background的就是background: transparent;，所以此时显示的圆环就是一个4px宽的背景色为#f5f5f5的1/4圆环

旋转的spinner怎么做？

一个属性搞定：transform: rotate(360deg);，此时表示将元素旋转360度

ransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

手指下滑，spinner要能跟着旋转

也是这次的核心：

主要思路: touchstart事件得到用户滑动的开始坐标，touchmove中去判断用户滑动的的位移，touchend事件判断用户滑动结束时的坐标，有了这3对值，就可以进行很多操作了

  • touchstart: 得到startX、startY
  • touchmove: 得到moveX、moveY
  • touchend: 得到endX、endY

要手指下滑，spinner跟着旋转，也就是要手指下滑的距离与spinner的transform: rotate(xxxdeg);成比例关系，手指下滑的距离就是moveY-startY可以用diff表示

// 使得转动的角度，随着diff的距离变动
spinner.style.transform = 'rotate('+diff*1.2+'deg)';

这样基本的思路就确定了，但还有一个隐藏的地方，怎么确定用户是在下滑？

参考：模仿抖音的全屏滚动效果

GetSlideAngle(dx, dy) {
    // atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度
    return Math.atan2(dy, dx) * 180 / Math.PI;
},
GetSlideDirection(startX, startY, endX, endY) {
    let dy = startY - endY;
    let dx = endX - startX;
    let result = 0;
    if (Math.abs(dx) < 50 && Math.abs(dy) < 50) {
        return result;
    }
    let angle = this.GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
        result = 4;
    } else if (angle >= 45 && angle < 135) {
        result = 1; //向上
    } else if (angle >= -135 && angle < -45) {
        result = 2; // 向下
    } else if (
        (angle >= 135 && angle <= 180) ||
        (angle >= -180 && angle < -135)
    ) {
        result = 3;
    }
    return result;
}

之后在touchmove的时候将，startX、startY、moveX、moveY传入就可以判断此时是否在下滑

用户取消刷新，又倒着上滑的时候

上述的spinner与滑动距离的随动关系，仍可以用，主要是怎么判断用户是在取消刷新？

例如，用户下滑到一定程度，再上滑，但上滑不超过起始点，那么如果一开始用的是startX和startY来判断，此时用户仍会被判断会下滑啊...

解决方法：定义一个maxDown变量来存储用户下滑的最大距离，下滑过程中，touchmove事件会被不断的触发，于是diff的值就会不断被计算出来

// 存储用户下滑的最大距离
if(this.maxDown<diff) {this.maxDown = diff}

// 但用户上滑到一定距离的时候
if(this.maxDown-diff) > this.maxDown*2/3) {
    // 下滑标志置为false
    this.moveDownFlag = false;
    // 隐藏spinner
    this.spinner = false;
}

直接下滑到一定距离，再松开

此时用户触发刷新操作，spinner开始无限旋转，直到页面刷新完成

这里判断用户正常下滑比较容易，只要在touchend事件时，用户是在下滑而且之前的moveDownFlag是为true，这样就可以了

但怎么让spinner无限旋转，而且要充当页面刷新的loading效果呢？

我采用的是vue，所以可以用动态class来实现

vue的template部分：

<div class="main__indicator" ref="spinner" :class="{'active': isLoading}" v-show="spinner"></div>

为了性能，这里采用css动画，使用animation+keyframes的组合，CSS @keyframes Rule

sass：

@keyframes kebab-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);

    }
}
&.active {
    animation:kebab-spinner-rotate 0.8s infinite linear;
}

js：

if(direction === 2 && this.moveDownFlag) {
    this.isLoading = true;
    // 发送ajax更新，此时充当loading效果
    // ajax code ...
    if(response.data.code === 200) {
         this.isLoading = false;
    ｝
}

但有一个缺陷就是，当spinner无限旋转时与之前的旋转角度有点衔接补上。。。

隐藏彩蛋，固定/绝对定位的水平居中问题

需要注意的是，spinner是固定定位的，而从一开始的预览图中可以看出，它是水平居中的，怎么实现固定定位的水平居中呢？

我的方法是参考的网上的，具体出处有点不清楚了...

left: 50%;
height: 30px;
width: 30px;
margin-left: -15px;

借用同学腾讯云的服务器，因为webview需要开启摄像头的缘故，只能运行在有https的环境下，于是开启了http转https

证书

一开始因为是腾讯云，有官方的上https的解决办法，但是尴尬的是同学说在把证书配置负载均衡的那一步，就找不到实例...，应该是我们就没开启任何的nginx，apache的服务器之类的吧，于是索性就直接用https://letsencrypt.org，

参考资料:

你的网站HTTPS了吗 | Let’s Encrypt

ubuntu使用Let’s Encrypt设置https，最终是用的这个，但是要注意选择http跳转方式(2)，而且注意的是网址一定不要输错

由于自己一开始没有选择http跳转方式（2）（怕影响到已存在的服务...此处需谨慎），因为怕在服务器上已经运行的tomcat的8080会被屏蔽掉，但是却发现首页也没有加上https

后来在如何免费的让你的网站变得更加安全 - HTTPS，这篇文章中找到灵感，sudo certbot --nginx，再输一下这个命令不就有了吗？ 后来才发现自己不仅一开始没选好，就连网址都输错了...

nginx

这个才是自己的痛苦之源，因为对nginx一点都不熟，简直崩盘...

阿里云配置 node.js + Nginx 反向代理，写nginx配置文件的时候参考的这个，但没有成功...，对nginx不熟啊...

How To Set Up a Node.js Application for Production on Ubuntu 16.04，stackoverflow上推荐的

Deploying NodeJS using Express with NginX and Let's Encrypt，比较详细，也一边参考了这个

[[新手]nginx反向代理负载均衡配置](https://segmentfault.com/a/1190000003824014)

CentOS 7 yum 安装 Nginx，另外另一个同学有cenos7的服务器，也试了试nginx，发现与ubuntu还是有一些不同，

nginx把配置中默认的root指向的静态资源后报错403

nginx默认配置的静态资源目录(root)，直接换成dist目录（直接用xftp上传报错，没权限。用cp -r /home/uftp/xixigiggling/. /var/www/html解决），就可以变成直接运行单页面应用了（佩服自己的机智），但是打开首页却报错，403 forbidden，查nginx日志

# 万一起不来 日志日志日志，重要的事情说三遍！！！
tail -f /var/log/nginx/error.log

可以发现是 Permission denied的权限错误，于是设置linux文件的权限，dist的文件有index.html和static，chmod 777 index.html，但是注意在文件夹开启权限要用-R：chmod 777 -R static

参考资源：

nginx静态资源文件无法访问，403 forbidden错误

总结

不熟悉nginx！！！