web前端大类
文章平均质量分 69
那一日面朝大海
好久不见 -q1367156312
展开
-
javaScript遍历对象、数组总结温故
【代码】javaScript遍历对象、数组总结温故。原创 2024-02-28 13:46:45 · 199 阅读 · 0 评论 -
常用提升效率的JS简写技巧
正文简写技巧当同时声明多个变量时,可简写成一行//Longhandlet x;let y = 20; //Shorthandlet x, y = 20;复制代码利用解构,可为多个变量同时赋值//Longhandlet a, b, c;a = 5;b = 8;c = 12;//Shorthandlet [a, b, c] = [5, 8, 12];复制代码巧用三元运算符简化if else//Longhand let marks = 26; l转载 2021-12-15 17:00:58 · 282 阅读 · 0 评论 -
21最新获取url参数的方法
使用正则表达式获取url温故而知新,先上一下我们常规使用正则表达式去获取url参数的代码function getParams(url, params){ var res = new RegExp("(?:&|/?)" + params + "=([^&$]+)").exec(url); return res ? res[1] : '';}// url: xx.com?id=2&isShare=trueconst id = getParams(原创 2021-11-15 17:30:37 · 344 阅读 · 0 评论 -
酷炫的CSS MASK
本文将介绍 CSS 中一个非常有意思的属性 mask 。顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。其实 mask 的出现已经有一段时间了,只是没有特别多实用的场景,在实战中使用的非常少,本文将罗列一些使用 mask 创造出来的有意思的场景。语法最基本,使用 mask 的方式是借助图片,类似这样: 1 2 3 4 5 {转载 2021-08-12 18:55:11 · 421 阅读 · 0 评论 -
js实现图片懒加载(lazyLoad)的思路
一.什么是懒加载?懒加载突出一个“懒”字,懒就是拖延迟的意思,所以“懒加载”说白了就是延迟加载,比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下,那么懒加载就是优先加载可视区域的内容,其他部分等进入了可视区域在加载。二.为什么要懒加载?懒加载是一种网页性能优化的方式,它能极大的提升用户体验。就比如说图片,图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载出来用户也早就走了。所以,我们需要懒加载,转载 2021-04-20 17:06:32 · 419 阅读 · 0 评论 -
webpack基础配置详解
WebPack是什么定义:WebPack是模块打包工具。原理:分析项目结构,找到JavaScript模块以及其他浏览器不能直接运行的模块(Scss,TypeScript等),转换并打包为浏览器可以识别并运行的格式,让浏览器使用。image.png工作流程:1、通过配置找到给定的入口文件(如index.js)2、从入口文件开始分析并处理项目所有的依赖模块,并递归地构建一个依赖关系图(dependency graph)。webpack把所有的文件都当做模块。* JavaScr..转载 2021-03-29 11:02:15 · 638 阅读 · 0 评论 -
webpack性能优化:提升webpack编译速度
本篇文章主要记录下一次webpack的性能优化现状随着项目不断发展壮大,组件数量开始变得越来越多,项目也开始变得庞大,webpack编译的时间也会越来越久,我们现在的项目编译一次在40s ——70s之间,这是一个效率非常低下的操作。优化的手段有很多,之前项目原本已经做了很多,本文从缓存的角度进行优化讲解以下仅介绍几种缓存相关的优化手段,包括 babel-loader的cacheDirectory cache-loader dll动态链接库 Ha...转载 2021-03-04 09:20:28 · 3466 阅读 · 2 评论 -
jQuery 事件绑定 和 JavaScript 原生事件绑定
jQuery 事件绑定jQuery 中提供了四种事件监听绑定方式,分别是 bind、on,对应的解除监听的函数分别是 unbind、off。bind(event,[data],function)bind 是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下:event:事件类型,如 click、change、mouseover 等data:传入监听函数的参数,通过 event.data 取到。可选function:监听函数,可传入even.转载 2020-12-01 16:39:32 · 523 阅读 · 0 评论 -
2020 前端高频面试题
一:实现一个Vue自定义指令懒加载:Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。创建一个 IntersectionObserver对象,并传入相应参数和回调用函数,该回调函数将会在目标(target)元素和根(root)元素的交集大小超过阈值(threshold)规定的大小时候被执行。varobserver=newIntersectionObserver(callback,options);...原创 2020-09-29 13:26:40 · 302 阅读 · 0 评论 -
VUE组件传值的几种方法
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent/$children、$attrs/$listener..转载 2020-09-08 15:53:23 · 920 阅读 · 0 评论 -
JavaScript - 堆与栈、浅拷贝与深拷贝
堆与栈是什么,与浅拷贝和深拷贝有什么联系?在计算机领域,堆栈是两种数据结构,都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除。深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同,而堆和栈都是内存中划分出来用于存储的区域。栈(stack)为系统自动分配的内存空间,它由系统自动释放;而堆(heap)则是动态分配的内存,大小不定也不会自动释放。ECMAScript 的数据类型因此在了解浅拷贝与深拷贝之前,我们先来了解一下ECMAScript 中的数原创 2020-08-14 09:23:08 · 225 阅读 · 0 评论 -
JavaScript可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的,如Object, Array, Number等,如果你写出这样的代码遍历其中的属性: varnum = newNumber(); for(varpro innum) { ...转载 2020-07-22 13:55:00 · 302 阅读 · 0 评论 -
JS获取页面通过URL传的参数
1.从一个页面通过url将参数传递给另一个页面www.xxx.com/xxx.html?key=value //前面指定要传值的目标地址,value为参数2.js获取url中传递的参数2.1 方法1function getQueryString(name) { var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i")); if (re转载 2020-07-01 15:11:44 · 740 阅读 · 0 评论 -
css文字两行显示,超出显示......
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */overflow: hidden;/...原创 2020-04-15 10:24:53 · 3585 阅读 · 0 评论 -
vue按钮防止重复点击,防重复提交
注册一个全局自定义指令// 提交以后禁用按钮一段时间,防止重复提交Vue.directive('noMoreClick', { inserted(el, binding) { el.addEventListener('click', e => { el.classList.add('is-disabled'); el.disabled = true...原创 2020-04-15 09:57:48 · 3353 阅读 · 3 评论 -
图片下载自定义名字+时间格式化
一:图片完成路径转base64二:base64转成blob文件三:执行下载操作四:格式化时间原创 2020-04-15 09:52:06 · 266 阅读 · 0 评论 -
JS时间戳、日期互相转换
获取当前系统时间戳: // 获取当前系统时间戳 var time = parseInt(new Date().getTime() / 1000);将日期格式转换成时间戳: var date = new Date('2014-04-23 18:55:49:123'); // 有三种方式获取 var time1 = date.getTime(); var time2 = da...原创 2020-04-13 10:51:04 · 314 阅读 · 0 评论 -
总结vue项目 npm装包时-S和-D的区别
1、npm install name -save 简写(npm install name -S) 自动把模块和版本号添加到dependencies。-S后,安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。2、npm install name --save-dev 简写(npm install name -D) 自动把模块和版本号添...原创 2019-12-04 15:32:08 · 1573 阅读 · 0 评论 -
总结js实现对象数组的浅拷贝和深拷贝
深拷贝 VS 浅拷贝深拷贝和浅拷贝都是针对的引用类型,JS中的变量类型分为值类型(基本类型)和引用类型;对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会进行地址的拷贝,最终两个变量指向同一份数据。// 基本类型var a = 1;var b = a;a = 2;console.log(a, b); // 2, 1 ,a b指向不同的数据// 引用类型指向同一份数...原创 2019-11-29 10:35:04 · 762 阅读 · 0 评论 -
总结:http状态码
状态码1xx100 Continue:服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。101 Switching Protocols:服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。102: 由WebDAV(RFC 2518):扩展的状态码,代表处理将被继续执行。状态码2xx:成功200 OK:请求成功(其后是对GET和POST请求的应答...原创 2019-11-20 16:06:19 · 374 阅读 · 0 评论 -
怎么理解VUE,VUE的数据驱动原理是什么,解释MVVM框架
一:Vue是什么,怎么理解VueVue是一个基于MVVM模式数据驱动页面的框架,它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点:(1)简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化vue靠数据驱动双向绑定使我们开发页面更简单,开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定,底层是通...原创 2018-01-30 18:06:55 · 14476 阅读 · 3 评论 -
CSS两栏布局,左边定宽,右边自适应怎么实现?
这是页面布局的一个经典问题,总结下几种可行性的方法。左边布局定好宽度,右边布局实现自适应。方法一:可以用用flex布局,给父容器设置 display:flex;Right部分设置 flex:1 ;left只是之前定好的宽度;布局.left{ width: 300px; height: 200px; background-color: blue;}.b转载 2017-12-29 15:12:04 · 1293 阅读 · 0 评论 -
前端小点心
原创 2018-08-02 15:06:57 · 159 阅读 · 0 评论 -
javascript+css实现瀑布流布局
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>瀑布流</title><link type="text/css" rel="stylesheet" href="./css/reset.css" /><style> ...转载 2019-04-03 18:45:53 · 163 阅读 · 0 评论 -
js数组遍历总结
js中的数组遍历是项目中经常用到的,在这里将几种方法做个对比。for循环:使用频率最高,也是最基本的一种遍历方式。let arr = ['a','b','c','d','e'];for (let i = 0, len = arr.length; i < len; i++) { console.log(i); // 0 1 2 3 4 console....原创 2019-07-12 10:39:02 · 326 阅读 · 0 评论 -
总结js创建对象的几种方式
一、new 操作符 + Object 创建对象var person = new Object(); person.name = "lisi"; person.age = 21; person.family = ["lida","lier","wangwu"]; person.say = function(){ alert(this.name);...原创 2019-10-08 15:26:36 · 160 阅读 · 0 评论 -
较全的正则表达式-匹配中英文、字母和数字等等
在做项目的过程中,使用正则表达式来匹配一段文本中的特定种类字符,是比较常用的一种方式,下面是对常用的正则匹配做了一个归纳整理。1、匹配中文:[\u4e00-\u9fa5]2、英文字母:[a-zA-Z]3、数字:[0-9]4、匹配中文,英文字母和数字及下划线:^[\u4e00-\u9fa5_a-zA-Z0-9]+$同时判断输入长度:[\u4e00-\u9fa5_a-zA-Z0-9_...转载 2019-10-08 15:38:13 · 1819 阅读 · 0 评论 -
vue中使用normalize.css样式重置
Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案(https://necolas.github.io/normalize.css/7.0.0/normalize.css)创造normalize.css有下面这几个目的:保...原创 2019-10-08 15:48:43 · 3365 阅读 · 0 评论 -
如何在页面布局中实现元素水平+垂直居中
页面布局中常常见到需要使一个子元素相对于父元素垂直水平居中,总结几点方法如下:方法一:使用【margin:auto实现绝对定位元素的居中】父元素:position: relative;子元素:div{ width: 200px; height: 200px; background: green;原创 2018-01-30 17:26:14 · 599 阅读 · 0 评论