• 封装Cookie的增删改查 history worker的使用 touch事件

    封装Cookie的增删改查

          var manageCookies = {
        set: function (key, value, expTime) {
          document.cookie = key + '=' + value + ';max-age' + expTime;
          return this;
        },
        delete: function (key) {
          this.set(key, '', -1);
        },
        get: function (key, cb) {
          var CookiesArray = document.cookie.split('; ');
          for (var i = 0; i < CookiesArray.length; i++) {
            var CookieItem = CookiesArray[i];
            var CookieItemArray = CookieItem.split('=');
            if (CookiesArray[0] === key) {
              cb(CookiesArray[i]);
              return this;
            }
          }
          cn(undefined);
          return this;
        },
      };

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    history

    history.replaceState

    		history.replaceState('this is test', null , 'test')

    • 1

    参数一 状态对象 参数二 替换的名字 参数三 改变的url地址
    history.length 不会变
    在这里插入图片描述

    history.pushState

    参数一 状态对象 参数二 替换的名字 参数三 改变的url地址
    history.length 会变
    在这里插入图片描述
    在每一次活动的历史条目发生改变的时候 就会有一个popstate事件派发给window对象
    所以如果想后退时显示相应的样 式 就可以监听popstate事件 获取相应的样式信息挂载

    worker的使用

    worker是异步的
    worker是打印不出document window parent的
    但是是可以发送AJAX请求

    html文件

          if (window.Worker) {
        //实例化一个worker
        var myWorker = new Worker('worker.js');
        //声明信息
        var message = { addThis: { num1: 1, num2: 1 } };
        //传递信息
        myWorker.postMessage(message);
        //接收信息
        myWorker.onmessage = function (e) {
          console.log(e.data.result);
        };
      }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    worker.js文件

    this.onmessage = function (e) {
  if (e.data.addThis !== undefined) {
    var sumMessage = {
      result: e.data.addThis.num1 + e.data.addThis.num2,
    };
    this.postMessage(sumMessage);
  }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述
    myWorker.terminate(); 终止worker 不再进行通信

    再worker中使用importScripts(‘…’) 可以加载其他的worker
    一个worker也可以委派任务给其他的worker

    px em rem区别

    px 相对于屏幕像素
    em 父级元素设置什么font-size = 1em
    rem 根元素的HTML设置什么font-size = 1rem

    touch事件

          document.addEventListener(
        'touchstart',
        function () {
          console.log('touchstart');
        },
        false
      );
      document.addEventListener(
        'touchmove',
        function () {
          console.log('touchmove');
        },
        false
      );
      document.addEventListener(
        'touchend',
        function () {
          console.log('touchend');
        },
        false
      );
      document.addEventListener(
        'touchcancel',
        function () {
          console.log('touchcancel');
        },
        false
      );
      setTimeout(() => {
        alert('blocked');
      }, 3000);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述
    在这里插入图片描述
    e.type返回事件名称

    DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: orange;
      }
    style>
  head>
  <body>
    <div id="box">div>
    <script>
      document.addEventListener(
        'touchstart',
        function (e) {
          console.log(e.type);
        },
        false
      );
    script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述
    e.touches所有触点

          document.addEventListener(
        'touchstart',
        function (e) {
          console.log(e.touches);
        },
        false
      );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述
    e.targetTouches 作用在当前元素的触点

          document.addEventListener(
        'touchstart',
        function (e) {
          console.log(e.targetTouches);
        },
        false
      );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述
    e.changedTouches 与当前事件相关的所有触点

          document.addEventListener(
        'touchstart',
        function (e) {
          console.log(e.changedTouches);
        },
        false
      );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

          document.addEventListener(
        'touchstart',
        function (e) {
          console.log(e.changedTouches[0]);
        },
        false
      );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    identifier触点的唯一标识
    在这里插入图片描述

    封装touch事件

      <body>
    <div id="box">div>
    <script>
      (function (doc) {
        var Touch = function (selector) {
          return Touch.prototype.init(selector);
        };
        Touch.prototype = {
          init: function (selector) {
            if (typeof selector === 'string') {
              this.elem = doc.querySelector(selector);
              return this;
            }
          },
          tap: function (callback) {
            this.elem.addEventListener('touchstart', fn);
            this.elem.addEventListener('touchend', fn);
            var sTime, eTime;
            function fn(e) {
              e.preventDefault();
              switch (e.type) {
                case 'touchstart':
                  sTime = new Date().getTime();
                case 'touchend':
                  eTime = new Date().getTime();
                  if (eTime - sTime < 500) {
                    callback.call(this, e);
                  }
                  break;
              }
            }
          },
          longtap: function (callback) {
            this.elem.addEventListener('touchstart', fn, false);
            this.elem.addEventListener('touchmove', fn, false);
            this.elem.addEventListener('touchend', fn, false);

            var t = null,
              _self = this;
            function fn(e) {
              switch (e.type) {
                case 'touchstart':
                  t = setTimeout(function () {
                    callback.call(_self, e);
                  }, 500);
                case 'touchmove':
                  clearTimeout(t);
                  t = null;
                  break;
                case 'touchend':
                  clearTimeout(t);
                  t = null;
                  break;
              }
            }
          },
        };
        window.$ = window.Touch = Touch;
      })(document);

      $('#box').tap(function (e) {
        console.log(1);
      });
      $('#box').longtap(function (e) {
        console.log(1);
      });
    script>
  body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
  • 相关阅读:
    router-link 和 router-view的区别
    【机器学习-西瓜书】-第3章-线性回归-学习笔记-下
    HTTP 长连接和 TCP 长连接有什么区别
    ArcGIS Pro SDK （十二）布局 2 布局图形元素
    不见他过: 职场经验
    2020CCPC 秦皇岛站 个人题解
    自然语言处理中的文本聚类：揭示模式和见解
    数据结构-栈和队列（1）
    线性代数（五） | 矩阵对角化 特征值 特征向量
    接口测试5-参数化
  • 原文地址：https://blog.csdn.net/weixin_65402230/article/details/127659506