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

自我叙述

我相信，每个人都有一个自命不凡的梦，总觉得自己应该和别人不一样，我不可能如此普通，自己的一生不应该泯然众生，平凡平庸的度过。尤其是干我们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);

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

render props 模式

render props 的核心思想是通过一个函数将组件作为 props 的形式传递给另外一个函数组件。函数的参数由容器组件提供,这样的好处就是将组件的状态提升到外层组件中,具体实例代码如下所示:

const Home = (props) => {

  console.log(props);

  const { children } = props;

  return <div>{children}</div>;

};



const App = () => {

  return (

    <div>

      <Home admin={true}>

        <h1>你小子</h1>

        <h1>小黑子</h1>

      </Home>

    </div>

  );

};



export default App;

具体的代码运行结果如下图所示:

虽然这样能实现效果,但是官方说这是一个傻逼行为,因此官方更推荐使用 React 官方提供的 Children 方法,具体实例代码如下所示:

const Home = (props) => {

  console.log(props);

  const { children } = props;

  return <div>{React.Children.map(children, (node) => node)}</div>;

};



const App = () => {

  return (

    <div>

      <Home admin={true}>

        <h1>你小子</h1>

        <h1>小黑子</h1>

      </Home>

    </div>

  );

};



export default App;

具体更多信息请参考 官方文档

实际上,我们经常使用的 context 就是使用的 render props 模式。

反向状态回传

这个组件的设计模式很叼很骚,就是你可以通过 render props 中的状态,提升到当前组件中也就是把容器组件内的状态,传递给父组件,具体示例代码如下所示:

import React, { useRef, useEffect } from "react";



const Home = (props) => {

  console.log(props);

  const dom = useRef();

  const getDomRef = () => dom.current;

  const handleClick = () => {

    console.log("小黑子");

  };

  const { children } = props;

  return (

    <div ref={dom}>

      <div>{children({ getDomRef, handleClick })}</div>

      <div>{React.Children.map(children, (node) => node)}</div>

    </div>

  );

};



const App = () => {

  const childRef = useRef(null);

  useEffect(() => {

    const dom = childRef.current();

    dom.style.background = "red";

    dom.style.fontSize = "100px";

  }, [childRef]);



  return (

    <div>

      <Home admin={true}>

        {({ getDomRef, handleClick }) => {

          childRef.current = getDomRef;



          return <div onClick={handleClick}>你小子</div>;

        }}

      </Home>

    </div>

  );

};



export default App;

在运行代码之后,我们首先点击一下 div 元素,具体有如下输出,请看下图:

你会看到成功的在父组件操作到了子组件的 ref 实例了,还获取到了子组件的 handleClick 函数并成功调用了。

提供者模式

考虑一下这个场景,就好像爷爷要给孙子送吃的,按照之前的例子中,要通过 props 的方式把吃的送到孙子手中,你首先要经过儿子手中,再由儿子传给孙子,那万一儿子偷吃了呢?孙子岂不是饿死了.....

为了解决这个问题,React 提供了 Context 提供者模式,它可以直接跳过儿子直接把吃的送到孙子手上,具体实例代码如下所示:

import React, { createContext, useContext } from "react";



const ThemeContext = createContext({ nickname: "moment" });



const Foo = () => {

  const theme = useContext(ThemeContext);

  return <h1>{theme.nickname}</h1>;

};



const Home = () => {

  const theme = useContext(ThemeContext);

  return <h1>{theme.nickname}</h1>;

};



const App = () => {

  const theme = useContext(ThemeContext);



  return (

    <div>

      {

        <ThemeContext.Provider

          value={{

            nickname: "你小子",

          }}

        >

          <Foo />

        </ThemeContext.Provider>

      }

      {

        <ThemeContext.Provider

          value={{

            nickname: "首页",

          }}

        >

          <Home />

        </ThemeContext.Provider>

      }

      <div>{theme.nickname}</div>

    </div>

  );

};



export default App;

代码输出如下图所示:

到这里本篇文章也就结束了,Hooks 的就不讲啦,在这篇文章中有讲到一点,喜欢的可以看看 如何优雅设地计出不可维护的 React 组件

参考资料

• 学好这些 React 设计模式，能让你的 React 项目飞起来


• React高阶组件(HOC)的入门📖及实践💻


• 【React深入】从Mixin到HOC再到Hook

总结

不管是使用高阶组件、render props、context亦或是 Hooks,它们都有不同的使用场景,不能说哪个好用,哪个不好用,这就要根据到你的业务场景了,最后不得不说,React,你是真的骚啊......

最后希望这篇文章对你有帮助,如果错漏,欢迎留言指出,最后祝大嘎假期快来!

作为一名前端开发工程师，我们经常需要在 JavaScript 中操作数组，其中比较常见的操作便是对数组进行元素的添加、删除和修改。在这篇文章中，我会详细介绍JS中所有删除数组元素的方法。

删除数组元素之splice()

splice()方法可以向数组任意位置插入或者删除任意数量的元素，同时返回被删除元素组成的一个数组。

