前言

JS中的类型转换常常被人诟病，因为javascript属于弱类型语言，它对于类型的语言没有强制的限定，这对于我们来说是头疼的。不同的类型之间的运算需要先对数据的类型进行转换，在日常开发中我们经常会用到。

数据类型

基本数据类型

• Number（数字）


• String（字符串）


• Boolean（布尔）


• Null


• Undefined


• Symbol（ES6）

引用数据类型

• object{}


• array[]


• function(){}


• date()

由于JS中拥有动态类型，在定义的时候不用指定数据类型，赋值的时候可以将任意类型赋给同一个变量，例如：let a = 1; a = '1'。

类型转换

什么是类型转换？

简单来说就是将值从一种数据类型转换为另一种数据类型的过程。

分为哪几种？

根据转换的特点分为：显式类型转换（强制转换）和隐式类型转换（自动转换）。

显示类型转换（强制转换）

通过Boolean()——原始值转布尔，Number()——原始值转数字，String()——原始值转字符来进行强制类型转换。这里的转换规则可以直接查看Js官方文档:Annotated ES5

我们从文档中可以知道当我们想进行强制类型转换时，js会自动会帮我们使用ToString(value),ToNumber(value)进行转换。

//原始值转布尔

console.log(Boolean('123'));

console.log(Boolean(123));

console.log(Boolean(null));

console.log(Boolean(undefined));

console.log(Boolean(true));



//原始值转数字

console.log(Number('123'));

console.log(Number(123));

console.log(Number(null));

console.log(Number(undefined));

console.log(Number(true));



//原始值转字符串

console.log(String('123'));

console.log(String(123));

console.log(String(null));

console.log(String(undefined));

console.log(String(true));

结果为：

对象转字符串，数字

通过调用特殊的对象转换方法来完成，在js中有两个方法来执行转换，这两个方法所有的对象都具备，就是用来把对象转换为原始值的。这两个方法分别为toString(),valueOf(),这两个方法对象的构造函数原型上就有，其目的就是要有办法把对象转换为原始类型。

对象转字符串

toString()方法除了Null和Undefined其他的数据类型都具有此方法。通常情况下toString()和String()效果一样。

我们在文档中重点关注对象转字符串，上图中对象转字符串有两个步骤，先是执行自带的ToPrimitive(obj,String),再返回执行结果，分以下几步:

1.判断obj是否为基本类型，是则返回

2.调用对象自带的toString方法，如果能得到一个原始类型，则返回

3.调用对象自带的valueOf方法，如果能得到一个原始类型，则返回

4.报错

对象转数字

对象转数字的话也同样是有两个步骤:先是执行自带的ToPrimitive(obj,Number),再返回执行结果，分以下几步:

1.判断obj是否为基本类型，是则返回

2.调用对象自带的valueOf方法，如果能得到一个原始类型，则返回

3.调用对象自带的toString方法，如果能得到一个原始类型，则返回

4.报错

隐式类型转换

• 当 + 运算作为一元操作符时，会自动调用ToNumber()处理该值。(相当于Number())

例如：console.log(+'123');结果为数字123。
console.log(+[]);结果为0，因为对象[]转换为了0。

• 当 + 运算作为二元操作符，例（a + b）

1.lprim = ToPrimitive(v1)

2.rprim = ToPrimitive(v2)

3.如果lprim是字符串或者rprim是字符串，则返回ToString(lprim)和ToStringrprim()的拼接结果

4.返回ToNumber(lprim) + ToNumber(rprim)

结语

js类型转换规则，相当于历史事件，是已经规定好的，弄清楚它，能更好地和面试官侃侃而谈。最后感谢各位的观看。

节流

在各大面试题中，频繁出现的老油条，节流。

啥叫节流呢？

节流（throttle）：每次触发定时器后，直到这个定时器结束之前无法再次触发。一般用于可预知的用户行为的优化，比如为scroll事件的回调函数添加定时器。

在间隔一段时间执行一次回调的场景有：

1.滚动加载，加载更多或滚到底部监听



2.搜索框，搜索联想功能

简单来说就是，一段时间内重复触发，按一定频率(1s、3s、5s)执行，可配置一开始就执行一次。

如果还不懂，就直接上我们的例子。我们可以看到当我们滑动屏幕的时候，会频繁运行打印这个函数。

当我们进行节流后，给它设置一个时间，那么他就只会在该时间后

上代码

其中fn代表将要运行的函数，delay代表函数触发的时间间隔。

整个代码思路，
timer=null，
flag=false, 默认刚开始不运行
设置一个定时器，
等到delay时间到了，就会开始运行这个函数fn。如果在delay之前，发生了滚动等事件，因为已经
flag = true，只会return 不会运行这个函数fn。只有等带delay到了时间，才会运行函数。

定时器实现的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数。

js

  let count = 0;

        function throttle(fn, delay) {

            let timer = null // 把变量放函数里面，避免全局污染

            let flag = false

            let that = this

            return function () {

                if (flag) return

                flag = true

                let arg = arguments // 此处为fn函数的参数

                timer = setTimeout(() => {

                    fn.apply(that, arg)

                    flag = false

                }, delay)

            }

        }

        function test(a, b) {

            console.log(a, b)

        }

        let throttleTest = throttle(test, 1000)

        // 测试函数

        function test1() {

            console.log('普通test:', count++)

        }



        window.addEventListener('scroll', (e) => {

            // test1() // 不用节流的话，页面滚动一直在调用

            throttleTest(1, 2) // 加上节流，即使页面一直滚动，也只会每隔一秒执行一次test函数

        })

今天开始玩弄css的一些比较冷门但是可能比较实用的属性 object-fit。

首先让我们先看看一张效果图

这两张自拍，你个人觉得哪张比较好看,不用想都知道第一张好看啦，我们肯定希望我们上传的图片都是以第一种图片当头像啊，而不是第二种扁扁的。那么这样的效果是怎么实现的呢？

诀窍 object-fit

相信大多数人都对这个属性比较陌生吧。没咋看过这个属性吧！它有啥用呢？

我来给大家介绍介绍这个属性。
object-fit是一个CSS属性，用于控制图片或视频等替换元素的尺寸和位置，以使其适合其容器。

默认情况下，替换元素的大小取决于其本身的大小，而不是其容器的大小。这可能会导致替换元素与其容器不匹配，或者在缩放容器时无法应用正确的比例。

使用object-fit属性，可以指定替换元素如何调整其大小以适应其容器。它有以下几个值：

• fill：默认值，替换元素会拉伸以填充容器，可能会导致元素的宽高比发生变化。


• contain：替换元素会缩放以适应容器，保持其宽高比，可能会留有空白区域。


• cover：替换元素会缩放以填充容器，保持其宽高比，可能会被裁剪。


• none：替换元素将保持其本来的尺寸和宽高比，可能会溢出容器。


• scale-down：替换元素会根据容器的大小进行缩放，但不会超过其原始大小，可能会留有空白区域。

看完还是好晕，不如直接看代码和效果图

注释解释了代码中每个部分的作用：

• object-fit: cover将图像填充到容器中，保持比例不变。


• border-radius: 50%将图像的四个角设置为圆角，使其呈现圆形。


• width: 340px和height: 340px设置图像的宽度和高度。


• border: 1px solid #ccc设置图像周围的边框。

容器1和容器2具有相同的样式，但容器1使用了object-fit属性，而容器2没有。这样，我们可以比较两者之间的区别，看看object-fit如何影响图像的呈现方式。

html

<!DOCTYPE html>

<html>



<head>

    <title>object-fit示例</title>

    <style>

        /* 容器1样式 */

        .container1 img {

            object-fit: cover; /* 图像填充容器，保持比例不变 */

            border-radius: 50%; /* 圆角 */

            width: 340px;

            height: 340px;

            border: 1px solid #ccc;

        }



        /* 容器2样式 */

        .container2 img {

            border-radius: 50%; /* 圆角 */

            width: 340px;

            height: 340px;

            border: 1px solid #ccc;

        }

    </style>

</head>



<body>

    <h2>自拍照 object-fit</h2>

    <!-- 容器1 -->

    <div class="container1">

        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.e62783996335efecfb15e445205cc5f6?rik=2Z0xpGAe3tn1kQ&riu=http%3a%2f%2fwww.xgsy188.com%2fuploadfile%2f20131151461663843.jpg&ehk=rKGrd9FbAQUFWicdL8Omt%2bFaMw%2f09v2obcuVTAWca4w%3d&risl=&pid=ImgRaw&r=0" alt="自拍照">

    </div>



    <h2>自拍照2</h2>

    <!-- 容器2 -->

    <div class="container2">

        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.e62783996335efecfb15e445205cc5f6?rik=2Z0xpGAe3tn1kQ&riu=http%3a%2f%2fwww.xgsy188.com%2fuploadfile%2f20131151461663843.jpg&ehk=rKGrd9FbAQUFWicdL8Omt%2bFaMw%2f09v2obcuVTAWca4w%3d&risl=&pid=ImgRaw&r=0" alt="自拍照">

    </div>

</body>



</html>

reduce 是 JavaScript 数组对象上的一个高阶函数，它可以用来迭代数组中的所有元素，并返回一个单一的值。其常用的语法为：
array.reduce(callback[, initialValue])

其中，callback 是一个回调函数，它接受四个参数：累加器（初始值或上一次回调函数的返回值）、当前元素、当前索引、操作的数组本身。initialValue 是一个可选的初始值，如果提供了该值，则作为累加器的初始值，否则累加器的初始值为数组的第一个元素。
reduce 函数会从数组的第一个元素开始，依次对数组中的每个元素执行回调函数。回调函数的返回值将成为下一次回调函数的第一个参数（累加器）。最后，reduce 函数返回最终的累加结果。
以下是一个简单的 reduce
示例，用于计算数组中所有元素的和：

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // 15

在上面的代码中，reduce 函数从数组的第一个元素开始，计算累加值，返回最终的累加结果 15。
除了数组的求和，reduce 函数还可以用于其他各种用途，如数组求平均数、最大值、最小值等。此外，reduce 函数还可以与 map、filter、forEach 等函数组合使用，实现更加复杂的数据操作。

当然，以下是一些 reduce 的实际应用案例，帮助你更好地理解它的用法：

计算数组的平均数

const arr = [1, 2, 3, 4, 5];

const average = arr.reduce((accumulator, currentValue, index, array) => {

  accumulator += currentValue;

  if (index === array.length - 1) {

    return accumulator / array.length;

  } else {

    return accumulator;

  }

});

console.log(average); // 3

求数组的最大值

const arr = [1, 2, 3, 4, 5];

const max = arr.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue));

console.log(max); // 5

求数组的最小值

const arr = [1, 2, 3, 4, 5];

const min = arr.reduce((accumulator, currentValue) => Math.min(accumulator, currentValue));

console.log(min); // 1

数组去重

const arr = [1, 2, 3, 3, 4, 4, 5];

const uniqueArr = arr.reduce((accumulator, currentValue) => {

  if (!accumulator.includes(currentValue)) {

    accumulator.push(currentValue);

  }

  return accumulator;

}, []);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

计算数组中每个元素出现的次数

const arr = [1, 2, 3, 3, 4, 4, 5];

const countMap = arr.reduce((accumulator, currentValue) => {

  if (!accumulator[currentValue]) {

    accumulator[currentValue] = 1;

  } else {

    accumulator[currentValue]++;

  }

  return accumulator;

}, {});

console.log(countMap); // {1: 1, 2: 1, 3: 2, 4: 2, 5: 1}

实现数组分组

const arr = [1, 2, 3, 4, 5];

const result = arr.reduce((accumulator, currentValue) => {

  if (currentValue % 2 === 0) {

    accumulator.even.push(currentValue);

  } else {

    accumulator.odd.push(currentValue);

  }

  return accumulator;

}, { even: [], odd: [] });

console.log(result); // {even: [2, 4], odd: [1, 3, 5]}

计算数组中连续递增数字的长度

const arr = [1, 2, 3, 5, 6, 7, 8, 9];

const result = arr.reduce((accumulator, currentValue, index, array) => {

  if (index === 0 || currentValue !== array[index - 1] + 1) {

    accumulator.push([currentValue]);

  } else {

    accumulator[accumulator.length - 1].push(currentValue);

  }

  return accumulator;

}, []);

const maxLength = result.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue.length), 0);

console.log(maxLength); // 5

计算对象数组的属性总和

const arr = [

  { name: 'Alice', age: 25 },

  { name: 'Bob', age: 30 },

  { name: 'Charlie', age: 35 },

];

const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue.age, 0);

console.log(result); // 90

将对象数组转换为键值对对象

const arr = [

  { name: 'Alice', age: 25 },

  { name: 'Bob', age: 30 },

  { name: 'Charlie', age: 35 },

];

const result = arr.reduce((accumulator, currentValue) => {

  accumulator[currentValue.name] = currentValue.age;

  return accumulator;

}, {});

console.log(result); // {Alice: 25, Bob: 30, Charlie: 35}

计算数组中出现次数最多的元素

