流萤梦的博客

实现阴影，先来了解一下box-shadow这个属性。box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。好了，准备工作都做好了，那就直接进入主题吧。

简单说一下背景，就是需要实现一个展开收起的按钮。那我第一个想到的方法，可不就是border自己画嘛。

最近项目重构，其中有个模块涉及到的交互全改了，跟css挂钩的点很多，这里简单做个记录。要实现圆首先得知道这个属性，引用MDN上的解释：CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。简单来说就是边框的四个角是由这个属性控制的。效果如下：当然，这四个边的圆角也可以自由组合设置，这里就不一一举例了。

可以看到，case 1 和case 2 中定义的字段，理论上应该是互不影响的，但由于作用域的提升，case1 会影响到 case 2。下面是官方文档上的示例：（不正确的写法就是去掉花括号，这里就不贴出来了）

OK，后续遇到其他场景再来补充。

好了，我们再考虑另一种场景，如果我obj对象里的属性很多，我很多地方都会用到obj对象里的key，总不能一个个都是keyof或者keyof typeof一下吧，有没有更好一点的方案呢？可以看到，这两种方式，极其相似，这里为什么不用typeof，是因为Person是我们定义的类型，而不是对象，两种方式得到的结果都是一样的。如果我想给obj新增一个属性呢？该报错一般出现在使用对象获取值的场景。

document.querySelector方法的返回结果是Element或者null，所以我们使用HTMLElement或者null没有问题，那如果是一个类似数组的对象呢？

出现这个报错的原因，是因为我们的props中并没有定义children类型，在PersonProps中加上该类型即可。除此之外，也可以通过ReactFunctionComponent泛型接口，props默认定义为{}如果我们的子组件不需要传递给Person组件，则无需定义children，因为不会用到。最近，在做项目模块的迁移，新项目需要使用ts，遇到的问题有点多，记录一下。OK，本文到此结束，如有不足，欢迎大家多多指正呀！

文件第一次上传后，修改文件内容后，不刷新页面，再次上传该文件，就出现如下图所示的错误。（刷新页面可以正常上传，换成另一个文件也可正常上传）前后两次的文件名并没有发生改变，没有触发input的onchange的事件。在接口回调里将input的value置空即可。当然，如果有其他方法，也可在评论区留言哦！

元素水平垂直居中的场景很常见，常用的方法如下：（以下方法在chorme测试可行）

从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除。如果指定容器上没有对应已挂载的组件，这个函数什么也不会做。如果组件被移除将会返回 true，如果没有组件可被移除将会返回 false。很明显，卸载不成功。这也是我踩坑的地方，如果想要插入的元素也被卸载掉，可以插入到。但这不重要，项目目前的版本我也升不上去（历史原因）。没想到，这两天还在这里栽了跟头，头大。的节点中，不要直接插入到根节点。，点击卸载组件按钮之后，不见了，说明卸载成功了。的时候，会被卸载掉吗？...