const arr = ['a', 'b', 'c', 'd', 'e'];

arr.splice(1, 2);//删除数组下标为1、2的元素

console.log(arr); // ["a", "d", "e"]

通过上述代码，可以看到元素'b'和'c'已被删除，被删除的元素以数组形式返回。需要注意的是，该方法会改变原数组，因此使用时应该谨慎。

删除数组元素之filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。它不会改变原始数组。

const arr = [10, 2, 33, 5];

const newArr = arr.filter(item => item !== 2);//过滤掉值为2的元素

console.log(newArr); //[10, 33, 5]

以上代码展示了如何使用 filter() 方法删除数组内某些元素。其中箭头函数 (item) => item !== 2 表示过滤掉数组元素中值为2的元素。

删除数组元素之pop()

pop() 方法用于删除并返回数组的最后一个元素。

const arr = [1, 2, 3];

const lastItem = arr.pop(); //删除元素3，lastItem为3

console.log(lastItem); //3

console.log(arr); //[1, 2]

通过上述代码可以看到，使用 pop() 方法可以非常容易地删除数组的最后一个元素。

删除数组元素之shift()

shift() 方法用于删除并返回数组的第一个元素。

const arr = [1, 2, 3];

const firstItem = arr.shift(); //删除元素1，firstItem为1

console.log(firstItem); //1

console.log(arr); //[2, 3]

与pop()类似， shift() 方法也是从数组中删除元素。但与 pop() 不同的是，它从数组头部开始删除。

删除数组元素之splice()、slice()和concat()组合操作

刚才已经讲到了 splice()方法的删除功能，现在我们还可以将slice() 和 concat() 结合起来使用进行删除。

let arr = ['a', 'b', 'c', 'd', 'e'];

arr = arr.slice(0, 1).concat(arr.slice(2));//删除数组下标为1的元素

console.log(arr);//["a", "c", "d", "e"]

通过以上代码可以看出，使用 slice() 方法获取要删除的元素前面和后面的元素，最后使用 concat() 将两个数组合并成为一个新的数组。

删除数组元素之使用ES6中的扩展运算符

在ES6中，spread operator扩展运算符是用来展开一个可迭代对象，比如用于函数调用时的展开数组等。

let arr = ['a', 'b', 'c', 'd', 'e'];

arr = [...arr.slice(0, 1), ...arr.slice(2)];//删除数组下标为1的元素

console.log(arr);//["a", "c", "d", "e"]

通过以上代码可以看出，使用ES6中的扩展运算符（...）也可以方便地删除数组内某些元素。

总结

不同方法适用于不同情境，具体的使用应该根据情况而定。总体而言， splice() 和 filter() 是两个最常用的方法，pop() 和 shift() 则适合删除特定位置的元素。而在多种情况下，不同的操作组合也能实现有效删除。至于如何更好地使用这些方法，还需要根据实际情况进行深入应用和理解。

希望本文对你有所帮助，同时也欢迎拓展其他新颖的删除数组元素的方法。

背景介绍

我女朋友的身份从一个「前端开发」转变成「创业者」，所以本篇文章重点突出创业后她的一些思考。

采访者：Gopal。受访者：QPQ。

以下标题均为问题，内容均为回答。

采访开始分割线

创业方向

抖音电商(抖店)。

具体的工作就是：前期确定类目，选货，进货(商品+打包袋)，做商品链接，上链接卖货，谈物流，打包发货，售后，客服，日常运营等。

创业跟「打工」最大的区别是？

最大的区别就是创业需要自己缴社保，打工公司给缴哈哈哈。

然后目前由于是一个人在创业，所以一切的事物都需要自己做包括选货，进货(商品+打包袋)，做商品链接，上链接卖货，打包发货，售后，客服，日常运营等, 也就是自己是自己的老板也是自己的员工。

之前工作呢是前端开发，分工明确做前端开发就好。现在是整条链路都需要自己经手，也是一种不一样的体验。

不过这个得话看个人，我自己是乐在其中，虽然所有纷繁杂乱的事情都得自己做，但很有成就感。另外就是身份上的转变，从之前的技术开发关注功能与交互转变为了现在直接接触用户，跟用户产生利益关系的这么一个身份，一种不太一样的感觉。

创业后的生活节奏？

生活节奏呢有时候忙起来真的可以做到废寝忘食，自从做抖店以来直接从50多公斤降到最低时47，减肥很轻松哈哈哈哈。

不过充实的一天忙完之后是最开心轻松的时刻，一般这个时间段我会用来逛公园，吃自己喜欢的。

但是也时长有流量冷淡，生意冷淡的时候，会比较忧桑和焦虑，尤其是突然从很高的流量和单量降到很低的流量和单量的时候心情会很忧桑，也会很焦虑。

另外处理售后也是门考验人的技术活，有时候碰到一些难搞的售后，难受一整天都不在话下，此处心疼所有的客服小姐姐一秒钟。不过通过售后也能发现一些问题，从开店到现在通过不断调整优化目前已经减少了很大一部分售后问题可喜可贺。