const arr = [1, 2, 3, 4, 4, 4, 5, 5, 6, 6, 6, 6];

const result = arr.reduce((accumulator, currentValue) => {

  accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;

  return accumulator;

}, {});

const maxCount = Math.max(...Object.values(result));

const mostFrequent = Object.keys(result).filter(key => result[key] === maxCount).map(Number);

console.log(mostFrequent); // [6]

实现 Promise 串行执行

const promise1 = () => Promise.resolve('one');

const promise2 = (input) => Promise.resolve(input + ' two');

const promise3 = (input) => Promise.resolve(input + ' three');



const promises = [promise1, promise2, promise3];

const result = promises.reduce((accumulator, currentValue) => {

  return accumulator.then(currentValue);

}, Promise.resolve('start'));

result.then(console.log); // 'one two three'

对象属性值求和

const obj = {

  a: 1,

  b: 2,

  c: 3

};

const result = Object.values(obj).reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(result); // 6

按属性对数组分组

const arr = [

  { id: 1, name: 'John' },

  { id: 2, name: 'Mary' },

  { id: 3, name: 'Bob' },

  { id: 4, name: 'Mary' }

];

const result = arr.reduce((accumulator, currentValue) => {

  const key = currentValue.name;

  if (!accumulator[key]) {

    accumulator[key] = [];

  }

  accumulator[key].push(currentValue);

  return accumulator;

}, {});

console.log(result);

/*

{

  John: [{ id: 1, name: 'John' }],

  Mary: [

    { id: 2, name: 'Mary' },

    { id: 4, name: 'Mary' }

  ],

  Bob: [{ id: 3, name: 'Bob' }]

}

*/

扁平化数组

// 如果你有一个嵌套的数组，可以使用reduce将其扁平化成一个一维数组。例如：

const nestedArray = [[1, 2], [3, 4], [5, 6]];

const flattenedArray = nestedArray.reduce((acc, curr) => acc.concat(curr), []);

console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

合并对象

// 可以使用reduce将多个对象合并成一个对象。例如：

const obj1 = { a: 1, b: 2 };

const obj2 = { c: 3, d: 4 };

const obj3 = { e: 5, f: 6 };

const mergedObj = [obj1, obj2, obj3].reduce((acc, curr) => Object.assign(acc, curr), {});

console.log(mergedObj); // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

复制代码
作者：思学堂
来源：juejin.cn/post/7223278436893163581
>

Symbol是JavaScript中的原始数据类型之一，它表示一个唯一的、不可变的值，通常用作对象属性的键值。由于Symbol值是唯一的，因此可以防止对象属性被意外地覆盖或修改。以下是Symbol的方法和属性整理：

属性

Symbol.length

Symbol构造函数的length属性值为0。

示例代码：

console.log(Symbol.length); // 0

方法

Symbol.for()

Symbol.for()方法会根据给定的字符串key，返回一个已经存在的symbol值。如果不存在，则会创建一个新的Symbol值并将其注册到全局Symbol注册表中。

示例代码：

const symbol1 = Symbol.for('foo');

const symbol2 = Symbol.for('foo');



console.log(symbol1 === symbol2); // true

使用场景： 当我们需要使用一个全局唯一的Symbol值时，可以使用Symbol.for()方法来获取或创建该值。例如，在多个模块之间共享某个Symbol值时，我们可以使用Symbol.for()来确保获取到的Symbol值是唯一的。

Symbol.keyFor()

Symbol.keyFor()方法会返回一个已经存在的Symbol值的key。如果给定的Symbol值不存在于全局Symbol注册表中，则返回undefined。

示例代码：

const symbol1 = Symbol.for('foo');

const key1 = Symbol.keyFor(symbol1);



const symbol2 = Symbol('bar');

const key2 = Symbol.keyFor(symbol2);



console.log(key1); // 'foo'

console.log(key2); // undefined

使用场景： 当我们需要获取一个全局唯一的Symbol值的key时，可以使用Symbol.keyFor()方法。但需要注意的是，只有在该Symbol值被注册到全局Symbol注册表中时，才能使用Symbol.keyFor()方法获取到其key。

Symbol()

Symbol()函数会返回一个新的、唯一的Symbol值。可以使用可选参数description来为Symbol值添加一个描述信息。

示例代码：

const symbol1 = Symbol('foo');

const symbol2 = Symbol('foo');



console.log(symbol1 === symbol2); // false

使用场景： 当我们需要使用一个唯一的Symbol值时，可以使用Symbol()函数来创建该值。通常情况下，我们会将Symbol值用作对象属性的键值，以确保该属性不会被意外地覆盖或修改。

Symbol.prototype.toString()

Symbol.prototype.toString()方法会返回Symbol值的字符串表示形式，该表示形式包含Symbol()函数创建时指定的描述信息。

示例代码：

const symbol = Symbol('foo');



console.log(symbol.toString()); // 'Symbol(foo)'

使用场景： 当我们需要将一个Symbol值转换成字符串时，可以使用Symbol.prototype.toString()方法。

Symbol.prototype.valueOf()

Symbol.prototype.valueOf()方法会返回Symbol值本身。

示例代码：

const symbol = Symbol('foo');



console.log(symbol.valueOf()); // Symbol(foo)

使用场景： 当我们需要获取一个Symbol值本身时，可以使用Symbol.prototype.valueOf()方法。

Symbol.iterator

Symbol.iterator是一个预定义好的Symbol值，表示对象的默认迭代器方法。该方法返回一个迭代器对象，可以用于遍历该对象的所有可遍历属性。

示例代码：

const obj = { a: 1, b: 2 };



for (const key of Object.keys(obj)) {

  console.log(key);

}

// Output:

// 'a'

// 'b'



for (const key of Object.getOwnPropertyNames(obj)) {

  console.log(key);

}

// Output:

// 'a'

// 'b'



for (const key of Object.getOwnPropertySymbols(obj)) {

  console.log(key);

}

// Output: 

// No output



obj[Symbol.iterator] = function* () {

  for (const key of Object.keys(this)) {

    yield key;

  }

}



for (const key of obj) {

  console.log(key);

}

// Output:

// 'a'

// 'b'

使用场景： 当我们需要自定义一个对象的迭代行为时，可以通过定义Symbol.iterator属性来实现。例如，对于自定义的数据结构，我们可以定义它的Symbol.iterator方法以便能够使用for...of语句进行遍历。

Symbol.hasInstance

Symbol.hasInstance是一个预定义好的Symbol值，用于定义对象的 instanceof 操作符行为。当一个对象的原型链中存在Symbol.hasInstance方法时，该对象可以被instanceof运算符使用。

示例代码：

class Foo {

  static [Symbol.hasInstance](obj) {

    return obj instanceof Array;

  }

}



console.log([] instanceof Foo); // true

console.log({} instanceof Foo); // false

使用场景： 当我们需要自定义一个对象的 instanceof 行为时，可以通过定义Symbol.hasInstance方法来实现。

Symbol.isConcatSpreadable

Symbol.isConcatSpreadable是一个预定义好的Symbol值，用于定义对象在使用concat()方法时的展开行为。如果一个对象的Symbol.isConcatSpreadable属性为false，则在调用concat()方法时，该对象不会被展开。

示例代码：

const arr1 = [1, 2];

const arr2 = [3, 4];

const obj = { length: 2, 0: 5, 1: 6, [Symbol.isConcatSpreadable]: false };



console.log(arr1.concat(arr2)); // [1, 2, 3, 4]

console.log(arr1.concat(obj)); // [1, 2, { length: 2, 0: 5, 1: 6, [Symbol(Symbol.isConcatSpreadable)]: false }]

使用场景： 当我们需要自定义一个对象在使用concat()方法时的展开行为时，可以通过定义Symbol.isConcatSpreadable属性来实现。

Symbol.toPrimitive

Symbol.toPrimitive是一个预定义好的Symbol值，用于定义对象在被强制类型转换时的行为。如果一个对象定义了Symbol.toPrimitive方法，则在将该对象转换为原始值时，会调用该方法。

示例代码：

const obj = {

  valueOf() {

    return 1;

  },

  [Symbol.toPrimitive](hint) {

    if (hint === 'number') {

      return 2;

    } else if (hint === 'string') {

      return 'foo';

    } else {

      return 'default';

    }

  }

};



console.log(+obj); // 2

console.log(`${obj}`); // 'foo'

console.log(obj + ''); // 'default'

使用场景： 当我们需要自定义一个对象在被强制类型转换时的行为时，可以通过定义Symbol.toPrimitive方法来实现。

Symbol.toStringTag

Symbol.toStringTag是一个预定义好的Symbol值，用于定义对象在调用Object.prototype.toString()方法时返回的字符串。如果一个对象定义了Symbol.toStringTag属性，则在调用该对象的toString()方法时，会返回该属性对应的字符串。

示例代码：

class Foo {

  get [Symbol.toStringTag]() {

    return 'Bar';

  }

}



console.log(Object.prototype.toString.call(new Foo())); // '[object Bar]'

使用场景： 当我们需要自定义一个对象在调用Object.prototype.toString()方法时返回的字符串时，可以通过定义Symbol.toStringTag属性来实现。

Symbol.species

Symbol.species是一个预定义好的Symbol值，用于定义派生对象的构造函数。如果一个对象定义了Symbol.species属性，则在调用该对象的派生方法（如Array.prototype.map()）时，返回的新对象会使用该属性指定的构造函数。

示例代码：

class MyArray extends Array {

  static get [Symbol.species]() {

    return Array;

  }

}



const myArr = new MyArray(1, 2, 3);

const arr = myArr.map(x => x * 2);



console.log(arr instanceof MyArray); // false

console.log(arr instanceof Array); // true

使用场景： 当我们需要自定义一个派生对象的构造函数时，可以通过定义Symbol.species属性来实现。

Symbol.match

Symbol.match是一个预定义好的Symbol值，用于定义对象在调用String.prototype.match()方法时的行为。如果一个对象定义了Symbol.match方法，则在调用该对象的match()方法时，会调用该方法进行匹配。

示例代码：

class Foo {

  [Symbol.match](str) {

    return str.indexOf('foo') !== -1;

  }

}



console.log('foobar'.match(new Foo())); // true

console.log('barbaz'.match(new Foo())); // false

使用场景： 当我们需要自定义一个对象在调用String.prototype.match()方法时的行为时，可以通过定义Symbol.match方法来实现。

Symbol.replace

Symbol.replace是一个预定义好的Symbol值，用于定义对象在调用String.prototype.replace()方法时的行为。如果一个对象定义了Symbol.replace方法，则在调用该对象的replace()方法时，会调用该方法进行替换。

示例代码：

class Foo {

  [Symbol.replace](str, replacement) {

    return str.replace('foo', replacement);

  }

}



console.log('foobar'.replace(new Foo(), 'baz')); // 'bazbar'

console.log('barbaz'.replace(new Foo(), 'baz')); // 'barbaz'

使用场景： 当我们需要自定义一个对象在调用String.prototype.replace()方法时的行为时，可以通过定义Symbol.replace方法来实现。

Symbol.search

Symbol.search是一个预定义好的Symbol值，用于定义对象在调用String.prototype.search()方法时的行为。如果一个对象定义了Symbol.search

class Foo {

  [Symbol.search](str) {

    return str.indexOf('foo');

  }

}



console.log('foobar'.search(new Foo())); // 0

console.log('barbaz'.search(new Foo())); // -1

使用场景： 当我们需要自定义一个对象在调用String.prototype.search()方法时的行为时，可以通过定义Symbol.search方法来实现。

Symbol.split

Symbol.split是一个预定义好的Symbol值，用于定义对象在调用String.prototype.split()方法时的行为。如果一个对象定义了Symbol.split方法，则在调用该对象的split()方法时，会调用该方法进行分割。

示例代码：

class Foo {

  [Symbol.split](str) {

    return str.split(' ');

  }

}



console.log('foo bar baz'.split(new Foo())); // ['foo', 'bar', 'baz']

console.log('foobarbaz'.split(new Foo())); // ['foobarbaz']

使用场景： 当我们需要自定义一个对象在调用String.prototype.split()方法时的行为时，可以通过定义Symbol.split方法来实现。

Symbol.iterator

Symbol.iterator是一个预定义好的Symbol值，用于定义对象在被遍历时的行为。如果一个对象定义了Symbol.iterator方法，则可以使用for...of循环、扩展运算符等方式来遍历该对象。

示例代码：

class Foo {

  constructor() {

    this.items = ['foo', 'bar', 'baz'];

  }



  *[Symbol.iterator]() {

    for (const item of this.items) {

      yield item;

    }

  }

}



const foo = new Foo();



for (const item of foo) {

  console.log(item);

}



// 'foo'

// 'bar'

// 'baz'

使用场景： 当我们需要自定义一个对象在被遍历时的行为时，可以通过定义Symbol.iterator方法来实现。比如，我们可以通过实现Symbol.iterator方法来支持自定义数据结构的遍历。

Symbol.toPrimitive

