全沾软贱开发攻城狮

随着互联网技术的飞速发展，前端网页逐渐取代了传统客户端成为用户获取信息、进行交互的重要渠道，但是网页也有常见的弊端，比如网页首屏加载速度的快慢直接影响着用户体验，那么如何提升网页的首屏加载速度，成为了前端开发者必须面对的问题。本文将从多图片懒加载、避免用户多次点击请求以及骨架屏原理等方面，简单分享一下前端优化首屏加载速度的策略优化。欢迎大家在评论区留言交流。

在前端开发中，关于事件相关的操作是非常常见的操作，尤其是实际业务场景中涉及复杂交互的需求。在JS中比较常用的事件有很多，而且涉及不同方式不同类型的点击事件，一般情况下事件会和函数结合使用，这就是事件和函数不分家的原因，即通过发生的事件来驱动函数执行。关于常用事件的使用，本文就来详细分享一下，记录一下，方便后期查阅使用。

通过本文关于前端开发中关于JS中堆和栈的区别的详细介绍，堆和栈的区别及其使用不管是在实际的前端开发工作中还是在前端求职面试中都是非常关键的知识点，所以作为前端开发者来说必须要掌握它相关的内容，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，重要性就不在赘述。欢迎关注，一起交流，共同进步。

前言在前端开发过程中，关于数据处理是非常常见的操作了，尤其是处理一些从后台获取到的数据与设计需求的不一样的时候，这就更需要前端来处理拿到的原始数据了。前端关于处理数据的面很多，本篇博文就来分享一下在前端开发中处理数字相关的知识点，尤其是小数点保留两位小数等这种常见需求，方便后期查阅使用。方法前端JS中关于保留两位小数的处理方法，分为两种：一种是不四舍五入，另一种是四舍五入。如果需要四舍五入就需要用到toFixed()方法，如果不需要四舍五入就直接使用Math.floor()方法。简单

前言在前端开发过程中，对数组的数据进行处理也是比较常见的操作之一，而且对数组进行操作的频率远远大于对 对象进行操作，因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能，尤其是对于刚入行的前端开发者来说尤为重要，所以一定要掌握好相关技能。本篇博文来分享一下关于对数组里面的数据进行筛选的操作，那么就用到了JS中filter()方法使用。filter()方法1、定义filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。2、语法a

在前端开发中，CSS的使用是前端开发的“三驾马车”之一，剩余的其他两个是JS和HTML。有关CSS使用设置页面布局的时候，重中之重的就是关于盒模型的理解以及使用，而且CSS是比较抽象的，没有JS那样有很强的逻辑性，需要掌握的内容比较多、比较散，所以就算是入行开发多年的前端工程师也会觉得CSS不好驾驭。本篇博文就来分享一下关于CSS盒模型相关的知识点，方便查阅使用，如有不妥之处还请大家指正。盒模型概念关于盒模型的概念，比较专业的官方解释是这样说的：所有HTML元素都可看作盒子，在CSS

前言前端开发里面，在JS中关于数据去重操作的使用是非常常用，也是非常重要的点，一般情况下关于对数组去重点操作是最常用的，其次是具体的关于某一数据类型的去重操作，如字符串去重、数字去重等。那么本篇博文就来分享一下去重操作的使用，方便后期查阅使用。核心的基本算法遍历拿到的数据数组，然后把该数组中的元素存放到新的数组中，在存放到新数组之前要检查数组的元素是否已经存在，如果存在（相同元素，即重复元素）就不再放入新的数组中。数据去重的基本用法在JS中关于去重操作的使用一般是关于数组去重

前言在vue中开发中，关于计时器的使用也是比较常见的知识点，如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求，很常见的需求也不复杂，主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法，方便查阅使用，如有问题请指正。使用场景在前端开发中基于移动端的短信验证码发送60s倒计时使用，用户协议阅读30s倒计时提示等等。核心原理主要要处理的是倒计时按钮提示的数字以及倒计时结束之后的提示文字，以及计时器来进行倒计时使用，以及标签层面和js中按钮触