创业有遇到什么困难么？

人货场是硬伤。

1. 人手问题。有时候生意特别好但是人货场跟不上真的很可惜，浪费了流量。这个真是硬伤目前无法解决，只能后面如果越做越好了有能力雇个助理看看。


2. 场地和囤货问题。

• 第一是场地受限放货和找货都很艰难，这是硬伤，只能后面有能力了整个仓库试下。


• 第二有时候有一些产品卖爆了会再搞一大批，回来后发现并没有那么畅销了，就会存在囤货压力。爆款补货真的不能搞多，饥饿营销也是不错的策略，多了就不香了。


• 第三目前所在地区域距离货品工厂挺远的，拿货也是一个硬伤，相比在货品工厂附近的店家就很劣势。

3. 经常性会遇到瓶颈期，如何破局有点难搞。目前也正在经历，也做了很多尝试但暂时所有的尝试都还没有突破瓶颈，还需要不断的学习同行和不断的尝试不同的方式来处理这个问题。

未来计划

期望明年的这个时候能有仓库和员工哈哈哈哈，美丽的愿望。

采访结束分割线

最后，我自己总结一下。

首先，我们是深思熟虑之后才做出来的决定，并不是冲动。

• 我女朋友一直有创业的想法。


• 我们还年轻，现阶段负担还没那么大。设想，假如到 30+ 岁，那时候，做出一个选择，可能需要考虑的事情就更多了。也就是试错的代价可能没那么大。


• 我们两个人，起码保证一人还是有稳定收入的前提下。


• ...

另外，创业真的很艰难，作为一个「陪跑者」，还是有所体会。

最后一点，我觉得只要我们做的事情不违法，不违反道德，不对他人造成伤害，那你想做就去做吧。

程序员如何给变量起名字

在编写代码时，为变量命名是非常重要的。良好的命名习惯可以提高代码的可读性和可维护性，使得其他开发者能够更容易地理解你的代码。在这篇文章中，我们将讨论程序员如何为变量选择合适的名称。

规范

首先，需要了解所用编程语言和项目的命名规范。不同的编程语言和团队可能有不同的命名约定。例如，Python 中通常使用下划线分隔单词（snake_case），而 Java 和 JavaScript 则倾向于驼峰式大小写（camelCase）。遵循一致的命名规则会使得整个代码库更具统一性，降低学习成本。

见名知意

一个好的变量名应该尽可能描述它代表的实际含义。换句话说，当其他开发者看到变量名时，他们应该能够猜测出它表示什么以及如何使用。

好例子

• user_name 代表用户名；


• password_hash 表示经过哈希处理的密码；


• email_list 是一个邮件列表。

不好的例子

• x, y, z 这样的简单字母命名无法反映变量的实际含义（除非在特定场景下，如表示坐标或数学公式中）；


• temp、data 等过于泛化，无法直接理解其用途；


• string1、array2 只提供了数据类型信息，但未说明其用途。

避免冗长

虽然应该让变量名具有描述性，但同时需要避免使用冗长的名称。太长的名称可能会导致代码难以阅读和维护。通常情况下，选择简洁明确的单词组合更为可取。

好例子

• index


• user_count

不好的例子

• the_index_of_the_current_element_in_the_list


• the_total_number_of_users_in_the_database

使用专业术语

如果你正在编写涉及某个领域知识的代码，可以使用该领域的专业术语作为变量名。这将使得对该领域能较好理解的开发者更容易理解你的代码意图。

好例子

• 在计算几何领域，变量名 centroid 表示多边形的质心；


• 在密码学领域，变量名 salt 代表加密时混入的额外值。

处理复数

当变量包含一系列对象时，最好使用复数名称。这样可以让读者知道它是一个集合类型（如列表、数组、集等），而不仅仅包含一个对象。

好例子

• users


• files

避免重名和相似命名

为了提高代码的可读性，应尽量避免在同一作用域内使用相似或容易混淆的变量名。

不好的例子

• user_list 和 users_list；


• convert_to_string 和 transform_to_string。

结论

良好的命名习惯对于编写高质量的代码至关重要。请确保你所选择的变量名既简洁明了，又具有描述性，并且遵循项目规范。这将使得其他开发者能够更容易地理解和维护你的代码。

作者：牙叔教程
来源：juejin.cn/post/7225490584058724410

>公众号 牙叔教程

一、布局

1、首页

（1）头部

iconfont的使用和代码优化

• iconfont.css中修改路径


• 引入iconfont.css import

text-align: center（文字水平居中）

优化：

1. 变量复用：src/assets/styles/varibles.styl中定义变量 $变量名=值。在style中引入样式，@import（样式中引入样式需加@符号）


2. 路径名过长：在css中引入其他的css想使用@符号，必须在@符号前加上~（@表示src目录）


3. 路径别名：

build/webpack.base.conf.js->resolve->alias->创建别名

resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      //创建别名

      'styles': resolve('src/assets/styles'),

      'common':resolve('src/common')

    }

}

报错原因：修改webpack中的内容后需要重启服务器

（2）轮播图

Swiper插件原理

Swiper是一款基于JavaScript的开源滑动插件，可以用于制作各种类型的轮摇图、滑动菜单、图片预览等。Swiper 的原理主要是通过监听用户的手势操作来实现滑动效果，同时利用CSS3动画和过渡效果来实现平滑的过渡和动画效果。

1. 监听手势操作

Swiper通过监听用户的手势操作来实现滑动效果，具体包括touchstart、touchmove.touchend符事件。在touchstart 事件中，Swiper记录下用户的触摸起始位置及时间，touchmove事件中，Swiper根据用户移动的距离和时间计算出滑动速度和方向，从而控制滑动的行为;touchend事件中，Swiper根据滑动的距离和速度来判断是否进行下一张图片的切换。

2. 切换图片

Swiper通过获取当前显示的图片索引及方向来计算出下一张图片的索引，并通过CSS3过渡效果来实现平滑的图片切换。同时，Swiper可以支持多种不同的切换效果，包括淡入淡出、渐变、滑动、翻转等，

3. 响应式设计

Swiper支持响应式设计，可以根据不同的设备尺寸和屏幕方向来自动调整轮播图的大小和样式，从而提供更好的用户体验。同时，Swiper还支持自定义参数配置，可以灵活地控制轮播图的各种属性和行为。

问题

网速慢时图片没有加载出来造成的抖动（使用padding-bottom占位）：

overflow: hidden

height:0

padding-bottom: 31.25%  //高宽比

显示分页：

<!-- template -->

<swiper :options="swiperOption" v-if="showSwiper">

    <!-- slides -->

    <!-- 循环实现轮播图 -->

    <swiper-slide v-for="item of list" :key="item.id">

        <img class="swiper-img" :src="item.imgUrl" alt="">

    </swiper-slide>

    <!-- 插槽 -->

    <div class="swiper-pagination"  slot="pagination"></div>

</swiper>

// script

export default {

    name: 'HomeSwiper', 

    props: {

        list:Array

    },   

    data() {

        return {

            swiperOption: {

                // 设置显示轮播图分页

                pagination: ".swiper-pagination",

                //设置轮播图循环展示

                loop: true,

                // 设置自动轮播及间隔时间

                autoplay: 3000

            },

        }

    },

    computed: {

        // 列表为空时不显示轮播图

        showSwiper() {

            return this.list.length;

        }

    }

}

样式穿透

• >>>


• /deep/


• ::v-deep

1. 引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式。


2. 样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除

/* style */

.wrapper >>> .swiper-pagination-bullet

        background-color: #fff

插槽slot

通过slot插槽将页面中具体的数据传递给swiper组件，希望组件的内容可以被父组件定制的时候，使用slot向组件传递内容。

（3）图标区域

图标的轮播实现

使用computed计算功能实现图标的多页显示（容量为8，多出来的的图标换页显示）：

computed: {

    pages () {

        // 创建二维数组pages

        const pages = [];

        // 对图标列表使用forEach循环

        this.list.forEach((item, index) => {

            // 计算页码

            const page = Math.floor(index/8);  

            if (!pages[page]){

                pages[page] = []

            }

            pages[page].push(item)

        });

        // pages[0]中存储在第一页显示的图标，以此类推

        return pages

    },

    showIcon() {

        return this.list.length

    }

}

优化：

（1）希望文字过多时有…提示：

css中添加：

overflow: hidden

white-space:nowrap

text-overflow:ellipsis

（2）重复代码封装：

借助stylus提供的mixin对代码进行封装：

src/assets/varibles.styl中定义ellipse方法，在css中@import 文件，直接使用ellipse()

mixin（混入）

它提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

使用场景： 不同组件中经常会用到一些相同或相似的代码，这些代码的功能相对独立。可以通过mixin 将相同或相似的代码提出来。

缺点：

1. 变量来源不明确


2. 多 mixin 可能会造成命名冲突（解决方式：Vue 3的组合API）


3. mixin 和组件出现多对多的关系，使项目复杂度变高。

（4）推荐

text-indent：文字缩进

使用ellipsis()不起作用：父元素添加min-width: 0

（5）周末游

（6）Ajax获取首页数据

安装axios，引入axios

import axios from 'axios'

methods: {

    getHomeInfo() {

      // 使用axios.get()请求一个URL，返回的对象是一个promise对象，使用.then()获取

      axios.get('/api/index.json?city='+this.city)

        .then(this.getHomeInfoSucc);

    },

    

    getHomeInfoSucc(res) {

      res = res.data;

      if (res.ret && res.data) {

        const data = res.data

        // this.city = data.city

        this.swiperList = data.swiperList

        this.iconList = data.iconList

        this.recommendList = data.recommendList

        this.weekendList = data.weekendList

      }

    }

}

转发机制（开发环境的转发）

• 只有static文件夹下的内容才可以被外部访问到