Symbol.toPrimitive是一个预定义好的Symbol值，用于定义对象在被强制类型转换时的行为。如果一个对象定义了Symbol.toPrimitive方法，则可以通过调用该方法来进行强制类型转换。

示例代码：

const obj = {

  valueOf() {

    return 1;

  },

  [Symbol.toPrimitive](hint) {

    if (hint === 'default') {

      return 'default';

    } else if (hint === 'number') {

      return 2;

    } else {

      return 'foo';

    }

  }

};



console.log(+obj); // 2

console.log(`${obj}`); // 'foo'

console.log(obj + ''); // 'default'

使用场景： 当我们需要自定义一个对象在被强制类型转换时的行为时，可以通过定义Symbol.toPrimitive方法来实现。

Symbol.toStringTag

Symbol.toStringTag是一个预定义好的Symbol值，用于定义对象在调用Object.prototype.toString()方法时返回的字符串。如果一个对象定义了Symbol.toStringTag属性，则在调用该对象的toString()方法时，会返回该属性对应的字符串。

示例代码：

class Foo {

  get [Symbol.toStringTag]() {

    return 'Bar';

  }

}



console.log(Object.prototype.toString.call(new Foo())); // '[object Bar]'

使用场景： 当我们需要自定义一个对象在调用Object.prototype.toString()方法时返回的字符串时，可以通过定义Symbol.toStringTag属性来实现。这样做有助于我们更清晰地表示对象的类型。

Symbol.unscopables

Symbol.unscopables是一个预定义好的Symbol值，用于定义对象在使用with语句时的行为。如果一个对象定义了Symbol.unscopables属性，则在使用with语句时，该对象的指定属性将不会被绑定到with语句的环境中。

示例代码：

const obj = {

  a: 1,

  b: 2,

  c: 3,

  [Symbol.unscopables]: {

    c: true

  }

};



with (obj) {

  console.log(a); // 1

  console.log(b); // 2

  console.log(c); // ReferenceError: c is not defined

}

使用场景： 由于with语句会带来一些安全性问题和性能问题，因此在实际开发中不建议使用。但是，如果确实需要使用with语句，可以通过定义Symbol.unscopables属性来避免某些属性被误绑定到with语句的环境中。

Symbol.hasInstance

Symbol.hasInstance是一个预定义好的Symbol值，用于定义对象在调用instanceof运算符时的行为。如果一个对象定义了Symbol.hasInstance方法，则在调用该对象的instanceof运算符时，会调用该方法来判断目标对象是否为该对象的实例。

示例代码：

class Foo {

  static [Symbol.hasInstance](obj) {

    return Array.isArray(obj);

  }

}



console.log([] instanceof Foo); // true

console.log({} instanceof Foo); // false

使用场景： 当我们需要自定义一个对象在调用instanceof运算符时的行为时，可以通过定义Symbol.hasInstance方法来实现。比如，我们可以通过实现Symbol.hasInstance方法来支持自定义数据类型的判断。

总结

Symbol是ES6中新增的一种基本数据类型，用于表示独一无二的值。Symbol值在语言层面上解决了属性名冲突的问题，可以作为对象的属性名使用，并且不会被意外覆盖。除此之外，Symbol还具有以下特点：

• Symbol值是唯一的，每个Symbol值都是独一无二的，即使是通过相同的描述字符串创建的Symbol值，也不会相等；


• Symbol值可以作为对象的属性名使用，并且不会被意外覆盖；


• Symbol值可以作为私有属性来使用，因为无法通过对象外部访问对象中的Symbol属性；


• Symbol值可以被用作常量，因为它们是唯一的；


• Symbol值可以用于定义迭代器、类型转换规则、私有属性、元编程等高级功能。

在使用Symbol时需要注意以下几点：

• Symbol值不能使用new运算符创建；


• Symbol值可以通过描述字符串来创建，但是描述字符串并不是Symbol值的唯一标识符；


• Symbol属性在使用时需要用[]来访问，不能使用.运算符；


• 同一对象中的多个Symbol属性是独立的，它们之间不会互相影响。

总之，Symbol是一个非常有用的数据类型，在JavaScript中具有非常广泛的应用。使用Symbol可以有效地避免属性名冲突问题，并且可以为对象提供一些高级功能。熟练掌握Symbol，有助于我们写出更加健壮、高效和可维护的Jav

直接上最终效果

基本页面结构

      <div class="tab-list">

        <div

          v-for="tab in tabList"

          :key="tab.id"

          class="tab-item"

          :class="activeTab === tab.id ? 'tab-selected' : ''"

          @click="onTab(tab.id)"

        >

          <image :src="tab.icon" class="tab-icon" />

          <div>{{ tab.label }}</div>

        </div>

      </div>

  $tab-height: 52px;

  $tab-bgcolor: #e2e8f8

  

  .tab-list {

    display: flex;

    border-radius: 12px 12px 0 0;

    background-color: $tab-bgcolor;



    .tab-item {

      flex: 1;

      height: $tab-height;

      display: flex;

      justify-content: center;

      align-items: center;

      font-size: 15px;

      opacity: 0.65;

      color: $primary-color;

      font-weight: 600;

      position: relative;

    }

    

    .tab-icon {

      width: 17px;

      height: 17px;

      margin-right: 4px;

    }

    

    .tab-selected {

      opacity: 1;

      background: #ffffff;

    }



  }

添加上半两个圆角

这个很简单

    .tab-selected {

      opacity: 1;

      background: #ffffff;

      // 新增

      border-radius: 12px 12px 0 0;

    }

添加下半两个反圆角

加两个辅助的伪元素

    .tab-selected::before {

      content: '';

      position: absolute;

      left: -12px;

      bottom: 0;

      width: 12px;

      height: $tab-height;

      background: red;

      border-radius: 0 0 12px 0;

    }

    .tab-selected::after {

      content: '';

      position: absolute;

      right: -12px;

      bottom: 0;

      width: 12px;

      height: $tab-height;

      background: red;

      border-radius: 0 0 0 12px;

    }

再添加box-shadow

    .tab-selected {

      opacity: 1;

      background: #ffffff;

      border-radius: 12px 12px 0 0;

      // 新装置

      box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;

    }

到这个就差不多可以收尾了，把伪元素的背景色改为tabs的背景色

    .tab-selected::before {

      content: '';

      position: absolute;

      left: -12px;

      bottom: 0;

      width: 12px;

      height: $tab-height;

      background: #e2e8f8;  // 修改

      border-radius: 0 0 12px 0;

    }

    .tab-selected::after {

      content: '';

      position: absolute;

      right: -12px;

      bottom: 0;

      width: 12px;

      height: $tab-height;

      background: #e2e8f8; // 修改

      border-radius: 0 0 0 12px;

    }

再处理下box-shadow

    .tab-selected {

      opacity: 1;

      background: #ffffff;

      border-radius: 12px 12px 0 0;

      // box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;

      box-shadow: 12px 12px 0 0 #ffffff, -12px 12px 0 0 #ffffff;

    }

完美

但是两边的还会有问题

父级元素overflow:hidden即可

.tab-list {

    display: flex;

    position: relative;

    z-index: 2;

    border-radius: 12px 12px 0 0;

    background-color: #e2e8f8;

    overflow: hidden; // 新增

 }

收工

参考

CSS3 实现双圆角 Tab 菜单

相关知识点回顾

box-shadow

1. x轴偏移 右为正


2. y轴偏移 下为正


3. 模糊半径


4. 阴影大小


5. 颜色


6. 位置 inset

border-radius

先记得下面这个图

• 一个值的时候设置1/2/3/4


• 两个值的时候设置 1/3，2/4


• 三个值的时候设置1，2/4, 3


• 四个值就简单了1，2，3，4

border-radius 如果需要设置某个角的圆角边框,可以使用下面四个

1. border-top-left-radius;


2. border-top-right-radius;


3. border-bottom-left-radius;


4. border-bottom-right-radius;

又要画一个图了，上面四个属性，又可以设置一个值或者两个值

第一个值是水平半径，第二个是垂直半径。如果省略第二个值，它是从第一个复制

当然border-radius也可以分别设置水平半径 垂直半径

border-radius: 10px / 20px 30px 40px 50px; 水平半径都为10px, 但四个角的垂直半径分别设置

border-radius: 50px 10px / 20px;

下期预告

曲线圆角tabs

传送门

介绍

• 也很久没有在这儿更新文章了，主要自己也不知道写什么。这篇文章不讲技术，主要讲一下我在这最近一年多时间的生活、工作上的一些经历和感受。

2021

• 在 2021 年 9 月，我通过两个星期的准备和面试，拿到几家公司的 offer。通过一些自己的硬性要求（上下班时间、距离、薪资待遇...），最后选择了一家做低代码平台的公司，就在我和 HR 商谈到双方都满意准备定入职时间时，我收到了另一家公司的面试。本来这边我基本上已经确定了，可以选择推脱掉，但是那边说面试流程很快，让我考虑一下。就这样，我在回复后的当天晚上收到了初试并面试通过，随后不到 10 分钟的时间里接到了二面也通过了，就这样不到一个小时，我直接到了 HR 的终面，通过并拿到了 offer。


• 通过 HR 和面试官，我了解到了这家公司是做中老年教育的，有 APP、小程序、H5 ，用的技术也是比较前沿的新技术，通过自己的考虑，对比自己缺失的技术方向，我选择了后者。


• 简单说一下谈的一些内容：
  
  
  
  • 上班时间为早上弹性 10:00；
  
  
  • 每年 2 次调薪；
  
  
  • 年终奖 2 个月，也就是 14 薪，我看的招聘是 16 薪，但 HR 说的之前大小周的是，我去的时候刚好取消了大小周；
  
  
  • 社保全额 12%、公积金全额 5%；
  
  
  • 节假日有节日福利；
  
  
  • 晚上 6 点有晚餐；
  
  
  • 加班到 10 点可以打车；
  
  
  • 每月最后一天发当月工资。
  
  
  
  


• 看到这里，我相信很多人都觉得这是一个不错的工作，当时我也是这么想的，所以我怀着学习深造、技术沉淀、薪资待遇啥的都还不错的想法就去了。


• 在去的第一天，我遇到了我大学的同班同学，可能是我去太早了，还没什么人，巧的是刚好是他给我开的门；这天除了办理入职，剩下的时间就是在熟悉代码，还是和其他公司入职没有什么差异；第二天拿到电脑，我就开始了在这的搬砖之路；前几天每天我都还都是比较正常的上下班，直到我接了第一个需求，每个需求都有排期，你需要自己在需求评讲的时候去思考涉及的改动、可能遇到的问题、是否对其他地方有影响以及需要的开发时间。由于对项目不熟悉、需求的变动等原因，导致好几天的加班，有时候到 21:00 点，有时候 22:00 甚至更晚。当我以为熟悉后下一个需求就好了，然而理想总是丰满的，这个状态并没有什么改变，反而越来越离谱。
  


• 需求一个接一个的来，到我手上的基本上都是大需求，前一个需求还没有提测或者刚提测就要进入下一个需求，边开发新需求边修改测试提的 bug。上线发布的时候加班是最多的，最开始那一两个月，加班太晚（00:00 及以后）还有夜宵，还有半天到一天的调休，招我进来的 HR 走了之后就什么都没有了。


• 在快放春节的前几天，运营还临时加一个春节活动的需求，春节这种节日要做什么不知道提前规划，到要放假的前几天才通知。没出意外，我和另一个测试是公司最后走的。


• 这年的中秋节是什么都没有，春节有一副对联、福字还有一支像钢笔的中性笔，到处都是公司的大而显眼的 logo。

2022

• 很多人可能很奇怪，不是 14 薪吗？上文怎么没有提到呢？是没有还是没发呢？


• 为什么 2021 的年终奖的事情放在 2022 里说，年终奖是发了的，发的时间却是 4 月底，而在发年终奖前，还做了一个考核表让自己填去年在各个方面的表现，然后直系领导再打分。本以为只是简单走个过场，没想到事实却并非如此，年终奖有分级 A、B、C、D 分别占 5%、10%、75%、10%，对应系数 1.5、1.2、1、0，D 是强制比例且必须被淘汰。如果都是强制比例那也还好，但却只有 D 是，A、B 的据我小道消息了解，普通员工中就只有一个 B，至于领导层是否占了名额就不得而知了。在整个过程中，没有一个考核标准，在 2021 年，基本上所有研发都在努力付出，都加班不少，结果还有强制比例的 D，前后端各有一个。前端的 D 还给到了我们意想不到的人头上，一个将三端使用的项目 0-1 搭建起来的人，后端则是忽悠说你是 21 年最后一天来的，得 D也无所谓（最开始没有说 D 强制被淘汰，名额确定后才约谈的，这我也是后来才知道的）。
  


• 从年终奖下来以后，前端走了 4 个人，其他的人也是居安思危，既然这次能这么做，那么也有可能有下次。


• 说一下我为什么没有走：
  
  
  
  • 我才来不到半年时间；
  
  
  • 我当时和女朋友准备结婚；
  
  
  • 当时的行情也不是很好。
  
  
  
  


