12月6号-12月12号:动态库gsap、视觉差parallax-js、手势库hammerjs、打字库typed、多页签通信、xss和csrq、axios获取上传文件进度、多入口打包\

这周是来这里最忙的一周，周一请假一天，周二来了突然说周五要上线一个复杂的h5活动；手头还有pc和h5双十一要上线，杂乱的一周，最后还是按时上线了；又复杂又杂的一周，react和vue的增查改的不同，react偏向原生的js写法，vue有v-modal双向数据绑定功能，所以vue的增查改就一个v-modal，而react就要三个方法类（增改查），还望大家注意~~，来说说这周用到的库吧，动态库gsap，手势库parallax-js，打字库typed，

一、gsap

gsap用来过渡数字和动态样式：有动态完成的方法，很方便的API
文档地址：https://greensock.com/docs/v3/GSAP
https://cn.vuejs.org/v2/guide/transitioning-state.html
（后面补充：tweenmax中文动态库http://www.tweenmax.com.cn/api/tweenmax/）

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>

new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }
})

to：改到那个样式，onComplete动态完成时候回调

gsap.to("#titok", {duration: 1, x: 300, ease: "bounce",onComplete:() =>{
        console.log('dddddddddddddd');
      }});

from:从那个样式来

gsap.from("#logo", {duration: 1, x: 100});

fromTo:页面渐变，慢慢出来

   gsap.fromTo('.name', { opacity: 0 }, { opacity: 1, duration: 1.5 })

timeline时间轴：

var tl = gsap.timeline();
      tl.to(".titok", {duration: 1, x: 200}).to(".titok", {duration: 1, x: 0, scale: 0.2}).to(".titok", {duration: 1, x: 200, scale: 2, y: 20});

二、Parallax.js

Parallax.js是一款功能非常强大的javascript视觉差特效引擎插件。通过这个视觉差插件可以制作出非常炫酷的视觉差特效。它可以检测智能设备的方向。
对智能设备的方向做出反应的视差引擎。如果没有陀螺仪或运动检测硬件可用，则使用光标的位置。
1.创建您的 HTML 元素
默认情况下，场景的所有直接子元素都将成为移动对象，即图层。您可以将其更改为自定义查询选择器，但同样，我们现在使用最简单的方法：

< div  id =" scene " > 
  < div >我的第一层！</ div > 
  < div >我的第二层！</ div > 
</ div >

虽然所有其他选项和参数都是可选的，具有合理的默认值，并且可以通过编程方式设置，但每个层都需要一个data-depth属性。应用于每一层的移动将乘以其深度属性。

< div  id =" scene " > 
  < div  data-depth =" 0.2 " >我的第一层！</ div > 
  < div  data-depth =" 0.6 " >我的第二层！</ div > 
</ div >

三、hammerjs

HammerJS是一个优秀的、轻量级的触屏设备手势库
它会默认为这个对象添加一系列识别器，包括 tap<点>, doubletap<双点击>, press<按住>, 水平方位的pan<平移> 和 swipe<快速滑动>, 以及多触点的 pinch<捏放> 和 rotate<旋转>识别器。不过呢，其中的 pinch 和 rotate 默认是不可用的，因为它们可能会导致元素被卡住

 const ham = new Hammer.Manager(document.querySelector('#selectPlanet'))
 ham.add(new Hammer.Swipe())
 ham.set({direction: Hammer.DIRECTION_VERTICAL})
 ham.on('swipeleft', event=> this.changeNext())
 ham.on('swiperight', event=> this.changePrev())
 ham.on('swipeup', event=> this.changePrev())
 ham.on('swipedown', event=> this.changeNext())

四、typed.js

typed.js是一个强大的打字库

// 开始打第一行字
      typeText() {
        let typedoptions = {
          strings:['嗨，同学，你好\n欢迎您进入\n开元宇宙的世界\n在这里，我将带你一起了解自己\n探索未来，我们一起向梦想出发吧！！！\n\n假设'],
          typeSpeed: 120,
          showCursor: false,
          onBegin: () =>{
          },
          onComplete: () => {
          }
        }
        // 等背景动态结束
        new Typed('.text', options);
      },

五、axios获取上传文件进度

 axios({
        url,
        method: 'post',
        data: formData,
        headers: {
          'Authorization': `Bearer ${token}`
        },
        //原生获取上传进度的事件
        onUploadProgress: progressEvent => {
          this.showProcess = true
          let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
          this.progress = `上传进度：${process}%`
        }
      }).then(res => {
        this.showProcess = false
        this.$hips.toast('上传成功')
        this.visible ? this.getFileList() : this.getEleFileList()
      }).catch(err => {
        console.log(err)
      })