• 现在用的是本地模拟的接口地址，假如代码要上线，肯定不能填成这样的一个地址，那么就需要在上线之前把这块儿的东西都重新替换成API这种格式，上线之前去改动代码儿是有风险的


• 转发机制：webpack-dev-server提供 proxyTable 配置项，config/index.js 中proxyTable

module.exports = {

  dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    // 请求api目录时将请求转发到当前服务器的8080端口上，但是路径替换为/static/mock

    proxyTable: {

      '/api':{

        target: 'http://localhost:8080',

        pathRewrite: {

          '^/api': '/static/mock'

        }

      }

    }

  }

• 整个首页发送一个ajax请求而不是每个组件发送一个

（7）首页父子组件数据传递

父->子：属性传值，子组件props:{}接收

轮播图默认显示最后一张图

原因：

还没有接收ajax数据时，swiper接收的数据是一个空数组，当接受ajax数据后， swiperList变成真正的数据项。再传给home-swiper这个组件的时候，它才获取到新的数据，然后重新渲染了新数据对应的很多的幻灯片。因为swiper的初始化创建是根据空数组创建的，所以会导致默认显示的是所有的这个页面中的最后一个页面。

解决：

让swiper的初次创建由完整的数据来创建，而不是由那个空数组来创建。只需要写一个v-if，再写一个list.length。当传递过来的list是个空数组的时候，v-if的值是false，所以swiper不会被创建。只有等真正的数据过来了之后才会被创建。由于模板中尽量少出现逻辑性代码，所以创建一个计算属性computed，计算 list.length。

取消轮播图自动播放：autoplay: false

2、城市选择页

（1）路由配置

路由跳转：

import Vue from 'vue'

import Router from 'vue-router'

import Home from '../pages/home/Home'

import City from '../pages/city/City'

import Detail from '../pages/detail/Detail'



Vue.use(Router)



export default new Router({

  routes: [{

    path: '/',

    name: 'Home',

    component: Home

   },

  {

    path: '/city',

    name: 'City',

    component: City

  }, 

  {

    // 动态路由

    path: '/detail/:id',

    name: 'Detail',

    component: Detail

  } 

  ],

  scrollBehavior (to, from, savedPosition) {

    return { x: 0, y: 0 }

  }

})

使用：

<router-link to="/city">

    <div class="header-right">

        {{this.city}}

        <span class="iconfont arrow-icon">&#xe600;</span>

    </div>

</router-link>

（2）搜索框

定义一个keyword数据，与搜索框使用v-model做双向数据绑定。

<div class="search">

    <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />

</div>

City.vue父组件向Search.vue组件传值（cities），Search.vue接收cities

使用watch监听keyword的改变（使用节流）

解决匹配城市过多无法滚动问题

import Bscroll，在mounted中创建一个BScroll， this.scroll = new BScroll(this.$refs.search)，通过$ref获取需要滚动的元素。

<!--搜索结果显示框-->

<div class="search-content" ref="search" v-show="keyword">

    <ul>

        <!--解决删除输入列表依然存在的问题-->

        <li class="search-item border-bottom" v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>

        <li class="search-item border-bottom"  v-show="hasNoData">没有找到匹配数据</li>

    </ul>

</div>

优化

1.解决删除输入列表依然存在的问题：v-show = "keyword"

2.没有找到匹配项时，显示“没有找到匹配数据”：v-show = "!this.list.length"

双向数据绑定原理（搜索时使用）

• 
  

  概念：
  
  Vue 中双向绑定是一个指令v-model，可以绑定一个响应式数据到视图，同时视图的变化能改变该值。v-model是语法糖，默认情况下相当于:value和@input（v-bind:value，v-on:input），使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。

  
  


• 
  

  使用：
  
  通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。

  
  


• 
  

  原理：
  
  v-model是一个指令，双向绑定实际上是Vue 的编译器完成的，通过输出包含v-model模版的组件渲染函数，实际上还是value属性的绑定及input事件监听，事件回调函数中会做相应变量的更新操作。

  
  

（3）列表

引入区块滚动

子元素使用float，父元素开启BFC（overflow：hidden）去除高度塌陷。

使列表区域无法滚动（position:absolute + overflow:hidden），然后使用better-scroll插件

better-scroll

• 安装better-scroll包。


• 需要 better-scroll 包裹的所有元素最外层需要使用一个div包裹，并设置一个ref属性方便创建scroll。


• 创建scroll

<div class="list" ref="wrapper">list中的元素<div>

import Bscroll from 'better-scroll'

// 写在mounted钩子函数中，此时页面挂载完成，可以操作DOM元素。

mounted() {

    this.scroll = new Bscroll(this.$refs.wrapper)

}

$ref

ref属性：获取DOM。

在vue中ref可以以属性的形式添加给标签或者组件:

• ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素；


• ref 写在组件上时：this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件。

$refs 是所有注册过 ref 的集合（对象）；若是遍历的ref，则对应$refs是个数组集合