• 综上，我继续在这里待着，但我也不再像从前那样自己老是加班，每天非的把某个东西做完或者做到某种程度再走。需求也不再没做完一个，领导让接下一个就屁颠屁颠去接（挣表现），领导之前开早会的时候说：xx（我）手上的事情够多了，下一个就换个人来。到过需求的时候，领导：这个还是让xx（我）来吧。我不知道我是该开心还是怎么样，让我来是因为认可我的能力、我对这块比较熟，还是其他什么原因呢？后来我知道了，需求是做不完的，我们当时就 4 个前端，产品却有 5-6个，永远有需求在等待评审开发。


• 后面，我开始了每天 10 点，晚上 8 点前上下班，需求按时完成，但基本上不会再加班，除非遇到什么棘手的问题，一直没解决。


• 说的年终奖后要普调薪资，最终结果是调了公积金的比例由 5% 调到了 12%，因为刚好买了房子，想着也还能接受。


• 然后后面开始搞 OKR ，结果搞了 2 次，不知道什么原因没有继续搞了。


• 5.20 号我领结婚证了，领证后我有一段时间不想让班，抵触的情绪异常高涨，就是去公司就觉得人没有精神、呆呆的。于是我就请假准备休息一下，我花光了我所有假，包括婚假和年假，我觉得还不够还请了 2 天事假，连续请了 2 周。由于假期太长，领导让老板审批，于是我就给老板发了飞书消息，老板也同意了，我给HR看了一下，让后我就开始了休假，结果后面我发现我的请假是在我已经休假后的 2-3 天才通过的。我当时走的时候就只有 HR 那儿没有通过，我还单独给他说了。


• 8 月的婚礼由于疫情，推出到了 9 月底，最后也是圆满的完成了。


• 这年的节假日只有中秋节有一个水杯、背包、飞盘，四个糕点饼，其他节日就什么都没有了，年会也没有。离谱的是，年前一个月左右有次聚餐，后来被称之为年会。团建看什么时候想起来，又一次去运动馆，自己吃中午饭后出发，完了没有晚饭自己回家。
  


• 日期老婆构图时写错啦，哈哈哈哈！！！

2023

• 年初开始打卡了，没有邮件通知上下班打卡时间，但是显示的是早 10 晚 8，领导说的是晚9，如果部门时长过低，会追溯到个人。然后我开始了早 10 晚 7，可能很多人会说，你这不是明目张胆对着干吗？其实我自己也想了很多，我觉得我不应该只有工作，我应该还有生活。还有就是我老婆怀孕了，所以我需要更多的时间，而不是说只有工作，更不说是自己工作得不是很舒服的工作。


• 公司也实施了一些控制成本的方案，降低晚餐标准 25 -> 18，降低打车额度 150 -> 100，...


• 慢慢的，大家不约而同的都在等 4 月，想看今年又会有怎么样的年终考核方式，不出所料，还是去年那一套，自评加领导评。没有任何的依据，还说：你完成工作只是及格，想要高分，就得做出重大贡献啥的。


• 我去年从做产品需求迭代，转到了内部系统基建，完成了桌面端直播开播的从 0-1 的第一版，开发内部新的应用 4 个，维护多个老的内部应用的前后端项目，这样的工作是否合格呢？答案是否定的。


• 4 月底，结果出来了，我不出意外在被裁名单里，有人肯定会疑惑为什么没有说比例和系数？因为没有意义，这次明说比例 10%，结果裁了快一半，有的整个部门从前后端测试到产品运营都裁了。还增加了一个部门系数，听没被裁的说的是整个都是 0.5，意思就是 14 薪的 1 个月，16 薪的 2 个月。


• 我自己都还好，有两个来了不到一个月的实习生也没能幸免，刚出来就经历这样的事情换谁也不好受。只能说往好的方面想吧！

总结

工作

• 在这里确实学到了不少东西，就技术而言，对跨端、nodejs 后台、数据库、桌面端等一些问题的解决方案，有自己想的，也有学习别人的。


• 职场相处，都说程序员的职场比较简单，确实相对其他的行业，这儿并没有那么多，但偶尔还是会遇到一些让你无法接受、理解、相处的人，但大部分人都是很好相处的，至少我是这么认为的，在这儿我也遇到一些很好的同事，也是朋友。


• 当你要去一个公司的时候，不要光看表面的以及面试官和 HR 给你说的，你可以去一些贴吧、论坛、脉脉等上面去看这家公司的在职人员或离职人员的评论或看法。我相信不会有人无缘无辜去只说一家公司不好的方面，一家公司肯定有好有坏，每个人看重的点不一样，所以需要自己去权衡。


• 像年终奖这种，如果合同没有固定写几个月，公司有很多的方法去卡。如果有一个考核标准，我觉得大家都能接受，你做了什么、成绩怎么样、出了哪些问题等等，总的有个衡量标准去量化它。

生活

• 完成了自己的一件人生大事（结婚）；


• 有了属于自己房子（虽然还没交房）；


• 老婆在今年怀孕了（健康的兔宝宝）。

最后

• 希望大家接好运，工作顺心、生活开心。


• 有什么问题欢迎大家评论区留言交流。

我是一个容易焦虑的人，工作时候想着跳槽，辞职休息时候想着工作，休息久了又觉得自己每天在虚度光阴毫无意义，似乎陷入了一个自我怀疑自我焦虑的死循环了。我想我该做的点什么去跳出这个循环。。。

自我叙述

我相信，每个人都有一个自命不凡的梦，总觉得自己应该和别人不一样，我不可能如此普通，自己的一生不应该泯然众生，平凡平庸的度过。尤其是干我们it这一行业的，都有一个自己的程序员梦，梦想着，真的能够用 “代码改变世界”

入行回顾

你们还记得自己是什么时候，入行it行业的吗

我今年已经28岁了，想起来入行，还挺久远的，应该是2016入行的，我也算是半路出家的，中间有过武术梦 歌唱梦 但是电脑什么上学那会就喜欢玩，当然是指游戏，

武术梦

来讲讲我得第一个·梦，武术梦，可能是从小受到武打演员动作电视剧的影响，尤其那个时候，成龙大哥的电影，一直再放，我觉得学武术是很酷的一件事情，尤其那会上小学，还是初中我的体育还是非常好的，

然后我们家那个时候电视还是黑白的，电视机。哈哈哈😀电视台就那么几个，放来放去，有一个台一直重复放成龙电影，还有广告， 都是 学武术就到 xxxx学校， 我被洗脑了吧

于是真的让我爸，打电话质询了一下，可是好像他们这种武术学校都是托管式的，封闭式学习，听说很苦，，，，当然这不是重点，重点每年学费非常的贵，en~，于是乎我的这个梦想终止了，。。

歌唱梦

为啥会有唱歌想法，你猜对了，是被那个时候的好声音给影响了，那个时候好声音是真的很火，看的时候我一度以为我也可以上好声音，去当歌手然后出道，当明星，什么的。

不过不经历打击，怎么会知道自己的下线在哪里呢

我小学换了两到三个学校，到初中，再到高中，你们还记得自己读高中那会吗，高中是有专业选择的，入学军训完以后。

我们代班主任，和我们说有三个专业方向可以选择，艺术类，分美术，和唱歌，然后是文化类，然后艺术类就业考大学分数会低很多，然后一系列原因，哈哈哈，我就选择了歌唱班。

我最好伙伴他选择了，美术类就是素描。这里我挺后悔没有选择 美术类。

到了歌唱班，第一课就是到专业课有钢琴的教室，老是要测试每个同学的，音色和音高，音域
然后各自上台表演自己的拿手的一首歌，。我当时测试时候就是跟着老师的弹的钢琴键瞎唱，

表演的歌曲是张雨生《大海》 也就唱了高潮那么几句。。 😀现在想起来还很羞耻，那是我第一次在那么多人面前唱歌，

后面开始上课老师说我当时分班时候音色什么还不错，但学到后面，我是音准不太行，我发现。再加上我自己的从小感觉好像有点自卑敏感人格，到现在把，我唱歌，就越来越差，

当然我们也有乐理。和钢琴课，我就想主助攻乐理和钢琴，

但是我很天真

乐理很难学习，都是文科知识需要背诵，但是他也要有视唱，也就是唱谱子，duo，re，mi，fa，suo，la，xi，duo。。等，我发现我也学不进去

后面我又开始去学钢琴，但是钢琴好像需要一定童子功，不然可能很难学出来，于是我每天早上6点钟起来，晚上吃完饭就去钢琴教师抢占位置， 还得把门堵着怕人笑话，打扰我，

结果你们也猜到了，音乐方面天赋很重要，然后就是性格上面表演上面，要放得开，可是我第一年勉强撑过去了，后面第二年，专业课越来越多了，我感觉我越来越自卑~，然后成绩就越来越差，老师也就没太重视，嗯~好不容撑到了第二年下半年，放暑假，

但是老师布置任务暑假要自己去外面练钢琴，来了之后要考试，我还花钱去外面上了声乐课和钢琴课，哎，我感觉就是浪费钱，，，，，因为没什么效果，性格缺陷加上天赋不行，基本没效果，那段时间我也很痛苦的，因为越来越感觉根本容入不进去班级体，尤其是后面高二，了专业课很多大部分是前面老师带着发生开嗓，后面自由练习，我也不好意思，不想练习，所以
到后面，高二下学习我就转学了，，，，

当然我们班转学的，不止我一个，还有一个转学的 和我一个寝室的，他是因为音高上不去，转到了文科班， 还有一个是挺有天赋，我挺羡慕的，但是人家挺喜欢学习，不喜欢唱歌什么，就申请转到了，文科班。 不过她转到文科班，没多久也不太好，后面好像退学了，，我一直想打听他的消息，都在也没打听到了

玩电脑

我对电脑的组装非常感兴趣，喜欢研究电脑系统怎么装，笔记本拆装，台式机拆装，我会拿我自己的的笔记本来做实验，自己给自己配台式机，自己给自己笔记本增加配置，哈哈哈哈。对这些都爱不释手。

这还是我很早时候，自己一点一点比价，然后去那种太平洋电脑城，电脑一条街，那种地去找人配置的。想想那时候配置这个电脑还挺激动，这是人生的第一台自己全部从零开始组装配的电脑，

本来打算，后面去电脑城上班，开一个笔记本维修，电脑装配的门面的，（因为自己研究了很多笔记本系统，电脑组装），可是好像听电脑城的人说，电脑组装什么的已经不赚钱了，没什么价格利润，都是透明的而且更新迭代非常的快，电脑城这种店铺也越来越少了，都不干了，没有新人再去干这个了，于是乎我的第一份工作失业 半道崩殂了，哈哈哈哈还没有开始就结束了。

学it

后面我又报名自学了，it编程，《xxx鸟》 但是学it我学起来，好像挺快的，挺有感觉的，入学前一个星期，要等班人数到齐才能开班，我们先来的就自己学习打字了，我每天都和寝室人，一起去打字，我感觉那段时间我过得挺开心和充实的，

后面我们觉得自带寝室不好，环境差，于是就几个人一起，搬出去住了，一起学习时候有一个年级26了，我和他关系还蛮好的，不过现在也没什么联系了，，，

学习时候，每次做项目时候我都是组长，那个时候原来是有成就感的，嗯，学习it好像改变了，我学唱歌那个时候，一些自卑性格，可能是遇到了一个好的老师吧

当然后面就顺利毕业，然后找到了工作了，，，

直到现在我还在it行业里

嗯~还想往下面写一点什么，，，下一篇分享一下我入门感受和经历吧

关注公众号，程序员三时 希望给你带来一点启发和帮助

前言

本篇文章内容，或许早已是烂大街的解读文章。不过参加几场面试下来发现，不少伙伴们还是似懂非懂地栽倒在（～面试官～）深意的笑容之下，权当温故知新吧。

文章从防抖、节流的原理说起再结合实际开发的场景，分别逐步实现完整的防抖和节流函数。

函数防抖

• 原理：当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新计时


• 适用场景：


• 
  
  
  
  • search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源
  
  
  • 按钮提交场景，比如点赞，表单提交等，防止多次提交
  
  
  • 监听resize触发时， 不断的调整浏览器窗口大小会不断触发resize，使用防抖可以让其只执行一次
  
  
  
  


• 辅助理解：在你坐电梯时，当一直有人进电梯（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。

下面我们先实现一个简单的防抖函数，请看栗子：

// 简单防抖函数

const debounce = (fn, delay) => {

  let timer;

  return function () {

    const context = this;

    const args = arguments;

    clearTimeout(timer);



    timer = setTimeout(function () {

      fn.call(context, ...args);

      //等同于上一句 fn.apply(context, args)

    }, delay);

  };

};



// 请求接口方法

const ajax = (e) => {

  console.log(`send ajax ${new Date()} ${e.target.value}`);

};



// 绑定监听事件

const noneDebounce = document.getElementsByClassName("none_debounce")[0];

const debounceInput = document.getElementsByClassName("debounce")[0];



noneDebounce.addEventListener("keyup", ajax);

debounceInput.addEventListener("keyup", debounce(ajax, 500));

运行效果如下：

