![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 50
Einstellung
这个作者很懒,什么都没留下…
展开
-
HTML语义化
语义化的意义在HTML中各个标签是有特定语义含义的,正是因为这些语义信息,浏览器才能正确解析HTML内容。如果没有按照正确的语义信息去写HTML代码,虽然整个网页还是可以加载,但可能会导致异常解析。我们举个例子:<!DOCTYPE HTML><html lang="en-GB"> <head> <title> Demonstration </title> </head> <body> <table>原创 2021-06-30 21:16:38 · 367 阅读 · 0 评论 -
css实现一侧开口三角形
简单画了一个示意图,在css中我们经常可以需要用到这样的对话框。下面是演示代码: <div class="demo"> <a href class="button">我是按钮</a> </div> <div class="triangle"></div> .button { display: inline-block; line-height: 36px; pad.原创 2021-05-27 10:23:08 · 408 阅读 · 0 评论 -
CSS实现三道杠
样式大致如下:html代码如下:<i class="icon-menu"></i>css如下:.icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor;原创 2021-05-25 16:27:38 · 820 阅读 · 0 评论 -
HTTP/1问题和HTTP/2解决思路
古老的HTTP/1HTTP起源于1991年发明的HTTP/0.9。该协议最初是为一个更简单的电子文档Web而设计的,只能使用单一方法(GET)。这些用HTML编写的文档能够通过锚点标签链接到其他文档。HTTP/0.9协议能够很好的实现这一目标。随着时间的推移,人们添加了两个具有额外功能和方法(例如提交表单数据的POST)的HTTP新实现。其版本号是v1.0好v1.1,他们在1996年标准化,从那时起,HTTP/1就成了Web的主力军。然而接下来,随着Web技术的演进,Web从提供简单的HTML文档转变原创 2021-04-30 11:47:56 · 3453 阅读 · 0 评论 -
性能优化:实现动画效果优先考虑css的transition
在实现页面动画时候,相比于使用js,使用css实现动画效果无疑开销要少很多。因此,推荐优先应该尽可能使用css来实现动画效果。这里面最常用的就是transition属性了。下面举一个例子:.box { width: 128px; height: 128px; background-color: #c40a0a; transition: border-radius 2s ease-out;}.box:hover { border-radius: 50%;}应用这段css,当用户悬停在.原创 2021-04-29 19:50:25 · 322 阅读 · 0 评论 -
React简单表单最佳实践
从一个简单表单谈起假设我们要做一个表单,比如是这样,要怎么做?你可能会这样写:firstName对应一个键盘记录,lastName对应一个键盘记录:import React from 'react'class Uncontrolled extends React.Component { constructor(props) { super(props) this.state = { firstName: '', lastName: '',原创 2021-04-28 18:42:00 · 371 阅读 · 3 评论 -
React兄弟组件之间通信
兄弟组件之间通信React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件。那么如果想要两个子兄弟组件通信该怎么办呢?答案是可以通过子组件向父组件推送信息或者触发事件,然后父组件的状态会发生更新。传递到子组件的数据也会发生更改。这样两个兄弟组件就可以通过公有父组件实现通信。让我们来去举一个具体例子,我们有一个counter组件来实现计数功能,样式大致是这样的:公有父组件可以写成这样:import React from 'react'import原创 2021-04-28 16:23:32 · 2126 阅读 · 0 评论 -
CSS几行代码快速实现轮播图
代码实现相比于网上使用较为复杂的方案实现轮播图,本文使用css的Scroll Snap可以用更少的代码来实现轮播图效果。具体而言,主要使用两个css代码,分别是scroll-snap-type和scroll-snap-align。前者用于确定轮播图吸附轴向,后者用于确定轮播图是初始吸附还是中间吸附还是后面吸附。下面是HTML代码: <div class="box"> <div class="box_item box_item--bg1"></div>原创 2021-04-22 18:01:53 · 669 阅读 · 0 评论 -
用background渐变画斜线
写的CSS样式举例如下:.test { height: 90px; background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%); /* background-size: 30px 30px; */}实现的效果会是在居中的位置画一条绿色的斜杠。这段代码的意思是在135度的位置,从0到4原创 2021-04-20 16:09:17 · 469 阅读 · 0 评论 -
css根据文字长度实现宽度自适应
根据文字长度,自适应width大小width: fit-content原创 2021-04-18 22:06:38 · 14421 阅读 · 0 评论 -
用Hook的方式实现防抖
需要进行页面防抖是前端编程时经常遇到的问题了。如果不太了解什么是防抖的话,可以参考浅谈 JS 防抖和节流。这篇文章,我们分别用传统方式来实现防抖和用Hook方式实现防抖。传统方式const debounce = (func, delay) => { let timeout return () => { if (timeout) { clearTimeout(timeout) } timeout = setTimeout(function() {原创 2021-04-10 11:19:06 · 738 阅读 · 0 评论 -
前端异步请求数据未获取导致报错解决办法
我们在编写前端程序的时候,往往需要异步请求后端数据,然后拿着得到的数据重现渲染页面。有的时候,数据还没有获取到,这个时候会是undefined形式。比如说,let test = "123",但是后端还没有传回来数据的话,会是test=undefined,如果test里面还有属性的话,比如获取test.name就会直接报错。对于这样的问题,可以写成这样:test?.name || "哈哈"这个?可以保证即使后面有属性但是没有值也是返回的是undefined,而不会报错。如果前面是undefined的话,原创 2021-04-09 13:28:34 · 1538 阅读 · 0 评论 -
React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件。但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实例的思想考虑问题,忘记了函数有用完即销毁(特别是纯函数)这样的特点,导致在使用React Hook的时候可能会出一些问题。下面的内容就来记录一下,使用React Hook的新手可能会遇到的一些问题。Hook使用原则首先要强调一下Hook的使用原则,可以参考我之前写的文章:如何使用React Hook最后的原创 2021-03-22 22:43:16 · 704 阅读 · 0 评论 -
如何使用React Hook
class组件和函数组件我们希望编写代码的时候,尽可能将整块可复用的部分封装起来。这样可以一定程度提高代码的内聚性,将其耦合性,使得程序开发变得更加可维护。通常情况下,我们将代码块抽离成组件来实现封装。在React中,实现组件封装有两种方式,分别是通过class方式以及函数组件方式。class方式:class List extends React.Component { constructor(props) { super(props) } render() {原创 2021-03-13 17:12:39 · 233 阅读 · 0 评论 -
CSS设置样式时,鼠标移动到div上,发生抖动问题解决办法
出现抖动现象背后的原因比如你可能会遇到这样的场景,就是有一个div块,当鼠标悬浮的时候,需要添加一个border(比如多个div块以卡片的形式排列起来)。你可能会考虑写成这样的CSS:div:hover {border: 1px solid blue}但是这样写会导致一个问题,就是div块之间比如说间距是3px,这时候加了一个border,间距可能会变成4px。div块之间间距突然拉大(比如说那种多个卡片场景),从视觉上来看就好像页面的div块间发生了抖动。你可能会考虑使用box-sizing:原创 2021-03-11 14:20:13 · 3374 阅读 · 1 评论 -
CSS实现图片居中且缩放不影响图片纵横比
实现代码我们在编写页面代码的时候往往会需要添加图片。在使用过程中,获取的图片尺寸经常可能和页面需要的尺寸不一致,这时候就需要对获取图片进行缩放。对图片缩放有一定技巧,或者说是固定的编写代码套路。否则可能稍有不慎,就会导致图片被拉伸,失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。建议首先看一下这篇文章,使得基线位置和中线位置保持一致:图片垂直居中下面是代码:<!DOCTYPE html><html> <head> <原创 2021-03-09 18:30:10 · 4368 阅读 · 0 评论 -
用CSS写出一个下拉菜单小箭头
向右小箭头width: 13px;height: 13px;border: 1px solid #0F1520;border-top: none;border-left: none;transform: rotate(-45deg);原创 2021-03-09 11:01:18 · 1655 阅读 · 0 评论 -
React中使用setState
不要直接修改 Statestate数据不能直接修改,必须要通过setState来修改。但是设置值的时候不能影响到之前state的值,举个栗子:// 处理数组,不会改变原有数组this.setState({ list1: this.state.list1.concat(100), // 追加 list2: [...this.state.list2, 100], // 追加 list3: this.state.list3.slice(0, 3), // 截取 list4:原创 2021-03-09 10:38:22 · 277 阅读 · 0 评论 -
JavaScript观察者模式
观察者模式又称为发布-订阅模式,它定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都将得到通知。观察者模式一个非常常见的例子就是DOM节点上的事件绑定。当body对象被点击时,body节点就会向订阅者发布这个消息。document.body.addEventListener('click', function() { alert(2)}, false)document.body.click()观察者模式示例代码...原创 2020-12-26 23:00:52 · 179 阅读 · 1 评论 -
JavaScript代理模式
代理模式举例首先可以看一下代理模式局的一个例子:class RealImg { constructor(fileName) { this.fileName = fileName // 模拟从硬盘初始化加载 this.loadFromDisk() } display() { console.log('display...' + this.fileName) } loadFromDisk() { console.log('loading...'原创 2020-12-26 20:18:25 · 179 阅读 · 1 评论 -
适配器模式、代理模式、装饰器模式使用场景区别
适配器模式适配器模式是提供和原先接口不一样的接口,做一个二次转换,原来的接口还是可以继续使用的。代理模式原先的接口是不能访问的(无权使用),只能通过代理来去访问原先接口。代理过程中可能会对原有接口功能做一定程度改造。装饰器模式用于功能扩展,原有的功能不变还可以继续使用。...原创 2020-12-26 18:07:57 · 468 阅读 · 0 评论 -
JavaScript装饰器模式
适配器模式是原来的接口就不能用了,需要做一个适配之后才能继续使用。装饰器是原先接口还能用,在此基础上添加一些新功能。(为对象添加新功能,并且不改变原有结构和功能)原创 2020-12-26 16:33:22 · 294 阅读 · 1 评论 -
从JavaScript单例模式到Vuex中store
导言:如果你像我一样也是JavaScript的初学者并且希望更深一步理解Vue框架背后的设计思想的话,那么这篇文章或许会适合你。单例模式单例模式的定义是:保证一个类仅有一个实例,并提供一个访问他的全局方法。什么是单例模式呢,简单来说就是一个类只能创建一个实例,即使你创建了很多的实例,但如果通过===比较的话,你会发现,这些实例全部都是相等的。那这有什么用呢?比如我们拿微信举例子,通常情况下无论是手机端还是PC端,你都只能登陆一个微信账号。而且你也只能打开一个微信登录界面,没有办法打开多个。.原创 2020-12-19 22:56:43 · 1020 阅读 · 1 评论 -
JavaScript为什么使用原型模式而不是类模式
当当当原创 2020-12-04 13:04:20 · 603 阅读 · 1 评论 -
从Proxy到Vue3数据绑定
Proxy原创 2020-12-02 23:13:11 · 2638 阅读 · 1 评论 -
问题解决:vue dev模式没问题,dist之后页面not found
导读: 本菜鸡作为一个JavaScript的初学者,搞了一个Vue页面之后想将其在生产环境中部署。但是dist之后发现生成的静态页面只有首页访问正常,其余页面全部都是Not Found,百思不得其解。经过调查解决了问题。将自己学习和思考过程记录下来,供后来的人一个参考。SPA单页谈起要想解决dist之后 not found问题,首先要理解Vue的SPA单页特性,首先来看一下SPA定义:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用..原创 2020-11-29 11:11:49 · 1083 阅读 · 0 评论 -
从Vuex的Actions中理解JavaScript的解构赋值
大原创 2020-11-16 11:29:52 · 870 阅读 · 0 评论 -
如何理解JavaScript多个连续箭头函数书写方式
导言: 本菜鸡在学习Vue编程的时候,看到有大佬写的代码用了多个连续箭头函数,完全不能理解是什么意思。经过多方调查和思考才初步理解。本篇文章记录一下自己学习和理解的心得。有多个箭头函数的代码如何执行我拿一个很普通的函数来举例子,比如下面代码:function sum (a, b) { return a + b;}或者是这样:let sum = function (a, b) { a + b } 如果要写成箭头函数可以写成这样:let sum = (a, b) => a ..原创 2020-11-15 15:45:19 · 2271 阅读 · 1 评论 -
写给初学者的JavaScript异步编程和背后思想
参考资料[1] JavaScript异步编程[2] 说一说javascript的异步编程[3] 最后谈一次 JavaScript 异步编程[4] 线程进程 |两个简单例子告诉你什么是进程和线程 | 进程线程原来如此简单[5] 事件循环[6] 并发与并行的区别是什么?...原创 2020-11-14 20:58:15 · 313 阅读 · 0 评论 -
详解JavaScript中ES5和ES6的类、继承之间区别和联系
导读: 很多JavaScript的初学者(比如说我)在刚开始学习这门语言的时候,往往会对函数、对象、类、继承这些概念感到迷茫和疑惑,感觉他们彼此之间长得十分相似,这就导致很难分清他们什么时候该怎么用。特别是JavaScript中有了原型这个概念之后,就觉得更加混乱了。本篇文章我就从一个初学者的角度身份来去梳理一下这些概念和用法之间的区别与联系,力图能让同样是初学者的你很好的分清这些概念之间的用法。ES5中类、对象和原型ES5没有真正定义类的关键字,它通过函数首字母大写的方式来告诉别人这是一个类,..原创 2020-10-31 15:33:55 · 1819 阅读 · 3 评论 -
通俗易懂讲解JavaScript深拷贝和浅拷贝
基本类型和引用类型在开始讲解JavaScript的深拷贝和浅拷贝之前,先要认识JavaScript的两种基本数据类型。一种是基本类型(值类型),另外一种是引用类型。其中基本类型包括undefined、null、number、string和boolean,这几种类型在内存中都有固定的大小和空间。引用类型包括object,这种值的大小不固定,可以动态添加属性和方法,而基本类型则不可以。基本类型的值保存在内存中的栈中,而引用数据类型的值保存在内存中的堆中,在栈内存中保存着指向堆内存的指针。如果此时你对栈或者堆原创 2020-10-30 16:13:37 · 1711 阅读 · 3 评论 -
一劳永逸解决npm安装速度慢的问题
先在控制台中使用如下命令进行设置,将镜像切换成淘宝镜像,这个命令会将其持久使用。npm config set registry https://registry.npm.taobao.org接下来我们可以使用如下命令进行验证npm config get registry原创 2020-10-26 19:18:49 · 651 阅读 · 0 评论 -
JavaScript绑定键盘事件的多种写法
使用JavaScript来绑定键盘事件时,有多种写法,而他们的实现效果实际上是等价的,下面一一来列举。方式一:function keyboard() { document.onkeydown = function() { let keycode = event.keyCode; if (keycode == 32) { alert("空格键被按下了"); } }}keyboard();随后我们执行这个函数,就可以实现键盘事件绑定。代码中的event是原创 2020-10-18 16:49:50 · 7842 阅读 · 3 评论