前言在前端开发的时候，会遇到因为引入的文件路径不正确而造成的报错问题，这类问题在前端开发过程中很常见，但是还是会遇到不少坑。那么本文就来分享一个关于在前端开发过程中遇到This relative module was not found 的报错的解决方法。报错提示ERROR Failed to compile with 1 errors ...

前言在前端开发过程中，对于 npm的使用频率非常高。但是有时候在使用npm的时候会遇到一些报错，有些是比较常见的，有些是不常见的，这就需要在实际开发中反复不断的总结提炼才行。npm install初始化项目的时候也是比较容易遇到问题的，尤其是在初次初始化项目的时候，本文就来分享一下关于在npm install初始化项目的时候遇到的报错的解决方法。报错提示通过npm install初始化项目的时候，项目初始化失败，并且在控制台有如下的报错提示：npm ERR! code ENOENT

前言前段时间在开发基于移动端的前端项目的时候，遇到一个使用table的需求，但是基于移动端的Vant框架的组件库里面没有table相关的组件支持，这就需要借助第三方组件来实现基于移动端的table功能。基于移动端的table的第三方组件有一个使用起来比较方便的组件：vue-easytable，该组件从集成到使用也都很简单，但是会遇到一个致命的问题，那就是本文所要分享的内容。关于vue-easytable组件从集成到使用的方法，网上一大把教程，vue-easytable在git上面也有demo，可

前言在前端开发过程中，对于数据的缓存处理这块也是非常重要的操作，缓存数据可以解决很多业务需求，而且在实际开发过程中无处不在的数据缓存操作，常用的需要缓存的操作无所不在，而且本地存储数据也是一种非常常用的需求，实现的方法也很多，作为前端开发都很熟悉的cookie，但是cookie的缺点：读写困难、容量有限的问题也是很明显的，localStorage的功能主要就是用来替代cookie的，那么本文就来分享一下好用的本地存储方法：localStorage的使用。localStorage定义 ..

前言在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript中对数组进行合并，这是一个比较常见的操作，分享出来，提供查阅使用。数组合并在JavaScript中合并两个数组的方法有4种，每一种方法都大同小异，为的就是对两个数

前言在前端开发的时候，对于数据处理是很重要的一块，尤其是要根据实际的业务需求来处理数据，有很强的兼容性要求。而且有些时候后端提供的数据和实际的业务需求数据是有偏差的，所以前端在拿到后台返回的数据之后，需要对数据进行“二次加工”处理，从而来满足业务需求。那么本篇文章就来分享一下在处理数据时候比较重要的一种方式：JavaScript中对数组进行合并之后的去重操作，这是一个比较常见的操作，分享出来，提供查阅使用。JavaScript中数组去重在JavaScript中对数组进行去...

前言在前端开发Vue.js中，关于事件和按键的使用也是比较常见的操作之一，那么与它们相关的事件修饰符和按键修饰符也是延伸的比较常用的操作。那么本篇博文就来分享一下关于Vue.js中事件修饰符和按键修饰符的使用。一、事件修饰符在Vue.js的事件处理程序中使用v-指令中的v-on指令，是用来进行事件绑定的，也可用@来代替。Vue.js也为v-on指令提供了对应的一些事件修饰符，主要是通过由点”.”表示的指令后缀，来调用修饰符。v-on指令常用的修饰符如下所示：.stop — 调用 eve.