点击这里，试试效果点击demo

可以很清晰的看到，当我们频繁输入时， 不使用节流就会不断的发送数据请求，但是使用节流后，只有当你在指定间隔时间内没有输入，才会执行发送数据请求的函数。

上面有个注意点：

• this指向问题，在定时器中如果使用箭头函数()=>{fn.call(this, ...args)} 与上面代码效果一样， 原因时箭头函数的this是**「继承父执行上下文里面的this」**

关于防抖函数的疑问：

1. 为什么要使用 fn.apply(context, args), 而不是直接调用 fn(args)

如果我们不使用防抖函数debounce时， 在ajax函数中打印this的值为dom节点：

<input class="debounce" type="text">

在使用debounce函数后，如果我们不使用fn.apply(context, args)修改this的指向， this就会指向window(ES6下为undefined)

2. 为什么要传入arguments参数

我们同样与未使用防抖函数的场景进行对比

const ajax = (e) =>{

    console.log(e)

}

3. 怎么给ajax函数传参

有的小伙伴就说了， 你的ajax只能接受绑定事件的参数，不是我想要的，我还要传入其他参数，so easy!

const sendAjax = debounce(ajax, 1000)

sendAjax(参数1, 参数2,...)

因为sendAjax 其实就是debounce中return的函数， 所以你传入什么参数，最后都给了fn

在未使用时，调用ajax函数对打印一个KeyboardEvent对象

使用debounce函数时，如果不传入arguments, ajax中的参数打印为undefined,所以我们需要将接收到的参数，传递给fn

函数防抖的理解：

❝

我个人的理解其实和平时上电梯的原理一样：当一直有人进电梯时（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。

❞

从上面的例子，对防抖有了初步的认识，但是在实际开发中，需求往往要更加的复杂,比如我们要提交一个表单按钮，为了防止用户多次提交表单，可以使用节流， 但如果使用上面的节流，就会导致用户停止连续点击才会提交，而我们希望让用户点击时，立即提交， 等到n秒后，才可以重新提交。

对上面的代码进行改造，得到立即提交版：

const debounce = (fn, delay, immediate) => {

  let timer;

  return function () {

    const context = this;

    const args = arguments;

    clearTimeout(timer);



    if (immediate) {

      let startNow = !timer;



      timer = setTimeout(function () {

        timer = null;

      }, delay);



      if (startNow) {

        fn.apply(context, args);

      }

    } else {

      timer = setTimeout(function () {

        fn.call(context, ...args);

        //等同于上一句 fn.apply(context, args)

      }, delay);

    }

  };

};

从上面的代码可以看到，通过immediate 参数判断是否是立刻执行。

timer = setTimeout(function () {

    timer = null

}, delay)

立即执行的逻辑中，如果去掉上面这小段代码， 也是立即执行，但是之后就不会再执行提交了，当我们提交失败了怎么办（哭），所以加上上面这段代码，在设定的时间间隔内，将timer设置为null, 过了设定的时间间隔，可以再次触发提交按钮的立即执行，这才是完整的。

这是一个使用立即提交版本的防抖实现的了一个提交按钮demo

目前我们已经实现了包含非立即执行和立即执行功能的防抖函数，感兴趣的小伙伴可以和我一起继续探究一下去，完善防抖函数~

❝

做直播功能时，产品的小伙伴给提出这样一个需求：

直播的小窗口可以拖动， 点击小窗口以及拖动时， 显示关闭小窗口按钮，当拖动结束2s后， 隐藏关闭按钮；当点击关闭按钮时， 关闭小窗口

❞

分析需求， 我们可以使用防抖来实现， 用户连续拖动小窗口过程中， 不执行隐藏关闭按钮，拖动结束后2s才执行隐藏关闭按钮；但是点击关闭按钮后，我们希望可以取消防抖， 所以需要继续完善防抖函数， 使其可以被取消。

「可取消版本」

const debounce = (fn, delay, immediate) => {

  let timer, debounced;

  // 修改--

  debounced = function () {

    const context = this;

    const args = arguments;

    clearTimeout(timer);



    if (immediate) {

      let startNow = !timer;



      timer = setTimeout(function () {

        timer = null;

      }, delay);



      if (startNow) {

        fn.apply(context, args);

      }

    } else {

      timer = setTimeout(function () {

        fn.call(context, ...args);

      }, delay);

    }

  };



  // 新增--

  debounced.cancel = function () {

    clearTimeout(timer);

    timer = null;

  };

  return debounced;

};

从上面代码可以看到，修改的地方是将return的函数赋值给debounced对象， 并且给debounced扩展了一个cancel方法， 内部执行了清除定时器timer, 并且将其设置为null; 为什么要将timer设置为null呢? 由于debounce内部形成了闭包， 避免造成内存泄露

上面的需求我写了个小demo, 需要的小伙伴可以看看可取消版本demo, 效果如下所示：

这个demo中，在拖拽过程中还可以使用节流，减少页面重新计算位置的次数，在下边学完节流，大家不妨试试

介绍节流原理、区别以及应用

前面学习了防抖，也知道了我们为什么要使用防抖来限制事件触发频率，那我们接下来学习另一种限制的方式节流（throttle）

函数节流

• 原理：当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。


• 适用场景：


• 
  
  
  
  • 拖拽场景：固定时间内只执行一次， 防止高频率的的触发位置变动
  
  
  • 监听滚动事件：实现触底加载更多功能
  
  
  • 屏幕尺寸变化时， 页面内容随之变动，执行相应的逻辑
  
  
  • 射击游戏中的mousedown、keydown时间
  
  
  
  


• 辅助理解：

下面我们就来实现一个简单的节流函数，由于每隔一段时间执行一次，那么就需要计算时间差，我们有两种方式来计算时间差：一种是使用时间戳，另一种是设置定时器

使用时间戳实现

function throttle(func, delay) {

  let args;

  let lastTime = 0;



  return function () {

    // 获取当前时间

    const currentTime = new Date().getTime();

    args = arguments;

    if (currentTime - lastTime > delay) {

      func.apply(this, args);

      lastTime = currentTime;

    }

  };

}

使用时间搓的方式来实现的思路比较简单，当触发事件时，获取当前时间戳，然后减去之前的时间戳（第一次设置为0）， 如果差值大于设置的等待时间， 就执行函数，然后更新上一次执行时间为为当前的时间戳，如果小于设置的等待时间，就不执行。

使用定时器实现

下面我们来看使用定时器实现的方式：与时间戳实现的思路是有差别的， 我们在事件触发时设置一个定时器， 当再次触发事件时， 如果定时器存在，就不执行；等过了设置的等待时间，定时器执行，我们需要在定时器执行时，清空定时器，这样就可以设置下一个定时器了

function throttle1(fn, delay) {

  let timer;

  return function () {

    const context = this;

    let args = arguments;



    if (timer) return;

    timer = setTimeout(function () {

      console.log("hahahhah");

      fn.apply(context, args);



      clearTimeout(timer);

      timer = null;

    }, delay);

  };

}

虽然两种方式都实现了节流， 但是他们达到的效果还是有一点点差别的，第一种实现方式，事件触发时，会立即执行函数，之后每隔指定时间执行，最后一次触发事件，事件函数不一定会执行；假设你将等待时间设置为1s， 当3.2s时停止事件的触发，那么函数只会被执行3次，以后不会再执行。

第二种实现方式，事件触发时，函数不会立即执行， 需要等待指定时间后执行，最后一次事件触发会被执行；同样假设等待时间设置为1s, 在3.2秒是停止事件的触发，但是依然会在第4秒时执行事件函数

总结

对两种实现方式比较得出：

1. 第一种方式， 事件会立即执行， 第二种方式事件会在n秒后第一次执行


2. 第一种方式，事件停止触发后，就不会在执行事件函数， 第二种方式停止触发后仍然会再执行一次

接下来我们写一个下拉加载更多的小demo来验证上面两个节流函数：点击查看代码

let state = 0 // 0: 加载已完成  1：加载中  2:没有更多

let page = 1

let list =[{...},{...},{...}]



window.addEventListener('scroll', throttle(scrollEvent, 1000))



function scrollEvent() {

    // 当前窗口高度

    let winHeight =

        document.documentElement.clientHeight || document.body.clientHeight



    // 滚动条滚动的距离

    let scrollTop = Math.max(

        document.body.scrollTop,

        document.documentElement.scrollTop

    )



    // 当前文档高度

    let docHeight = Math.max(

        document.body.scrollHeight,

        document.documentElement.scrollHeight

    )

    console.log('执行滚动')



    if (scrollTop + winHeight >= docHeight - 50) {

        console.log('滚动到底部了！')

        if (state == 1 || state == 2) {

            return

        }

        getMoreList()

    }

}



function getMoreList() {

    state = 1

    tipText.innerHTML = '加载数据中'

    setTimeout(() => {

        renderList()

        page++



        if (page > 5) {

            state = 2

            tipText.innerHTML = '没有更多数据了'

            return

        }

        state = 0

        tipText.innerHTML = ''

    }, 2000)

}



function renderList() {

    // 渲染元素

    ...

}

使用第一种方式效果如下：

一开始滚动便会触发滚动事件， 但是在滚动到底部时停止， 不会打印"滚动到底部了"; 这就是由于事件停止触发后，就不会在执行事件函数

使用第二种方式， 为了看到效果，将事件设置为3s, 这样更能直观感受到事件函数是否立即执行：

// window.addEventListener('scroll', throttle(scrollEvent, 1000))

window.addEventListener('scroll', throttle1(scrollEvent, 3000))

一开始滚动事件函数并不会被触发，而是等到3s后才触发；而当我们快速的滚动到底部后停止滚动事件， 最后还是会执行一次

上面的这个例子是为了辅助理解这两种实现不方式的不同。

时间戳 + 定时器实现版本

在实际开发中， 上面两种实现方案都不满足我们的需求，我们希望一开始滚动就立即执行，停止触发的时候也还能执行一次。结合时间搓方式和定时器方式实现如下：

function throttle(fn, delay) {

  let timer, context, args;

  let lastTime = 0;



  return function () {

    context = this;

    args = arguments;



    let currentTime = new Date().getTime();



    if (currentTime - lastTime > delay) {

      // 防止时间戳和定时器重复

      // -----------

      if (timer) {

        clearTimeout(timer);

        timer = null;

      }

      // -----------

      fn.apply(context, args);

      lastTime = currentTime;

    }

    if (!timer) {

      timer = setTimeout(() => {

        // 更新执行时间, 防止重复执行

        // -----------

        lastTime = new Date().getTime();

        // -----------

        fn.apply(context, args);

        clearTimeout(timer);

        timer = null;

      }, delay);

    }

  };

}

使用演示效果如下：

实现思路是结合两种实现方式，同时避免两种方式重复执行， 所以当调用时间戳执行函数时，需要将定时器清空；当使用到定时器执行函数时，需要增加修改执行记录的时间lastTime

我们可以看到，开始滚动立即会打印页面滚动了，停止滚动后，时间会再执行一次，滚动到底部时停止，也会执行到滚动到底部了

最终完善版

上面的节流函数满足了我们的基本需求， 但是我们可以进一步对节流函数进行优化，使得节流函数可以满足下面三种情况：

• 事件函数立即执行，并且事件停止后再执行一次（以满足）


• 事件函数立即执行，但是事件停止后不再执行（待探究）


• 事件函数不立即执行，但是事件停止后再执行一次（待探究）

❝

注意点：事件函数不立即执行，事件停止不再执行一次 这种情况不能满足，在后面从代码角度会做分析。

❞

我们设置两个参数start和last分别控制是否立即执行与最后是否执行；修改上一版代码， 实现如下：

function throttle(fn, delay, option = {}) {

  let timer, context, args;

  let lastTime = 0;



  return function () {

    context = this;

    args = arguments;



    let currentTime = new Date().getTime();



    // 增加是否立即执行判断

    if (option.start == false && !lastTime) lastTime = currentTime;



    if (currentTime - lastTime > delay) {

      if (timer) {

        clearTimeout(timer);

        timer = null;

      }

      fn.apply(context, args);

      lastTime = currentTime;

    }

    // 增加最后是否再执行一次判断

    if (!timer && option.last == true) {

      timer = setTimeout(() => {

        // 确保再次触发事件时， 仍然不立即执行

        lastTime = option.start == false ? 0 : new Date().getTime();

        fn.apply(context, args);

        clearTimeout(timer);

        timer = null;

      }, delay);

    }

  };

}

上面代码就修改了三个地方，一个是立即执行之前增加一个判断：

if (option.start == false && !lastTime) lastTime = currentTime

如果传入参数是非立即执行， 并且lastTime为0, 将当前时间戳赋值给lastTime， 这样就不会进入 if (currentTime - lastTime > delay)

第二个修改地方， 增加最后一次是否执行的判断：

// 原来

// if (!timer) {...}



// 修改后

if (!timer && option.last == true) {

   ...

}

当传入last为true时，才使用定时器计时方式， 反之通过时间戳实现逻辑即可满足