注意：$refs不是响应式的，只在组件渲染完成之后才填充。所以想要获取DOM数据的更新要使用 this.$nextTick()

字母表和城市列表字母的联动

兄弟组件传值:

Alphabet组件将值传递给父组件City.vue，父组件将值传递给子组件List.vue实现字母表和城市列表字母的联动。

为每个字母绑定一个onclick事件，在方法中使用this.$emit向外传递change事件。

<!--Alphabet.vue-->

<template>

    <ul class="list" >

        <li class="item" v-for="key in letters" 

            :key="key" 

            :ref="key"

            @touchstart="handleTouchStart" 

            @touchmove="handleTouchMove"

            @touchend="handleTouchEnd"

            @click="handleLetterClick"

        >

            {{key}}

        </li>

    </ul>

</template>

// Alphabet.vue

methods: {

    handleLetterClick (e) {

        // 向外(City.vue)传递事件

        this.$emit("change", e.target.innerText);    

    }

}

父组件

<!--City.vue-->

<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>

// City.vue

data () {

    return {

        letter: '' // 被点击的字母

    }

},

methods: {

    handleLetterChange (letter) {

        this.letter = letter;

        // console.log(letter);

    }

}

<!-- 向List组件传值letter -->

<city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>

// List.vue接收letter

props: {

    hot: Array,

    cities: Object,

    letter: String

},

使用watch监听letter变化，当letter发生变化时，调用this.scroll.scrollToElement()方法将区域自动滚动到指定区域，在template中给每一个area区域加一个:ref='key'，通过this.$refs[this.letter][0]获取值为this.letter的DOM元素。

<div class="area" v-for="(item, key) in cities" :key="key" :ref="key" >

    <div class="title border-topbottom">{{ key }}</div>

    <div class="item-list">

        <div class="item border-bottom" v-for="innerItem in item" :key="innerItem.id" @click="handleCityClick(innerItem.name)">{{innerItem.name}}</div>

    </div>

</div>

watch: {

    letter () {

        if (this.letter) {

            // 获取值为`this.letter`的DOM元素

            const element = this.$refs[this.letter][0]

            // 将区域自动滚动到指定区域

            this.scroll.scrollToElement(element)

        }

    }

}

上下拖拽字母表touch

为字母表绑定三个事件：

@touchstart="handleTouchStart"  //手指开始触摸时设置this.touchStatus = true

@touchmove="handleTouchMove"  //在true时对触摸事件做处理

@touchend="handleTouchEnd"  //手指结束触摸时设置this.touchStatus = false

// 构建字母数组

computed: {

    // 构建字母数组["A", "B", ……, "Z"]

    letters () {

        const letters = [];

        for (let i in this.cities){

            letters.push(i);

        }

        return letters;

    }

},

methods: {

    handleLetterClick (e) {

        // 向外(City.vue)传递事件

        this.$emit("change", e.target.innerText);



    },

    handleTouchStart () {

        this.torchStatus = true;

    },

    handleTouchMove (e) {

        if (this.torchStatus) {

            // 如果timer已经存在，去除timmer（即上一次的事件还未执行完毕又出发了下一次事件，就用下一次事件覆盖上一次的事件）

            if (this.timer){  

                clearTimeout(this.timer)

            }

            // 否则就创建一个timer

            //节流，将操作延迟16ms执行，如果上一个操作间隔小于16ms，则清除上一个操作，直接执行这次操作，减少handleTouchMove的使用频率

            this.timer = setTimeout(() => {

                const touchY = e.touches[0].clientY - 79;  // 当前手指触摸位置与头部下沿的距离，79px为头部的高度

                const index = Math.floor((touchY - this.startY) / 20);  //当前手指触摸位置的元素

                // 合法时向父元素emit  change事件

                if (index >= 0 && index < this.letters.length){

                    this.$emit('change', this.letters[index]);

                }

            }, 16)



        }

    },

    handleTouchEnd () {

        this.torchStatus = false

    }

}

优化

1、将字母A到头部下沿的距离的计算放在updated生命周期钩子函数中

初始时cities值为0，当Ajax获取数据后，cities的值才发生变化，AlphaBet才被渲染出来， 当往alphabet里面传的数据发生变化的时候，alphabet这个组件儿就会重新渲染。之后，updated这个生命周期钩子就会被执行。这个时候，页面上已经展示出了城市字母列表里所有的内容，去获取A这个字母所在的dom对应的offsettop的值就没有任何的问题了。

2、节流

如果timer已经存在，去除timmer（即上一次的事件还未执行完毕又出发了下一次事件，就用下一次事件覆盖上一次的事件）。

否则就创建一个timer，将操作延迟16ms执行，如果上一个操作间隔小于16ms，则清除上一个操作，直接执行这次操作，减少handleTouchMove的使用频率。

3、使用Vuex实现首页和城市选择页面的数据共享

1. 安装vuex


2. 创建src/store/index.js文件

import Vue from 'vue'

import Vuex from 'vuex'

import state from './state'

import mutations from './mutations'



