Akino's Blog

一些乱起八糟的东西

最近学习有点疲惫了，就随便学学吧，记下来主要是为了不白看，记忆深刻一点。

OPTIONS 请求

用途

获取服务器支持的 HTTP 请求方法
检查服务器的性能

为什么需要它？

这个请求方法一般和跨域挂钩，使用 OPTIONS 旨在发送正式请求前先探测目标地址具有什么约束，类似 TCP 的探测报文，这一行为也可以称为“预检”。

手写 call、apply、bind

call

Function.prototype._call = function (thisArg, args) {
  thisArg = thisArg || window;
  let _fn = Symbol('_fn'); //创建唯一键值，防止键名冲突
  thisArg[_fn] = this; //将函数挂载到thisArg上，可以通过this访问上面的值
  let res = thisArg[_fn](...args);
  delete thisArg[_fn]; //删除对象方法，恢复原对象内容
  return res;
};

apply

原理一样，参数传递不同

Function.prototype._apply = function (thisArg, ...args) {
  thisArg = thisArg || window;
  let _fn = Symbol('_fn'); //创建唯一键值，防止键名冲突
  thisArg[_fn] = this; //将函数挂载到thisArg上，可以通过this访问上面的值
  let res = thisArg[_fn](...args);
  delete thisArg[_fn]; //删除对象方法，恢复原对象内容
  return res;
};

bind

Function.prototype._bind = function (thisArg, ...args) {
  let _fn = Symbol('_fn');
  thisArg[_fn] = this;

  return function (...rest) {
    thisArg = thisArg || window;
    let res = thisArg[_fn](...args.concat(rest)); //原bind方法会拼接之前传递的参数
    delete thisArg[_fn]; //删除对象方法，恢复原对象内容
    return res;
  };
};

水平垂直居中的方法

/* 方法1 利用定位居中 */
position: relative;
top: 50%;
left: 50%
transform: translate(-50%);

/* 方法2 父盒子使用display布局 */
display: flex;
justify-content: center;
align-items: center;

/* 方法3 脱离文档流式居中 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

浮动布局实现三栏自适应

如果要实现左右定宽、中间自适应只需要把注释样式生效即可。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        left: 50%;
        width: 90vw;
        height: 50vw;
        margin-top: 50%;
        transform: translate(-50%, -50%);
      }

      .left {
        float: left;
        /* min-width: 200px; */
        min-height: 100%;
        background-color: #ccc;
      }

      .center {
        /* margin: 0 200px; */
        min-height: 100%;
        background-color: bisque;
      }

      .right {
        float: right;
        /* min-width: 250px; */
        min-height: 100%;
        background-color: #ccfac2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="center">center</div>
    </div>
  </body>
</html>

效果

三栏自适应

两栏定宽中间自适应

js 宽松模式和严格模式区别

这里只记录一下我能理解的

严格模式下，call、apply传入null或undefined不会转换为 window，而是保持原样。
严格模式下，变量需要在使用前声明，直接给变量赋值，不会隐式创建全局变量。
严格模式下，不允许直接使用八进制字面量。
严格模式下，函数形参同名会报错。
严格模式下，对象中定义同名属性会抛出语法错误。
严格模式下, delete 运算符后跟随非法标识符(即 delete 不存在的标识符)会抛出语法错误；非严格模式下，会静默失败并返回 false

vue3.0 新增内容

响应式将defineProperties更换为Proxy，提升了性能，但是降低了兼容性，当然，vue 还是提供了旧观察模式的编译方式。
组件逻辑都写进函数，setup()(Composition API)取代data()，该函数返回一个对象暴露给模板使用，并且只在初始化时调用一次。
生命周期变更。beforeCreate和created被setup替代，beforeDestory和destoryed更名为onBeforeUnMount和onUnmouted，新增onRenderTriggered和onRenderTracked，其它生命周期名称前都加了一个on。另外，钩子是需要从 vue 中导入。

。。。。。。。

暂时先写这些，毕竟也没有正经学 vue3，以后有机会再补充吧！

图片懒加载实现

传统的实现是通过监听滚动条滚动来实现，然而这种方法计算太频繁了，性能不好，故采用IntersectionObserver这个对象来监听元素是否出现在视窗内，因为它的性能比监听滚动条要好。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        left: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        margin-top: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
      }

      .img {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <img
        class="img"
        src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
        data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
      />
      <img
        class="img"
        src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
        data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
      />
      <img
        class="img"
        src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
        data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
      />
      <img
        class="img"
        src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
        data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
      />
      <img
        class="img"
        src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
        data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
      />
    </div>
  </body>

  <script>
    let imgs = Array.from(document.getElementsByClassName('img'));
    let io = new IntersectionObserver(lazyLoad);
    imgs.forEach(img => {
      io.observe(img); //监听img
    });
    function lazyLoad(entry) {
      entry.forEach(el => {
        //遍历每个img的状态
        console.log(el.isIntersecting);
        if (el.isIntersecting) {
          el.target.src = el.target.getAttribute('data-src');
        } else {
          el.target.src = '';
        }
      });
    }
  </script>
</html>

本地搜索