第三个修改的地方， 也是容易被忽视的点， 如果start传入false,last传入true(即不立即执行，但最后还会执行一次), 需要在执行定时器逻辑调用事件函数时， 将lastTime设置为0：

 // 确保再次触发事件时， 仍然不立即执行

lastTime = option.start ==false? 0 : new Date().getTime()

这里解决的是再次触发事件时， 也能保证不立即执行。

疑问点

相信有的小伙伴会存在疑问，为什么没有讨论不立即执行， 最后一次也不执行的情况呢（即 start为true, last为true）, 因为这种情况满足不了。

当最后一次不执行， 也就不会进入到 定时器执行逻辑，也就无法对 lastTime重置为0，所以，当再一次触发事件时，就会立即执行，与我们的需求矛盾了。关于这一点，大家了解即可了。

到这里，我们的节流函数功能就差不多了， 如果有兴趣的小伙伴可以自己实现一下可取消功能， 与防抖函数实现方式一致， 这里就不赘述了。

以使用Dart的 sort() 方法对Flutter中的List进行升序或降序排序。
sort()方法需要传递一个比较函数来指定如何对对象进行比较，并按照您指定的顺序进行排序。
以下是一个示例，假设有一个包含整数的列表，可以按照整数值进行排序：

List<int> numbers = [1, 3, 2, 5, 4];

// 升序排序

numbers.sort((a, b) => a.compareTo(b));

print(numbers); // 输出：[1, 2, 3, 4, 5]



// 降序排序

numbers.sort((a, b) => b.compareTo(a));

print(numbers); // 输出：[5, 4, 3, 2, 1]

在上述代码中，我们使用了sort()方法将数字列表按照升序和降序进行了排序。

在比较函数中，我们使用了 compareTo() 方法来比较两个数字对象。

如果想按照其他字段进行排序，只需将比较函数中的a和b替换为您想要排序的字段即可。

以下是示例代码，假设您有一个包含Person对象的列表，可以按照Person的年龄字段进行排序：

class Person {

  String name;

  int age;

  

  Person({this.name, this.age});

}



List<Person> persons = [

  Person(name: "John", age: 30),

  Person(name: "Jane", age: 20),

  Person(name: "Bob", age: 25),

];



// 按照年龄字段进行排序

persons.sort((a, b) => a.age.compareTo(b.age));



// 输出排序后的列表

print(persons);

在上述代码中，我们使用了sort()函数将Person对象列表按照年龄字段进行排序。
在该示例中，我们使用了compareTo()函数来比较Person对象的年龄字段，并按照升序排序。

如果您有小程序、APP、公众号、网站相关的需求，您可以通过私信来联系我

如果你有兴趣，可以关注一下我的综合公众号：biglead

作者：早起的年轻人
来源：juejin.cn/post/7230420475494137913

鼠标跟随事件

在这里，我本来想弄一个灰太狼抓羊的动画效果，就是将我们的鼠标logo替换成一只羊的照片，然后后面跟随着一只狼，设置了cursor: url('./01.gif'), auto这个属性，但是好像没有成功，好像是兼容问题。于是找了一张给会动的gif。

实现效果

整体十分简单，主要就是js代码。

html里我们就只是放了一张图片

<div class="img"></div>

然后简简单单的给他们设置了一下大小和样式。

  * {

            margin: 0;

            padding: 0;

        }



![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e17598cd683f41fe89fddda68981de97~tplv-k3u1fbpfcp-watermark.image?)

        body {

            background: rgb(240, 230, 240);

        }



        .img {

            width: 10%;

            height: 20%;

            position: absolute;

            background-image: url('./01.gif');

            background-size: cover;

        }

看一看主要的js代码

这里我们主要是进行一些基本属性的定义和设置，index可以看成是时间桢或者循环次数。

let img = document.querySelector('.img')

    // 定义小图片的旋转角度

    let deg = 0

    // 定义小图片位于网页左侧的位置

    let imgx = 0

    // 定义小图片位于网页顶部的位置

    let imgy = 0

    // 定义小图片x轴的位置

    let imgl = 0

    // 定义小图片y轴的位置

    let imgt = 0

    // 定义小图片翻转的角度

    let y = 0

    // 定义一个计数器

    let index = 0

这段代码的作用是根据鼠标在图片上的位置计算图片的旋转角度和翻转。

首先，通过 e.x 获取鼠标在页面上的横坐标，img.offsetLeft 获取图片左边边缘距页面左边边缘的距离，img.clientWidth / 2 获取图片宽度的一半，即图片中心点距图片左边边缘的距离。将这三个值相减，得到鼠标相对于图片中心点的横向偏移量，即 imgx。

 imgx = e.x - img.offsetLeft - img.clientWidth / 2

同样地，通过 e.y 获取鼠标在页面上的纵坐标，img.offsetTop 获取图片上边边缘距页面上边边缘的距离，img.clientHeight / 2 获取图片高度的一半，即图片中心点距图片上边边缘的距离。将这三个值相减，得到鼠标相对于图片中心点的纵向偏移量，即 imgy。

imgy = e.y - img.offsetTop - img.clientHeight / 2

接下来，根据 imgx 和 imgy 的值，使用 Math.atan2 计算出以图片中心为原点的弧度值，并将弧度值转换为角度值，即 deg，这就是图片需要旋转的角度。
最后，将 deg 赋值给 rotate 属性，就可以实现对图片的旋转了。

 deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)

然后，通过 index = 0 定义了一个初始值为 0 的变量 index，用于后续的操作。接下来，通过 let x = event.clientX 获取到当前鼠标的水平坐标位置。

    // 每当鼠标移动的时候重置index

     index = 0

    // 定义当前鼠标的位置

    let x = event.clientX

然后，使用 if 判断图片的左边界是否小于当前鼠标的位置，也就是判断鼠标是否在图片的右侧。如果鼠标在图片的右侧，说明图片需要向左翻转，这时候将 y 赋值为 -180，用于后续的样式设置。如果鼠标在图片的左侧，说明图片无需翻转，此时将 y 赋值为 0。最终，将 y 值赋给图片的 rotateY 样式属性，就可以实现对图片的翻转效果了。当 y 为 -180 时，图片将被翻转过来；当 y 为 0 时，图片不会被翻转。

 // 当鼠标的x轴大于图片的时候，就要对着鼠标，所以需要将图片翻转过来

    // 否则就不用翻转

    if (img.offsetLeft < x) {

        y = -180

    } else {

        y = 0

    }

    

 window.addEventListener('mousemove', function (e) {

        // 获取网页左侧距离的图片位置

        imgx = e.x - img.offsetLeft - img.clientWidth / 2

        // 多去网页顶部距离图片的位置

        imgy = e.y - img.offsetTop - img.clientHeight / 2

        // 套入公式，定义图片的旋转角度

        deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)

        // 每当鼠标移动的时候重置index

        index = 0

        // 定义当前鼠标的位置

        let x = event.clientX

        // 当鼠标的x轴大于图片的时候，就要对着鼠标，所以需要将图片翻转过来

        // 否则就不用翻转

        if (img.offsetLeft < x) {

            y = -180

        } else {

            y = 0

        }

    })

接下来就要实现图片跟随了

这段代码的作用是通过 JavaScript 实现对图片的旋转和移动。然后利用了setInterval一直重复

首先，使用 img.style.transform 将旋转角度 deg 和翻转角度 y 应用于元素的 transform 样式。rotateZ 用于实现元素绕 z 轴旋转，而 rotateY 则用于实现元素的翻转效果。注意，这里使用字符串拼接的方式将旋转角度和翻转角度拼接起来，以达到应用两个属性值的效果。

img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"

接下来，将 index 的值加一，即 index++，表明下一帧需要进行的操作。

index++

然后，使用条件语句 if (index < 50) 对小图片的位置进行调整。在这里，通过不停地调整小图片的位置，实现了小图片沿着鼠标运动的效果。其中，imgl += imgx / 50 用于计算小图片应移动的水平距离，而 imgt += imgy / 50 则用于计算小图片应移动的垂直距离。50 是移动的帧数，可以根据需求进行调整。

// 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动 

if (index < 100) 

{ 

imgl += imgx / 100 

imgt += imgy / 100 

} 

img.style.left = imgl + "px" 

img.style.top = imgt + "px"

setInterval(() => {

        // 设置小图片的旋转和翻转

        img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"

        index++

        // 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动

        if (index < 100) {

            imgl += imgx / 100

            imgt += imgy / 100

        }

        img.style.left = imgl + "px"

        img.style.top = imgt + "px"

    }, 10)

源码

<!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>鼠标跟随</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }



        body {

            background: rgb(240, 230, 240);

        }



        .img {

            width: 10%;

            height: 20%;

            position: absolute;

            background-image: url('./01.gif');

            background-size: cover;

        }

    </style>

</head>



<body>

    <div class="img"></div>

</body>

<script>

    let img = document.querySelector('.img')

    // 定义小图片的旋转角度

    let deg = 0

    // 定义小图片位于网页左侧的位置

    let imgx = 0

    // 定义小图片位于网页顶部的位置

    let imgy = 0

    // 定义小图片x轴的位置

    let imgl = 0

    // 定义小图片y轴的位置

    let imgt = 0

    // 定义小图片翻转的角度

    let y = 0

    // 定义一个计数器

    let index = 0



    window.addEventListener('mousemove', function (e) {

        // 获取网页左侧距离的图片位置

        imgx = e.x - img.offsetLeft - img.clientWidth / 2

        // 多去网页顶部距离图片的位置

        imgy = e.y - img.offsetTop - img.clientHeight / 2

        // 套入公式，定义图片的旋转角度

        deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)

        // 每当鼠标移动的时候重置index

        index = 0

        // 定义当前鼠标的位置

        let x = event.clientX

        // 当鼠标的x轴大于图片的时候，就要对着鼠标，所以需要将图片翻转过来

        // 否则就不用翻转

        if (img.offsetLeft < x) {

            y = -180

        } else {

            y = 0

        }

    })

    setInterval(() => {

        // 设置小图片的旋转和翻转

        img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"

        index++

        // 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动

        if (index < 100) {

            imgl += imgx / 100

            imgt += imgy / 100

        }

        img.style.left = imgl + "px"

        img.style.top = imgt + "px"

    }, 10)

</script>



</html>

前言

思来想去，觉得这个事情除了领导赏识大佬抬爱之外，还是挺不容易的，主观认为有一定的参考价值，然后也是复盘一下，继续完善自己。

绩效

首先晋升的条件就是要有个好绩效，那么我们就先基于绩效这个维度简单聊一下。

很多同学都知道阿里的绩效是361制度，也就是30%的人拿A，60%的人拿B，10%的人拿C，不过在阿里，我们一般不用ABC来表示，除去价值观考核，我们常用的表达是3.75、3.5、3.25，初略的对应关系如下：

那么，了解了阿里的绩效制度，再来看看绩效里面的门道。

首先，讲一个职场潜规则，「团队的新人是用来背绩效的」，也就是会把差绩效(325)指标分配给新人，因为如果把325给老人，容易产生团队不稳定的因素，而且不得不承认的是，少一个老人比少一个新人的成本更大，另一方面，你作为新人，业务不熟，根基不稳，也不见得能产出多大的价值，所以对于多数新人来说，也只能接受。据我所知，只有极少的公司里面会有「绩效保护」这种政策，而且一般还是针对的应届生，社招来说，还是要看能力的。

其次，基于潜规则，大部分新人都在为保住3.5做努力，只有少数优秀的人可以拿到更好的绩效。而新人拿375在阿里是很少的存在，即使是老人，拿375都是非常不容易的，何况是一个新人。

最后，就是晋升，晋升的前提条件就是满一年且是好绩效，加上现在降本增效的大环境，有的要求连续两年375才行，甚至都不一定有名额，当然，晋升也和团队绩效和级别有关系，但总之，男上加男，凤毛麟角。

个人背景

我是21年8月份入职阿里的，2022年是在阿里的第一个整财年。

之前一直是在小厂摸爬滚打，没有大厂经历，这对于我来说，是劣势，写代码不注重安全性防护，没有code review，没有ab test，没有自动化测试，没有文档沉淀，没有技术分享，纯纯小作坊。更重要的是，小厂和大厂的做事风格流程什么的，真的是千差万别，所以当时的landing对我来说，还是很难受的。但是，我有没有自带的优势呢，也有，写作能力，但是光有写作能力还是不够的，你没东西可写也不行啊。

其实试用期结束之后就差不多进入新的财年了，对于刚刚进入状态的我，也迎来了更大的挑战。过去的一整年有较多的精力都投入在研发效能和安全生产方面，这对于以前纯业务开发的我来说，完全是一个新的领域，好在不负重托，也略有成果。

其实回想过去一年的经历来看，今天的成绩是多维度的结合，比如硬实力和软实力、个人和团队、内部和外部等多个维度，下面将分别介绍一些我个人的心得经验，仅供参考。

沟通能力

这也用说？不就是说话吗，谁不会说？

我看过很多的简历，如果有「自我评价」，几乎都会提到「具备良好的沟通能力」。
可是沟通能力看起来真的有那么简单吗？我认为不是的，实际上我甚至认为它有点难。