原生js实现的复制功能简直比插件好用太多（仅代表个人观点），代码也是简简单单几行，轻松搞定。业务场景：点击按钮，将文案复制到粘贴板具体代码如下：const copyToClipboard = (value) => { const textarea = document.createElement('textarea'); textarea.value = value; document.body.appendChild(textarea); textarea.sele

看到这篇文章就知道，我已经踩坑了，hhh，分享一下解决方案：text-align的属性，它控制的是行内内容如何相对它的父级元素对齐。关于text-align的其他取值这里就不再赘述了，主要说一下两端对齐的justify。需要注意的是text-align: justify对最后一行无效！！！既然是最后一行不生效，那解决方案很显然也是从最后一行入手咯！这里先放一个简单的例子：<div> <span>这是一个测试例子这是一个测试例子这是一个测试例子这是一个

闭包的定义何为闭包？引用MDN里的定义：函数与对其状态即词法环境（lexical environment）的引用共同构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在JavaScript，函数在每次创建时生成闭包。简单的讲，闭包就是能够读取其他函数内部变量的函数。在讲闭包之前，我们需要知道以下的一些概念：作用域作用域作用域无非分为两种：...

关于clipboard的复制功能及使用方法，相信大家并不陌生，难的是如何解决首次点击两次才复制成功的问题？这个问题真的是纠结了我好长时间，好在最后也算是有了解决的方法，接下来简单说一下怎么使用以及点击两次才生效的解决办法。1、在项目中下载所需要的依赖：npm install clipboard --save2、点击复制链接，实现复制先说一下正常的情况，一般是这样：方案一...

之前，我对于canvas元素的使用有些误解，在查询了相关资料以及自己实操了一些例子后简单的分享一下如何使用canvas元素。1、在页面中添加元素和之前我们所了解的其他标签元素一样，比如说，我要写一个段落，毫无疑问，我会添加一个p标签。那么我要做一个导航栏，也是直接来一个标签nav，同样的道理，我添加画布元素该怎么做呢？&lt;!DOCTYPE html&gt;&lt;html la...

很多时候，我们绘制出一个图形之后，并不能达到我们预期的效果，这个时候，适当地运用图形的变换（transformations，如旋转和缩放等），可以创建出大量复杂多变的图形。1、保存和恢复Canvas状态Canvas指的是当前画面的所有样式、变形和裁切的一个快照，以堆的方式保存。save和restore方法用于保存和恢复Canvas状态，这两个方法都不需要任何参数，用法如下：conte...

最近在看阮一峰的《ECMAScript6入门》，讲真，这本书对初学者真的很有帮助，在这里也推荐给大家。接下来，我要说的一些例子也大多来源于这本书，如果对这本书感兴趣的小伙伴，也可以戳这里哦！想必大家都对es有所了解，对于es5和es6之间的区别还是知道一部分的，但为了更好的帮助我们理解，我决定还是整理一下两者的区别，也算是对之前面试的一个交代吧！1.新增let命令在es6之前，我们声明...

    这几天基于react写了一个小demo测试，主要实现的功能是：在输入框中输入文字，点击添加按钮，在下方的表格中会自动添加一行数据，点击删除按钮后，该行数据被删除。    先来看看最后的效果图：    操作前    操作后      可能样式没怎么调，看着有点别扭，表格样式扒的是菜鸟教程上的，觉得还行的也可以用这个样式哦，或者改成自己喜欢的即可，最重要的是功能实现就好...

一、什么是对象想必大家应该都听过“一切皆对象”这句话，我们先不论这句话正确与否，重点是对象这个东东到底是个啥？在javascript中，一个对象可以是一个单独的拥有属性和类型的实体。我们拿它和一个杯子做下类比。一个杯子是一个对象(物体)，拥有属性。杯子有颜色，图案，重量，由什么材质构成等等。要搞懂对象，就不得不提到typeof这个操作符了，具体干嘛的呢？其实就是判断变量类型的。...

最近，在做毕设，对于我这个android小白来说，真的是很头大啊，好多东西都不会。。。无奈，边学边做呗，都是自己作的啊！其中有一个模块是通过手机获取验证码进行登录，开始用的是Mob的后台获取验证码实现的，但是现在和服务端连接接口后，要改代码，但是觉得还是有必要记录一下，万一以后用得上呢！先来看看最后的效果图，这是点击获取验证码之后的效果，初始效果见后面的布局文件哦： ...

一、控件的显示和隐藏在Android中，怎么让控件可见和不可见呢？其实，不论是显示和隐藏，都有两种方式，一种是在布局文件xml里设置，还有一种就是在我们的java代码中设置。1. 可见（visible)XML文件：android:visibility="visible"Java代码：view.setVisibility(View.VISIBLE);2. 不可见（invisi...

在上一节中我们重点讲了对象和函数，得出的结论是：函数也是一种对象，对象都是通过函数创建的。还记得上一节留下的问题吗？回顾一下：var obj = new Object();obj.a = 10;obj.b = 20; var arr = new Array();arr[0] = 5;arr[1] = 'x'; console.log(typeof obj); //o...

上一节简单的讲了函数对象和原型对象，到现在，大家应该对prototype有了一个简单的了解。之前我们说在JavaScript中定义对象的时候，每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。那么我们现在要说的是：JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的构造函数的原型对象。具体看下面这个...

this是什么简单说，this就是JavaScript中的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。this具体指向什么，取决于我们对函数的调用是怎样的。this的四种绑定规则默认绑定 隐式绑定 显式绑定 new绑定这四种绑定规则分别对应函数的四种调用方式：独立调用、方法调用、间接调用和函数调用。绑定规则的优先级判断绑定规则的...

浏览器兼容性问题是我们前端开发不可避免会遇到的一个难题。由于每个浏览器内核、版本、运行平台等等的差异，我们经常会看到类似normal，reset这样的文件引入，目的是为了初始化样式，也是为了兼容各大浏览器，而浏览器的兼容主要分为三种：CSS兼容 JavaScript兼容 HTML兼容一、CSS兼容而在这些兼容中，其实最主要需要考虑的就是IE浏览器的兼容性。IE兼容性问题1、块...