原生技巧篇

按钮翻面

地图

小案例

https://developers.arcgis.com/javascript/latest/key-features/

这种过渡好帅

鼠标跟随背景移动

核心代码

      const el = document.getElementById("wrapper");
      const d = el.getBoundingClientRect();
      let x = e.clientX - (d.left + Math.floor(d.width / 2));
      let y = e.clientY - (d.top + Math.floor(d.height / 2));
      // Invert values
      x = x - x * 2;
      y = y - y * 2;
      // 圆点
      console.log([x, y]);
      //移动的距离/2
      document.documentElement.style.setProperty("--scale", 1.6);
      document.documentElement.style.setProperty("--x", x / 2 + "px");

      document.documentElement.style.setProperty("--y", y / 2 + "px");

案例

<template>
  <div>
    home-card
    <div class="yl-flex">
      <div
          id="wrapper"
          @mousemove="handleMouseMove"
          @click="handleMouseLeave"
      >
        <img id="image"/>
      </div>
    </div>
  </div>
</template>

<script>
const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};
export default {
  name: "home-card",
  methods: {
    handleMouseMove:debounce(function(e){
      const el = document.getElementById("wrapper");
      const d = el.getBoundingClientRect();
      let x = e.clientX - (d.left + Math.floor(d.width / 2));
      let y = e.clientY - (d.top + Math.floor(d.height / 2));
      // Invert values
      x = x - x * 2;
      y = y - y * 2;
      // 圆点
      console.log([x, y]);
      //移动的距离/2
      document.documentElement.style.setProperty("--scale", 1.6);
      document.documentElement.style.setProperty("--x", x / 2 + "px");

      document.documentElement.style.setProperty("--y", y / 2 + "px");
    },80),

    handleMouseLeave() {
      document.documentElement.style.setProperty("--scale", 1);
      document.documentElement.style.setProperty("--x", 0);
      document.documentElement.style.setProperty("--y", 0);
    }
  }
}
</script>

<style scoped lang="scss">
:root {
  --scale: 1.5;
  --y: 0;
  --x:0;
}

.yl-flex {
  width: 100%;
  height: 800px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  background-color: black;
  outline: none;
  border: none;

  #wrapper {
    width: 100vw;
    height: 100vh;

    #image {
      width: 100vw;
      height: 100vh;
      background-image: url("https://images.unsplash.com/photo-1539035104074-dee66086b5e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=2550&q=80");
      background-size: cover;
      transform: translateX(var(--x)) translateY(var(--y)) scale(var(--scale));
      transition: ease-out 0.7s;

    }
  }
}

</style>

测试框架

• jest

Jest到目前为止，最流行的通用JavaScript测试框架。适用于大多数项目，大多数框架和库，并且对TypeScript和Babel具有强大的支持

• Mocha

JavaScript和Node.js应用程序中的通用测试的另一个流行选择

• jasmine

Jasmine是一个行为驱动的JavaScript测试框架。它很容易上手，易于使用。

• enzyme

测试React组件的JavaScript测试实用程序

• Protractor

Angular应用程序的端到端测试框架，经常与Jasmine一起使用

• Cypress

一个完整的JavaScript端到端测试框架。它使用自己的测试运行程序，并且与Enzyme具有某些语法相似性

这个感觉很叼的样子

焦点

可以加上tabindex=0 来包含文本的元素可聚焦,就可以给div添加获取或者失去焦点的事件

首字母大写

text-transform css 属性指定如何将元素的文本大写

 p{
        text-transform: capitalize;
    }

dom.style.textTransform='capitalize'

顶级await 模块

<script type="module">
    let add = value =>
        new Promise(res => setTimeout(() => res(value), 2000));
    try {
        const text = await add('ccc')
        console.log(text);
    } catch (e) {

    }
    console.log(2);
</script>

Number 自增有趣的知识点

let a = new Number(5);
a.sex=10;
console.log(a.sex); // 10
console.log(10 + a);//15
a++
console.log(a);// 6
console.log(a.sex); // undefined

我们用函数试试,相同的想过
 function dis() { return this }
 let a=dis.call(5)
 a.sex=10 
 a++
 a.sex // undefined

其实a++ 替换了当前的类型

其实我们可以使用toString

let a = {
    sex: 1, x: 10, toString() {
        return this.x++
    }
}
console.log(a + a + a);

html

• <sub> -下标文字
• <sup> -上标文字

<div>
    123<sup>2</sup>+log<sub>2</sub>
</div>

React(渲染库) vue(微型框架) Angular(全功能框架)

很火的css框架

https://github.com/tailwindlabs/tailwindcss

一个有趣的过渡特效

背景图片和背景颜色的技巧

  .card {
    background: #f0ead6;
    background-image: url(https://assets.codepen.io/489403/egypt.jpg);
    background-repeat: no-repeat;
    background-size: 140% 100%;
  }

当图片没有加载出来的时候直接加载颜色,等图片加载出来了会覆盖颜色

四舍五入的保留小数位数

function round(value, decimals) {
    return Number(Math.floor(parseFloat(value + 'e' + decimals)) + 'e-' + decimals);
}

div 进行拉伸

.aaa{
            width: 400px;
            height: 500px;
            resize: both;
            border:2px solid #ccc;
            overflow: hidden;
        }