在职场经常会有这些问题：

1. 这个点我没太理解，你能在解释一下吗？


2. 为什么要这么做？为什么不这么做？


3. 现在有什么问题？


4. 你的诉求是什么？


5. 讲话的时候经常被打断等等...

这些问题你是不是被问到过，或者这么问别人呢。

而这些问题的背后，则反映了沟通的不完整和不够清晰。面对他人的挑战，或向跨部门的同学讲述目标价值时，会沟通的同学会显的游刃有余，而不会沟通的同学则显得捉襟见肘。

沟通方面，其实也包含很多场景。

首先是逻辑要清晰。

面对用户的一线同事，比如销售和客服，他们都是有话术的，话术就是沟通的技巧。

为什么脸皮薄/不懂拒绝的人容易被销售忽悠？

因为销售在跟客户沟通的时候，就是有一套完整的话术，他先讲一，看你反应再决定讲二还是三；当你拒绝了A方案，他还有B方案C方案。一套完整的话术逻辑把你都囊括在里面，最后只能跟着他的思维走，这就是话术的意义。

同样的，在职场，你跟人沟通的时候，不能直说怎么做，解决方案是什么，而背景和问题同样重要，同时讲述问题的时候要尽可能的拆解清楚，避免遗漏，这样不只是让别人更理解你的意思，其实有时候换个视角，解决方案可能有更优的。

逻辑清晰，方案完善，对方就会处于一个比较舒服的状态，有时候能起到事半功倍的效果。你可能会觉得有些麻烦，但如果因为没有表达清楚而导致最后的结果不符合预期，孰轻孰重，应该拎得清的吧？

其次是要分人。

我在之前的面经中提到，自我介绍要分人，技术面试官和HR的关注点一定是不一样的，面对这种不同的出发点，你讲的东西肯定不能是同一套，要有侧重点，你跟HR讲你用了什么牛逼的技术、原理是什么，那不是瞎扯嘛。

这个逻辑在职场也是一样的，你和同事讨论技术、向领导汇报、回答领导的领导问题、跟产品、运营、跨部门沟通，甚至出现故障的时候给客满提供的话术，面对不同的角色、不同的场合，表达出来的意思一定是要经过「翻译」的，多换位思考。

即要把自己的意思传达到，也要让对方get到，这才是有效沟通。

所谓沟通能力，不只是有表达，还要有倾听。

倾听方面，比如当别人给你讲一个事情的时候，你能不能快速理解，能不能get到对方的点，这也很重要。
快速且高效，这是一个双向的过程。这里面会涉及到理解能力，而能理解的基础是基于现有的认知，也就是过往的工作经验、项目经历和知识面，这是一个积累的过程。

当然，也有可能是对方表达的不够清楚，这时候就要不耻下问，把事情搞清楚，搞不清楚就会有不确定性，就是有风险，如果最终的结果不符合预期，那么复盘的时候，委屈你一下，不过分吧😅。

最后是沟通媒介。

我们工作沟通的场景一般都是基于钉钉、微信、飞书之类的即时通讯办公平台，文字表达的好处是，它可以留档记录，方便后期翻阅查看，但是也一定程度在沟通表达的传递上，存在不高效的情况。

那这时候，语音、电话就上场了，如果你发现文字沟通比较费劲的时候，那一定不如直接讲来的更高效。

但是语音、电话就一定能聊的清楚吗，也不见得。

“聊不清楚就当面聊”，为什么当面聊就能比语音、电话聊的清楚？因为当面聊，不只是可以听到语气看到表情肢体动作，更重要的是当面聊的时候，双方一定是专注在这个事情上的，不像语音的时候还可以干其他的事，文字甚至会长时间已读不回，所以讲不清楚的时候，当面聊的效果是最好的。为了弥补留档的缺陷，完事再来个文字版的纪要同步出来，就ok了。

其他。

上面提到逻辑要清晰，要分人，还有倾听能力，和善用沟通媒介。

其实沟通里还包括反应能力，当你被突然问到一个问题的时候，能不能快速流畅的表达清楚，这个也很关键，如果你支支吾吾，反反复复的都没有说清楚，设想一下，其他人会怎么看你，“这人是不是不行啊？”，长此以往，这个信任度就会降低，而一旦打上标签，你就需要很多努力才能证明回来。

还包括争辩能力，比如在故障复盘的时候，能不能有效脱身不被拉下水，能不能大事化小小事化了，也都是沟通的技巧，限于篇幅，不展开了。

学会复盘

复盘是什么？

复盘是棋类术语，指对局完毕后，复演该盘棋的记录，以检查对局中招法的优劣与得失关键。在工作中，复盘是通过外在的表象、客观的结果找出本质，形成成功经验或失败教训，并应用到其他类似事件中，提升面向未来的能力。

所以，复盘不是流水账的记录经过和简单总结，也不是为了表彰罗列成绩，更不是为了甩锅而相互扯皮。找出本质的同时一定要有思考，这个思考可以体现在后续的一些执行事项和未来规划上，总之，就是要让「复盘」变的有意义。

什么是有意义的复盘？

就是你通过这次复盘，能知道哪些错误是不能再犯的，哪些正确的事是可以坚持去做的。会有一种「再来一次结果肯定不一样」的想法，通过有意义的复盘让「不完美」趋向「完美」。

我个人复盘的三个阶段：

• 回顾：回顾目标、经过、结果的整个流程；


• 分析：通过主观、客观的视角分析，失败的原因是什么，成功的原因是什么；


• 转化：把成功经验和失败教训形成方法论，应用到类似事件中；

Owner意识

什么是owner意识？

简单讲就是主人翁精神。认真负责是工作的底线，积极主动是「owner意识」更高一级的要求。

如果你就是怀着只干活的心态，或者躺平的心态，换我是领导，也不认为你能把活做好。因为这种心态就是「做了就行，能用就行」，但有owner意识不一样，这种人做事的时候就会多思考一点、多做一点，这里面最主要的就是主动性，举个栗子，好比写代码，当你想让程序运行的更好的时候，你就会多关注代码编写的鲁棒性，而不是随便写写完成功能就行。

但人性自私，责任感也不是人人都有，更别提主动性了，所以这两种心态的人其实差别很大，有owner意识的人除了本职工作能做好之外，在涉及到跨团队的情况，也能主动打破边界去push，有责任心有担当，往往能受到团队内外的一致好评。

在其位谋其职，我其实并没有特意去固化自己的owner意识，就是怀着一个要把事情做好的心态，跟我个人性格也有关系，现在回想起来，不过是水到渠成而已。

卷不一定就有owner意识，不卷也不代表没有。

向上管理

这个其实我一开始做的并不好，甚至可以说是很差，小公司出身哪需要什么向上管理，活干好就行。

但是现在不一样了，刚入职比较大的一个感受就是，我老板(领导)其实并不太过问我的工作内容，只是偶尔问一下进度。

然而这个「问」，其实也能反应出一些过往不太在意的问题：

1. 没有及时汇报，等到老板来问的时候其实处于一个被动的局面了，虽然也不会有什么太大的影响，可能多数人也都是这样，但是这不正说明我不够出众吗？


2. 不确定性，什么进度？有没有遇到问题？这些都是不确定性，老板不喜欢“惊喜”，有困难要说，有风险要提前暴，该有结果的时候没有，老板也很被动，你会留下一个什么印象？

当然，向上管理也不只是向上汇报，也是一个体现个人能力和学习的渠道。不要只提问题找老板要解决方案，我会简述问题，评估影响面，还会给出解决方案的Plan A和Plan B，这样老板就是做选择题了，即使方案不够完美，老板指点一下不正是学习的好机会吗。

学会写TODO

为什么写todo？

写todo的习惯其实是在上家公司养成的，因为要写周报，如果不记录每天做了什么，写周报的时候就会时不时的出现遗漏的情况。除了记录当天所做的事情之外，我还列了第二天要做的事情。虽然一直有给自己定规划的习惯，但是颗粒度都没有这么细过。彼时的todo习惯，不仅知道当天做了什么，还规划了第二天做什么，时刻有目标，也不觉得迷茫。

进入阿里之后，虽然没有周报月报这种东西，但是这个习惯也一直保持着，在此之上，我还做了一些改良。

1. 优先级，公司体量一旦大起来之后，业务线就很多，随之而来的事情就很多，我个人对处理工作是非常反感多线程并发的，特别是需要思考的工作，虽然能并行完成，但完成度不如专注在一件事情上的好，但是有些事情又确实得优先处理，所以就只能根据事情的紧急程度排一下优先级，基本很少有一件事需要从早到晚都投入在里面的，所以抽出身来就可以处理下一件事，所以也不会出现耽误其他事情的情况，当然线上故障除外。


2. 消失的时间，因为真的是事情又多又杂，时常在下班的时候会有一种瞎忙的感觉，就是「忙了一天，好像什么都没干」，但又确实很忙很累，仿佛陷入一个怪圈。所以后来我就把颗粒度拆的更细，精确到小时，也不是几点钟该做什么，就是把做的事情记录下来，并备注一下投入的时间，比如上午排障答疑投入了两小时，这样到中午吃饭的时候也不至于上午就这样虚度了。让“消失的时间”有迹可循，治愈精神内耗。


3. 归纳总结，我现在是在语雀以月度为单位记录每天的todo，这样就可以进行月度的总结和复盘，在半年度的OKR总结的时候，还有了归纳总结的来源，有经过、有结果、还有时间线，一目了然，再也不用为写总结发愁了。

总之，写todo的好处除了记录做了什么、要做什么，它还能辅助你把工作安排的更好。

有规划有目标，也不会陷入一个迷茫虚度的状态，属于一个成本非常低而收益却很高的好习惯，不止工作，学习也是如此，生活亦然。

其他方面

适应能力

于我个人来说，工作强度比以前要大很多，慢慢习惯了就行，在大厂里面阿里还不是最卷的，但钱也不是最多的；工作流程方面只是有些不清楚而已，并没有什么门槛，熟悉了就行；还有阿里味儿，确实要学很多新词儿、缩写、甚至潜台词，这没啥说的，还没见到有能独善其身的😅。

适应能力也不是随便说说，有太多的人入职新公司干的怀疑人生、浑身难受而跑路的，抛开公司的问题不说，难道就没有自己的问题吗？🐶

我把适应分为两个阶段，第一个阶段就是适应工作环境，熟悉公司、同事、产品、项目；第二个阶段就是适应之后，要想想如何迎接没有新手光环的挑战，如何去展示自己、提升自己等。

技术能力

夯实自己的技术能力尤为重要，毕竟是吃饭的家伙，是做事拿结果的重要工具和手段。

在大家技术能力的基本面都不会太差的情况下，如何在技术上建立团队影响力，就是需要思考的问题。

要找准自己在团队中的定位，并在这一领域深耕，做到一提这个技术就能想到你的效果，建立技术壁垒。

其实也不只是技术，要学会举一反三，找到自己在团队的差异性，虽然不可替代性在公司离了谁都可以转的说法下有些牵强，但是可以提高自己在团队的重要性和信任度。

信息渠道

要学会拓宽自己的信息渠道，有句话叫，掌握的信息越多，决策就越正确。

• 多看，看别人在做什么，输出什么，规划什么；


• 多聊，找合作方，相同目标的同事，甚至其他公司的朋友，互通有无；

看完聊完要把对自己有用的信息提炼出来哦。

影响力

内部的话，主要是建立同事间的信任，技术的占比相对要多一些；

外部的话，主要是在合作方那里建立一个靠谱的口碑，如果配合超预期那就更好了，我就是被几个大佬抬了一手，虽然不起决定性作用，但是也很重要。

摆脱固化

跳脱出程序员的固化思维。

程序的世界非0即1，程序员的思维都是非常严谨的，这个严谨有时候可能会显得有些“死板”，在商业化的公司里面，很多事情不是能不能的问题，而是要不要的问题。而在这里面，技术大多数都不是第一要素，出发点得是业务视角、用户视角，很多技术难点、卡点，有时候甚至不用技术也能解决。

小结

• 沟通能力：逻辑要清晰，对象要分人，还有倾听能力，和善用沟通媒介；


• owner意识：认真负责是工作的底线，积极主动是「owner意识」更高一级的要求；


• 向上管理：向上管理也不只是向上汇报，也是一个体现个人能力和学习的渠道；


• 写TODO：辅助工作，治愈内耗，一个成本低而收益高的好习惯；


• 其他方面：拓宽信息渠道，找到技术方向，简历内部外部的影响力等；

实际上不止这些，今天就到这吧。

最后

当下的市场环境无论是求职还是晋升，都挺难的，都在降本增效，寒气逼人，我能拿到晋升的门票，诚然是实力的体现，但也有运气的成分。没晋升也不一定是你的问题，放平心态，当下保住工作才是最重要的。

哔哔了这么多，可能很多同学道理也都懂，估计就难在知行合一吧...

最后送给大家一句罗翔老师的经典名言：