六、游览器解析html文件

解析html形成dom树
解析css形成css树
两者解析完毕后布局，绘制
1.1影响重排和重绘：
减少重排：减少布局，宽高，节点的增删，
重绘：color和background-color变化
1.2优化：
需要多次重排的，可以考虑脱离文档流
需要创建多个节点的，一次性增删节点

七、async await

async await减少回调地狱是generate yield是语法糖

八、装饰器

装饰器是一个函数，给类和属性方法价一些东西，函数的参数是装饰的内容，立刻执行装饰器
如果是装饰的是一个类，参数就是这个类，应用场景是实现代码复用
如果装饰的是一个类的方法，参数有三个，target，name，descriptor ；target当前类，name装饰名称，descriptor装饰名称描述，

九、事件循环

执行规则： 同步后异步，微后宏
宏任务：定时器，requestaniamationframe，i/o
微任务：process.Nexttick，promise,object.observe,MutationObserver,
九、网站部署
注意：如果是history模式需要后台配置路由重写到index.html

十、离线的方式

1.Cookies：容量小，游览器可以关闭，会过期，会被带上请求里面，有跨域问题
2.Locastorage 永久存储
3.sessionStorage 会话存储
4.IndexDB
5.web SQL
3.离线缓存需要中缓存页面加manifes=‘cache.manifest’，同级加文件cache.manifest,CACHE存的文件 ,NETWORK不存的文件,FALLBACK访问无路径的处理
离线缓存存放位置：

十一、 Websocket

强大的库Socket.io，使用方便便捷，需要前后端配合使用一个监听事件一个触发事件，发布订阅的感觉。

十二、网站移动端的兼容的问题

后续再单独一个文章说明需要注意
1.部分安卓手机点击图片会放大，禁止设置img ：pointer-events：none

十三、混合开发hybrid

1.H5和原生app的交互：app写代码给前端一个方法名前端调用实现的。
2.vue项目为app：写好vue项目build打包后使用hbuilderx打包成app，其实是给你套类一个app的壳。用hbuilderx创建一个5+app空壳，把打包的文件

十四、HTTP

Dns解析:
a.游览器自身的dns缓存找，缓存时间为一分钟，只能容纳1000条
b.如果游览器自身的dns缓存没找到，那么游览器就会去系统自身的dns缓存找
c.如果没找到，那么游览器就会去从电脑本地的hosts文件里找
d.前面三个都没有的情况下，就会递归去域名服务器找
html解析：
解析html同时遇到css和js就下载，html解析生成dom树，css生成css渲染树，dom树和css树结合成render树，计算元素尺寸和位置，渲染呈现页面

长链接结束：keep-alive timeout：Httpd守护进程，一般都提供了keep-alive timeout时间设置参数。比如nginx的keepalive_timeout，和Apache的KeepAliveTimeout。这个keepalive_timout时间值意味着：一个http产生的tcp连接在传送完最后一个响应后，还需要hold住keepalive_timeout秒后，才开始关闭这个连接。

详细：连接建立之后，如果客户端一直不发送数据，或者隔很长时间才发送一次数据，当连接很久没有数据报文传输时如何去确定对方还在线，到底是掉线了还是确实没有数据传输，连接还需不需要保持，这种情况在TCP协议设计中是需要考虑到的。

TCP协议通过一种巧妙的方式去解决这个问题，当超过一段时间之后，TCP自动发送一个数据为空的报文（侦测包）给对方，如果对方回应了这个报文，说明对方还在线，连接可以继续保持，如果对方没有报文返回，并且重试了多次之后则认为链接丢失，没有必要保持连接。

十五、多页签通信

1…Localstorage：
a页面：localStorage.setItem(1,2)
b页面：window.addEventListener(‘storage’,(e) =>{console.log(e,‘111111’)})
2…Cookie+setinterval：同个域名下

3.websocket
4.SharedWorker

十六、XSS和CSRF

1.明确xss和csrf是什么
2.特点
3.防范
xss跨站脚本攻击，游览器请求时注入脚本攻击；恶意攻击客户端，注入恶意的客户端代码，对客户端网页进行篡改游览器内容；窃取用户信息；

防范：

Csrf：跨站请求伪造，它是黑客通过网站b 诱使用户去已经登录的网站a进行一些违背用户意愿的请求造成用户损失
防范：（主要是中服务器端）
1.Referer
2.加token，主流
3.加验证码，

十七、AXIOS 和FETCH区别

十八、多入口打包