前言在前端开发过程中，对数组的数据进行处理也是比较常见的操作之一，而且对数组进行操作的频率远远大于对 对象进行操作，因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能，尤其是对于刚入行的前端开发者来说尤为重要，所以一定要掌握好相关技能。本篇博文来分享一下关于对数组里面的元素进行指定分隔符进行分隔的操作，那么就用到了JS中join()方法使用。join() 方法1、定义join() 方法用于把数组中的所有元素转换一个字符串。2、语法array.join(separ

前言前段时间在做前端开发的过程中遇到一个关于JSON.parse()的使用的报错问题，JSON.parse()通常是用来对JSON对象和字符串之间的相互转换的，所以一般在使用的时候遇到相关报错就是因为在使用的时候没有做相应的非空判断，或者是数据格式错误造成的。那么本文就来分享一下关于使用JSON.parse()进行字符串和JSON对象相互转换的时候遇到的报错问题。报错提示具体的报错信息如下所示：vue.esm.js?efeb:628 [Vue warn]: Error in creat

前言项目为了上基线，把本地项目编译之后的node_modules文件和dist文件都删掉了，然后上完基线之后，重新编译本地项目代码，结果初始化项目失败，提示无法读取未定义的“外部”属性，原因就是上一次编译的项目包没有处理干净造成的报错，那么本篇博文就来分享一下相关的解决方法。报错提示在删除本地项目编译生成的node_modules文件夹，然后重新编译项目：npm install 然后项目报错，报错信息如下所示：admin@MacBook-Pro Project % npm instal

前言在前端开发过程中，对于JSON的处理使用的场景是比较多的，也是比较常见的需求。JSON 是用于存储和传输数据的格式，JSON 通常用于服务端向网页传递数据，而且它是一种轻量级的数据交换格式。尤其是在JS开发相关的时候，将JSON 数据转换为 JavaScript 对象是非常常见的处理方式。那么本文就来分享一下前端对于JSON处理的常用方法JSON.stringify()和JSON.parse() 的使用总结。功能介绍1、JSON.stringify()JSON.stringify

前言在前端开发的时候，处理数据、传递数据是非常常用的操作方式，也是前端开发工作中非常重要的部分。尤其是在前端开发过程中的组件之间的数据传递，是必用操作。那么本篇博文就来分享一下在前端开发的时候，对于在使用组件的时候进行数据传递处理的操作使用。首先来了解一下在前端Vue开发过程中常用的组件之间的传值场景，有三种：父组件传值到子组件、子组件传值到父组件、兄弟组件之间的传值。其他延伸的组件之间的传值场景：孙子组件传值给爷爷组件、祖父组件传值给曾孙组件等等隔代关系传值，这些跨三级以上的组件的传值延伸情景

前言在前端开发过程中，对数组的迭代处理也是比较常见的使用操作。在JavaScript数组中迭代方法常用的有两种：every()和some()，这两个函数都是在JS中对数组进行迭代操作的。那么接下来就来详细对比一下every()和some()的使用。一、every()1.1、every语法基本语法：arr.every(callback(element[, index[, array]])[, thisArg]);参数介绍：1.2、every定义every() 方法用于检测一

导读Vue项目报错Unknown custom element:XXX - did you register the component correctly…的解决方法。问题前段时间在做前端项目的时候，遇到了一个关于饿了么框架的报错问题，具体报错信息如下所示：[Vue warn]: Unknown custom element: <table-page> - did you register the component correctly? For recursive c.

做过前端开发的都知道，JavaScript是单线程语言，浏览器只分配给JS一个主线程，用来执行任务，但是每次一次只能执行一个任务，这些任务形成一个任务队列排队等候执行；但是某些任务是比较耗时的，如网络请求，事件的监听，以及定时器，如果让这些非常耗时的任务一一排队等候执行，那么程序执行效率会非常的低，甚至会导致页面假死。因此，浏览器为这些耗时的任务开辟了新的线程，主要包括http请求线程、浏览器事件触发线程、浏览器定时触发器，但是这些任务都是异步的，这就涉及到了前端开发的异步回调操作处理

做过前端开发的开发者应该都知道JavaScript是单线程语言，浏览器只分配给JS一个主线程，用来执行任务，但是每次一次只能执行一个任务，这些任务形成一个任务队列排队等候执行；但是某些任务是比较耗时的，如网络请求，事件的监听，以及定时器，如果让这些非常耗时的任务一一排队等候执行，那么程序执行效率会非常的低，甚至会导致页面假死。因此，浏览器为这些耗时的任务开辟了新的线程，主要包括http请求线程、浏览器事件触发线程、浏览器定时触发器，但是这些任务都是异步的，这就涉及到了前端开发的异步回调操作处理。...

接着三掌柜的上一篇关于Promise的使用的博文来继续讲，前端处理异步回调操作用到的方法之一：Async/Await。可以说Async/Await是Promise的升级版，而且应用了Async/Await的异步请求的情况下，可以让代码看起来像同步方式调用解决异步回调。在ES7之前，了解到Promise是ES6为了解决异步回调而产生的解决方案，避免出现回调地狱(Callback Hell)，那么ES7为什么又提出了新的Async/Await标准？问题答案就是：Promise虽然解决了异步嵌套的怪圈，使用.

前言前端开发的时候，在项目中引入组件以及使用是非常常见操作，但是有时候会遇到一些引入的方式不对或者其他原因造成的使用问题、引起报错等问题，尤其是对于刚入行不久的萌新来说更是要留意，本篇文章就来分享一下在Vue项目中全局引入组件的方式，以及组件在具体地方使用的方法。本文以在Vue项目中的Vant组件下的Toast提示框的引入以及使用为例，Vant官方文档讲解有些不清楚，在这里进行了更进一步的讲解，方便不清楚的开发者使用，知识点不复杂，但是对于不熟悉的人来说还是会遇到一些小麻烦，废话不多说，具体内.

在前端开发过程中，有时候会需要获取当前时间和已知时间做对比的需求，也有单纯的获取当前时间然后传给后台，还有各种需要把获取到的当前时间转化成特定的时间格式传给后台，这虽然不是一个复杂的操作，但是不同的产品需求不一样，有时候还需要转时区。总之，就是各种稀奇古怪的需求，那么本篇博文就来分享一下关于在前端开发过程中获取当前时间或者日期相关的各种操作。首先来了解一下获取当前日期和时间的原理：JS通过Date对象来获取当前日期和时间，通过使用Date()方法来获取系统当前时间，定义和用法如下所示：...

在前端开发的时候，经常会遇到处理时间日期的需求，有时候会需要根据实际情况来对获取到的时间日期做处理，不同的开发者有不同的编码风格，也有不同的选择方式，其实对时间日期的处理（过滤）有很多种方法，有通过第三方日期格式化插件来处理的，有自己写原生JS方法来实现的。通过插件来实现日期格式化处理，只用在项目里面引入插件之后，直接通过插件的调用方法直接处理时间过滤的需求，这种方式可以简化代码，提高代码整洁度。但是，通过原生JS来实现时间过滤也是一种不错的方式，只用把时间过滤的方法封装成公用方法，然后全局调用即可，这也是

在前端开发过程中会遇到各种各样的数据处理需求，开发者会根据不同的业务需求来实现对应的业务功能，但是数据格式是固定不变的，那么在遇到一些数据不是想要的数据怎么办呢？那就需要开发者对获取到的特定数据进行二次处理，一些简单的处理直接通过数据转换类型或者拼接即可实现，再复杂一点的数据就涉及到算法来处理。本篇博文就来分享一下不涉及算法的单纯的对数据存取值的处理方法，案例以实际开发过程中的需要来说明：是以获取到的数据源中的数组中取出某一字段元素，然后拼接取出的数组元素，最后赋值给一个string对象。<

在前端开发过程中，搜索功能是比较常见的功能，也是在项目开发过程中比较常见的需求。搜索框功能常用的几种需求也都是大同小异，但是实用的搜索框可以作为一个例子来写是很有必要的，那么本篇博文就来分享一下前端开发的具有联想功能的自定义搜索框。带联想功能的搜索框的具体实现步骤也不复杂，主要是逻辑处理那块要小心，本案例以搜索员工信息的需求来做说明，具体操作如下所示：<template><div class="information-content"> <div ...

在前端开发的时候，启动运行Vue项目的时候：npm run dev或者 npm run start 或者yarn examples:start，遇到ValidationError：webpack Dev Server Invalid Options报错的提示，报错信息如下所示：Cheng$ npm run start> tenant@0.1.0 start /Users/Cheng/hnant> vue-cli-service serveINFO Starting dev..

在前端开发的时候，路由跳转是非常经典的知识点之一，对于刚入门的开发者来说，可能会一知半解，那么本篇博文就来分享一下前端开发过程中路由跳转的使用，以及在路由跳转中可能会遇到的问题和注意事项，该知识点比较基础，技术大牛就不要进来看了，只分享给有需要的人。先来分享路由实现页面跳转的方式：方法一：通过JS实现页面跳转，方法二：通过<router-link>实现页面跳转。方法一：通过JS实现页面跳转的方法1、首先在template模块里面实现需要跳转的地方，如:<button cla

前段时间在开发项目的时候，遇到一个比较稀奇古怪的跨域问题，不管怎么写就是解决不了，后来通过Chrome浏览器的设置，解决了跨域问题，这样就不需要在项目里通过设置代理来解决跨域问题，直接通过设置修改Chrome浏览器的设置就可以解决项目跨域问题。具体的跨域问题如下所示：Access to XMLHttpRequest at 'https://weixin.xxx.com/ems/login' (redirected from 'http://localhost:8081/xxx/queryBalance'

分享一个去年遇到的问题，作为总结性的来分享一下，方便有需要的人查看使用，具体操作是这样的：更新了依赖，更新完之后，运行npm：命令行：npm install然后提示如下信息：35 packages are looking for fundingrun `npm fund` for detailsfound 18 vulnerabilities (3 low, 9 moderate, 6 high)run `npm audit fix` to fix them, or `np.

前几天在开发项目的时候遇到一个报错提示，然后具体报错提示如下所示：vue.runtime.esm.js?a593:619 [Vue warn]: Property "visible" must be accessed with "$data.visible" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals. See

前段时间在开发项目的时候，有一个业务需求是上传图片，之前做移动端开发的时候上传图片也是非常基本的需求，但是对于前端开发来说需要研究一下怎么实现的。我们的项目用的是Vant组件，然后我就直接去Vant的组件官网查看上传文件的使用方法，然后直接看着官网API教程使用即可，如果有什么疑问还可以问度娘、问朋友。废话不多说，接下来就来分享一下具体的上传图片方法，具体步骤如下所示：1、引入首先要在项目中引入这个Uploader组件，打开项目工程，找到main.js文件，然后复制以下代码粘贴进去即可：im

最近在Vue项目开发的过程中遇到一个问题，那就是在点击同一个路由操作的时候，控制台会报一下错误提示：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/Refund".经过排查之后才发现是关于Vue中路由重复引起的错误，经过查找资料以及搜索相关知识，该报错原因是因为ElementUI导航栏里面的vue-router在3.0以上版本重复点击菜单引起的路由重复报

在前端开发过程中会遇到各种坑，尤其是对于新入行的前端新手来说更是如此，稍有不慎就会掉入连环坑中。作为前端入门级开发者来说，各种基础问题都能让在开发过程中引起卡壳情况，那么本篇博文就来分享一下前端开发新手常遇到的经典问题，由node版本不一致造成的程序报错问题。由Node版本引起的报错问题也是很常见，尤其是电脑上安装的高版本Node，要运行低版本开发的项目，就会报错，这就涉及到Node版本的升级和降级。Node降低版本或者升级版本，使用nvm来管理Node版本，nvm的安装在前几篇博文里面已经有详细讲解，

在前端开发过程中，尤其是对于经验不足的初级开发者来说，需要掌握一些必备的提升开发速度的技巧，比如使用各种插件来提升开发速度，这样才能事半功倍。本篇博文来分享一个开发常用的技巧，资深开发者不屑于知道的技巧，但是对于不知道的开发者来说还是非常重要的一个技巧，不卖关子了，接下来分享一个关于VS Code编辑器进行前端开发的时候，新建空白的Vue文件之后，在里面创建自定义模板的方法，这样可以节省开发效率，也可以省去不必要的复制粘贴操作。尤其是在Vue开发过程中，不断新建.Vue文件是少不了的操作，但是每次新建的

在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach() 的使用。forEach() 是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。在Vue项目中，标签里的循环使用v-for，方法里面的循环使用forEach。1、f