Vue.use(Vuex)



export default new Vuex.Store({

    state,

    // actions: {

    //     changeCity (ctx, city) {

    //         ctx.commit('changeCity', city)

    //     }

    // },

    mutations 

})

3. main.js中引入store

import store from './store'

4. 在mainjs中创建根实例时将store传入，store会被派发到每个子组件中，每个子组件中都可以使用this.$store获取到 store。

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

（1）Vuex

概念

Vuex 是 Vue 专用的状态管理库，它以全局方式集中管理应用的状态，并以相应的规则保证状态以一种可预测的方式发生变化。主要解决的问题是多组件之间状态共享。

核心概念

• State：存放核心数据


• Action：异步方法


• Mutation：同步的对数据的改变


• Getter：类似于计算属性，提供新的数据，避免数据的冗余


• Module：模块化，拆分

项目中Vuex的使用

• state存放当前城市CurCity


• 为每个城市元素都绑定一个onclick事件（获取改变的city），点击城市


• 在List组件中调用dispatch方法->触发Action


• 在store/index.js中增加一个actions对象（接收city），使用commit调用mutation


• mutations中，令state.city = city，完成

// List.vue

this.$store.dispatch('changeCity', city)

// store/index.js

actions: {

    changeCity (ctx, city) {

        // 使用Commit调用Mutation

        ctx.commit('changeCity', city)

    }

    

}，

mutations: {

    changeCity (state, city) {

        state.city = city;

        try {

            localStorage.city = city

        } catch (e) {}    

    }

}

（2）单页面与多页面

实现单页面跳转的方式

1. 标签实现

• a标签


• router-link标签

<a href="#/xxx" />

<router-link to="/xxx" />

2. 函数实现

• 传统的window.location.href


• 使用vue-router中的router对象 (点击城市后自动跳转到首页)
  step1 定义一个实现onclik事件的组件

<a onClick={this.goTo} />

step2 在goTo函数中实现跳转

goTo = () => {

	// 方案1 传统的window.location.href

	window.location.href = "#/xxx"



	// 方案2 使用vue-router中的router对象

	this.$router.push('/');

}

项目中，点击城市后跳转到首页：this.$router.push

methods: {

    handleCityClick (city) {

        this.$router.push('/');

    }

},

（3）localStorage（state和mutations中使用）

//state.js

let defaultCity = "上海"

try {

    if (localStorage.city){

        defaultCity = localStorage.city

    } 

}catch (e) {}



export default{

    city: defaultCity

}

// mutation.js

export default{

    changeCity (state, city) {

        state.city = city;

        try {

            localStorage.city = city

        } catch (e) {}

        

    }

}

（4）keep-alive优化网页性能

每次切换回组件时，组件就会被重新渲染，mounted生命周期钩子就会被重新执行，ajax数据就会被重新获取，导致性能低。

<!-- App.vue -->

<keep-alive>

  <router-view/>

</keep-alive>

使用keep-alive后会多出两个生命周期钩子函数activated和deactivated
activated在每次切换回组件时调用，因此可以在activated中定义方法，在城市切换时重新发送ajax请求。

4、景点详情页

（1）动态路由及banner分支

为recommend组件的li标签外部包裹一个router-link标签，li标签样式改变，解决方式：

将li标签直接替换为router-link标签， 加入一个tag=“li”的属性，动态绑定：:to = "'/detail/' + item.id"，在router/index.js设置Detail路由

<!-- recommend.vue -->

<router-link tag="li"

    class="item border-bottom"

    v-for="item in list"

    :key="item.id"

    :to="'/detail/' + item.id">

</router-link>

// router/index.js

{

    path: '/detail/:id',

    name: 'Detail',

    component: Detail

} 

图片底部渐变效果：

background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))

（2）公用图片画廊组件拆分

将画廊组件变成一个公用组件src/common/gallary/Gallary.vue

画廊组件：图片轮播+页码显示

使用swiper插件实现轮播功能，使用swiper插件的 paginationType: 'fraction'，将分页器样式设置为页码。



‘bullets’  圆点（默认）  

‘fraction’  分式   

‘progress’  进度条  

‘custom’ 自定义

创建路径别名，重启服务器。

一开始将gallary显示为隐藏状态，再次显示时计算宽度出现问题，swiper无法正确显示，解决：

data () {

    return {

        showGallary: true,

        swiperOptions: {

            pagination: '.swiper-pagination',

            

            // 将分页器样式设置为页码

            paginationType: 'fraction',

            

            // swiper监听到此元素或父级元素发生DOM变化时，就会自动刷新一次，解决宽度计算问题。

            observeParents:true,

            observer:true,

            

            loop:true,

            autoplay: false

        }

    }

}

（3）实现header渐隐渐现效果

methods: {

    handleScroll () {

        // 获取当前页面的滚动条纵坐标位置

        const top = document.documentElement.scrollTop;

        // top > 60 时开始逐渐显示header，top > 40 时一直显示header

        if (top > 60){

            const opacity = top / 140;

            opacity > 1 ? 1 : opacity;

            this.opacityStyle = {

                opacity

            };

            this.showAbs = false;

        }

        else{

            this.showAbs = true

        }

    }

},