人生最大的痛苦，就是你知道什么是对的，但却永远做出错误的选择，知道和做到这个巨大的鸿沟，你永远无法跨越。

作者：yechaoa
来源：juejin.cn/post/7230457573719392315

React 真的是太灵活了,写它就感觉像是在写原生 JavaScript 一样,一个功能你可以有多种实现方式,例如你要实现动态样式,只要你愿意去做,你会有很多种解决方案,这可能也就是 React 会比 Vue 相对来说比较难一点的原因,这或许也就是这么喜欢 React 的原因了吧,毕竟它可是我见一个爱一个的技术之一🤣🤣🤣

也正是因为这个原因,在 React 中编写一个组件就给我们编写一个组件提供了多种方式,那么在接下来的文章中我们就来讲解一下这几种组件的设计模式。

Mixin设计模式

在上一篇文章中有讲解到了 JavaScript 中的 Mixin,如果对这个设计模式不太理解的可以通过这篇文章进行学习 来学习一下 JavaScript 中的 Mixin

如何在多个组件之间共享代码,是开发者们在学习 React 是最先问的问题之一,你可以使用组件组合来实现代码重构,你也可以定义一个组件并在其他几个组件中使用它。

如何用组合来解决某个模式并不是显而易见的,React 受函数式编程的影响,但是它进入了由面向对象库主导的领域(hooks 出现以前),为了解决这个问题,React 团队在这加上了 Mixin,它的目标就是当你不确定如何使用组合解决想用的问题时,为你提供一种在组件之间重用代码。

React 最主流构建 Component 的方法是利用 createClass 创建,顾名思义,就是创造一个包含 React 方法 Class 类。

Mixin危害

在 React 官方文档 Mixins Considered Harmful 中提到了 Mixin 带来的危害,主要有以下几个方面:

• Mixin 可能会相互依赖，相互耦合，不利于代码维护;


• 不同的 Mixin 中的方法可能会相互冲突;


• Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性;

装饰器模式

装饰器是一种特殊的声明,可以附加到类声明、方法、访问器、属性或参数上,装饰者使用 @+函数名 形式来修改类的行为。如果你对装饰器不太了解,你可以通过这一篇文章 TS的装饰器你再学不会我可就要报警了哈 进行学习。

现在我们来看看在 React 中怎么使用装饰器,我们现在有这样的一个需求,就是为被装饰的页面或组件设置统一的背景颜色和自定义颜色,完整代码具体如下:

import React, { Component } from "react";



interface Params {

  background: string;

  size?: number;

}



function Controller(params: Params) {

  return function (

    WrappedComponent: React.ComponentClass,

  ): React.ComponentClass {

    WrappedComponent.prototype.render = function (): React.ReactNode {

      return <div>但使龙城飞将在,不教胡马度阴山</div>;

    };



    return class Page extends Component {

      render(): React.ReactNode {

        const { background, size = 16 } = params;

        return (

          <div style={{ backgroundColor: background, fontSize: size }}>

            <WrappedComponent {...this.props}></WrappedComponent>

          </div>

        );

      }

    };

  };

}



@Controller({ background: "pink", size: 100 })

class App extends Component {

  render(): React.ReactNode {

    return <div>牛逼</div>;

  }

}



export default App;

这段代码的具体输出如下所示:

在上面的代码中,Controller 装饰器会接收 App 组件,其中 WrappedComponent 就是我们的 App 组件,在这里我们通过修改原型方法 render 将其的返回值修改了,并对其进行了一层包裹。

所以 App 组件在使用了类装饰器,不仅可以修改了原来的 DOM,还对外层多加了一层包裹,理解起来就是接收需要装饰的类为参数,返回一个新的内部类。恰与 HOC 的定义完全一致。所以,可以认为作用在类上的 decorator 语法糖简化了高阶组件的调用。

高阶组件

HOC 高阶组件模式是 React 比较常用的一种包装强化模式之一,你也可以看作 React 对装饰模式的一种实现,高阶组件就是一个函数,并且该函数接收一个组件作为参数,并返回一个新的组件,它是一种设计模式,这种设计模式是由 React 自身的特性产生的结果。

高阶组件主要解决了以下问题,具体如下:

• 复用逻辑: 高阶组件就像是一个加工 React 组件的工厂,你需要向该工厂提供一个坯子,它可以批量地对你送进来的组件进行加工,包装处理,还可以根据你的需求定制不同的产品;


• 强化props: 高阶组件返回的组件,可以劫持上一层传过来的 props,染回混入新的 props,来增强组件的功能;


• 控制渲染: 劫持渲染是 hoc 中的一个特性,在高阶组件中,你可以对原来的组件进行条件渲染,节流渲染,懒加载等功能;

HOC的实现方式

常用的高阶组件有两种方式,它们分别是 正向属性代理 和 反向继承,接下来我们来看看这两者的区别。

正向属性代理

所谓正向属性代理,就是用组件包裹一层代理组件,在代理组件上,我们可以代理所有传入的 props,并且觉得如何渲染。实际上这种方式生成的高阶组件就是原组件的父组件,父组件对子组件进行一系列强化操作,上面那个装饰器的例子就是一个 HOC 正向属性代理的实现方式。

对比原生组件增强的项主要有以下几个方面:

• 可操作所有传入的props: 可以对其传入的 props 进行条件渲染,例如权限控制等;


• 可以操作组件的生命周期;


• 可操作组件的 static 方法,但是需要手动处理,或者引入第三方库;


• 获取 refs;


• 抽象 state;

反向继承

反向继承其实是一个函数接收一个组件作为参数传入,并返回了一个继承自该传入的组件的类,并且在该类的 render() 方法中返回 super.render() 方法,能通过 this 访问到源组件的生命周期、props、state、render等,相比属性代理它能操作更多的属性。

两者区别

• 属性代理是从组合的角度出发,这样有利于从外部操作被包裹的组件,可以操作的对象是 props,或者加一层拦截器或者控制器等;


• 方向继承则是从继承的角度出发,是从内部去操作被包裹的组件,也就是可以操作组件内部的 state,生命周期,render 函数等;

具体实例代码如下所示:

function Controller(WrapComponent: React.ComponentClass) {

  return class extends WrapComponent {

    public state: State;

    constructor(props: any) {

      super(props);

      this.state = {

        nickname: "moment",

      };

    }



    render(): React.ReactNode {

      return super.render();

    }

  };

}



interface State {

  nickname: string;

}



@Controller

class App extends Component {

  public state: State = {

    nickname: "你小子",

  };

  render(): React.ReactNode {

    return <div>{this.state.nickname}</div>;

  }

}

反向继承主要有以下优点:

• 可以获取组件内部状态,比如 state,props,生命周期和事件函数;


• 操作由 render() 输出的 React 组件;


• 可以继承静态属性,无需对静态属性和方法进行额外的处理;

反向继承也存在缺点,它和被包装的组件强耦合,需要知道被包装的组件内部的状态,具体是做什么,如果多个反向继承包裹在一起,状态会被覆盖。

HOC的实现

HOC 的实现方式按照上面讲到的两个分类一样,来分别讲解这两者有什么写法。

操作 props

该功能由属性代理实现,它可以对传入组件的 props 进行增加、修改、删除或者根据特定的 props 进行特殊的操作,具体实现代码如下所示:

import React, { Component } from "react";



interface Params {

  background: string;

  size?: number;

}



function Controller(params: Params) {

  return function (

    WrappedComponent: React.ComponentClass,

  ): React.ComponentClass {

    WrappedComponent.prototype.render = function (): React.ReactNode {

      return <div>但使龙城飞将在,不教胡马度阴山</div>;

    };



    return class Page extends Component {

      render(): React.ReactNode {

        const { background, size = 16 } = params;

        return (

          <div style={{ backgroundColor: background, fontSize: size }}>

            <WrappedComponent {...this.props}></WrappedComponent>

          </div>

        );

      }

    };

  };

}



@Controller({ background: "pink", size: 100 })

class App extends Component {

  render(): React.ReactNode {

    return <div>牛逼</div>;

  }

}



export default App;

抽离state控制组件更新

高阶组件可以将 HOC 的 state 配合起来,控制业务组件的更新,在下面的代码中,我们将 input 的 value 提取到 HOC 中进行管理,使其变成受控组件,同时不影响它使用 onChange 方法进行一些其他操作,具体代码如下所示:

function Controller(WrappedComponent) {

  return class extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        name: "",

      };

      this.onChange = this.onChange.bind(this);

    }



    onChange = (event) => {

      this.setState({

        name: event.target.value,

      });

    };



    render() {

      const newProps = {

        value: this.state.name,

      };

      return (

        <WrappedComponent

          onChange={() => this.onChange}

          {...this.props}

          {...newProps}

        />

      );

    }

  };

}



class App extends React.Component {

  render() {

    return (

      <div>

        <h1>{this.props.value}</h1>

        <input name="name" {...this.props} />

      </div>

    );

  }

}



export default Controller(App);

获取 Refs 实例

使用高阶组件后,获取到的 ref 实例实际上是最外层的容器组件,而非原组件,但是很多情况下我们需要用到原组件的 ref,我们先来看下面的代码,具体代码如下所示:

function Controller(WrappedComponent) {

  return class Page extends React.Component {

    render() {

      const { ref, ...rest } = this.props;

      return <WrappedComponent {...rest} ref={ref} />;

    }

  };

}



class Input extends React.Component {

  render() {

    return <input />;

  }

}



class App extends React.Component {

  constructor(props) {

    super(props);

    this.ref = React.createRef();

  }

  componentDidMount() {

    console.log(this.ref);

  }

  render() {

    return <Input ref={this.ref} />;

  }

}



export default Controller(App);

通过查看控制台输出,你会发现获取到的是整个 Input 组件,那么有什么办法可以获取到 input 这个真实的 DOM 呢?

在之前的例子中我们可以通过 props 传递,一层一层传递给 input 原生组件来获取,具体代码如下:

class Input extends React.Component {

  render() {

    return <input ref={this.props.inputRef} />;

  }

}

注意,因为传参不能传 ref,所以这里要修改一下

当然你也可以利用父组件的回调,具体代码如下:

class App extends React.Component {

  constructor(props) {

    super(props);

    this.ref = React.createRef();

  }

  componentDidMount() {

    console.log(this.ref);

  }

  render() {

    return <Input inputRef={(e) => (this.ref = e)} />;

  }

}

最终的代码如下图所示,这里展示了以上两个方法具体代码,如下图所示:

通过查看浏览器输出,两者都能成功输出原生的 ref 实例

React 给我们提供了一个 forwardRef 来帮助我们进行 refs 传递,这样我们在高阶组件上获取的 ref 实例就是原组件的 ref 了,而不需要手动传递,我们只需要修改一下 Input 组件代码即可,具体如下:

const Input = React.forwardRef((props, ref) => {

  return <input type="text" ref={ref} />;

});

这样我们就获取到了原始组件的 ref 实例啦!

获取原组件的 static 方法

当待处理的组件为 class 组件时,通过属性代理实现的高阶组件可以获取到原组件的 static 方法,具体实现代码如下所示:

function Controller(WrappedComponent) {

  return class Page extends React.Component {

    componentDidMount() {

      WrappedComponent.moment();

    }

    render() {

      const { ref, ...rest } = this.props;

      return <WrappedComponent {...rest} ref={ref} />;

    }

  };

}



class App extends React.Component {

  static moment() {

    console.log("你好骚啊");

  }

  render() {

    return <div>你小子</div>;

  }

}



export default Controller(App);

你好骚啊 正常输出

反向继承操作 state

因为我们高阶组件继承了传入组件,那么就是能访问到this了,有了 this 我们就能操作和读取 state,也就不用像属性代理那么复杂还要通过 props 回调来操作 state。

反向继承的基本实现方法就是原组件继承 Component,再在高阶组件中通过把原组件传参,再生成一个继承自原组件的组件。

具体实例代码如下所示:

function Controller(WrappedComponent) {

  return class Page extends WrappedComponent {

    componentDidMount() {

      console.log(`组件挂载时 this.state 的状态为`, this.state);

      setTimeout(() => {

        this.setState({ nickname: "你个叼毛" });

      }, 1000);

      // this.setState({ nickname: 1 });

    }

    render() {

      return super.render();

    }

  };

}



class App extends React.Component {

  constructor() {

    super();

    this.state = {

      nickname: "你小子",

    };

  }

  render() {

    return <h1>{this.state.nickname}</h1>;

  }

}



export default Controller(App);

代码具体输出如下图所示,当组件挂载完成之后经过一秒,state 状态发生改变:

劫持原组件生命周期

因为反向继承方法实现的是高阶组件继承原组件,而返回的新组件属于原组件的子类,子类的实例方法会覆盖父类的,具体实例代码如下所示:

function Controller(WrappedComponent) {

  return class Page extends WrappedComponent {

    componentDidMount() {

      console.log("生命周期方法被劫持啦");

    }

    render() {

      return super.render();

    }

  };

}



class App extends React.Component {

  componentDidMount() {

    console.log("原组件");

  }

  render() {

    return <h1>你小子</h1>;

  }

}



export default Controller(App);