activated () {

    window.addEventListener('scroll', this.handleScroll)

},

（4）对全局事件的解绑（window对象）

// 页面即将被隐藏时执行

deactivated () {

    window.removeEventListener('scroll', this.handleScroll)

}

（5）使用递归组件实现详情页列表

（6）使用Ajax获取动态数据

获得动态路由参数（id）并将其传递给后端、

getDetailInfo () {

    axios.get('/api/detail.json',{

        params: {

            id: this.lastRouteId

        }

    }).then(this.handleGetDetailInfoSucc)

}

（7）组件跳转时页面定位

scrollBehavior (to, from, savedPosition) {

    return { x: 0, y: 0 }

}

（8）在项目中加入基础动画

在点击画廊组件时增加渐隐渐现的动画效果

//FadeAnimation.vue



<template>

    <transition>

        <slot></slot>

    </transition>   

</template>

<script>

export default{

    name: "FadeAnimation"

}

</script>

<style lang="stylus" scoped>

    @import '~styles/varibles.styl'

    .v-enter, .v-leave-to

        opacity: 0

    .v-enter-active, .v-leave-active

        transition: opacity .5s 

</style>

common-gallary 作为插槽插入到fade-animation中：

<!--Banner.vue-->



<fade-animation>

    <common-gallary 

        :imgs="bannerImgs" 

        v-show="showGallary" 

        @close="handleGallaryClose"

    >

    </common-gallary>   

</fade-animation>

二、优化

• 网速慢时图片没有加载出来造成的抖动（使用padding-bottom占位）


• 重复代码封装：借助stylus提供的mixin对代码进行封装


• 节流：触摸滑动字母表&搜索框中输入


• keep-alive


• 对全局事件解绑

俗话说：“工欲善其事，必先利其器”。想要高效的编写代码，自然要先熟练的使用一款工具。

vscode设置简体中文

使用国外的工具，头等大事自然是必不可少的汉化。

vscode实用插件

选择vscode的原因，除了它的轻量之外，自然少不了它丰富的插件库。

1. Auto Rename Tag

自动修改匹配的html标签。在修改标签的时候，是不是需要修改完开始标签之后还需要修改结束标签。安装Auto Rename Tag，以后只需要修改一个标签就可以了，四舍五入就等于减少一半工作量啊。

2. Prettier

代码格式化插件，一键格式化代码，也可以设置保存自动格式化。我会将我的配置放在文章末尾。

3. code runner

可以直接js文件，在控制台输出结果。在写一些小算法的时候再也不用频繁刷新页面打印了。

4. Turbo Console Log

快捷添加 console.log，一键 注释、启用、删除 所有 console.log。调试js时候大概都会用console.log，每次手敲都很麻烦。

ctrl + alt + l 选中变量之后，生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

注意，只能注释、启用、删除ctrl + alt + l生成的console.log。如果有小伙伴安装了印象笔记，ctrl + alt + l和印象笔记是冲突的。

5. css-auto-prefix

自动添加 CSS 私有前缀。
比如写完transform样式，会自动添加-webkit-、-moz-等样式。

配置

接下来便是无处不在的配置了，将我的配置贴出来，供大家参考。

文件->首选项->设置->工作台->设置编辑器，将editor的ui改为json，将配置直接粘贴进去

{

    "eslint.enable": true,

    "eslint.run": "onType",

    "eslint.options": {

        "extensions": [

            ".js",

            ".vue",

            ".jsx",

            ".tsx"

        ]

    },

    "editor.codeActionsOnSave": {

        "source.fixAll.eslint": true

    },

    "workbench.iconTheme": "material-icon-theme",

    "workbench.colorTheme": "Monokai",

    "[vue]": {

        "editor.defaultFormatter": "esbenp.prettier-vscode"

    },

    "[json]": {

        "editor.defaultFormatter": "esbenp.prettier-vscode"

    },

    "workbench.settings.editor": "json",

    "editor.tabSize": 2,

    //失去焦点后自动保存

    "files.autoSave": "onFocusChange",

    // #值设置为true时，每次保存的时候自动格式化；

    "editor.formatOnSave": true,

    // 在使用搜索功能时，将这些文件夹/文件排除在外

    "search.exclude": {

        "**/node_modules": true,

        "**/bower_components": true,

        "**/target": true,

        "**/logs": true,

    },

    // #让vue中的js按"prettier"格式进行格式化

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "vetur.format.defaultFormatter.js": "prettier",

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            // #vue组件中html代码格式化样式

            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样

            "wrap_line_length": 200,

            "end_with_newline": false,

            "semi": false,

            "singleQuote": true

        },

        "prettier": {

            "semi": false,

            "singleQuote": true

        }

    },

    "[jsonc]": {

        "editor.defaultFormatter": "vscode.json-language-features"

    }

}