纟31
码龄9年
关注
提问 私信
  • 博客：18,025
    18,025
    总访问量
  • 19
    原创
  • 1,233,299
    排名
  • 1
    粉丝
  • 0
    铁粉

个人简介：越努力越幸运

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）
IP 属地：北京市
  • 加入CSDN时间： 2016-06-25
博客简介：

qq_35423431的博客

查看详细资料
个人成就
  • 获得6次点赞
  • 内容获得1次评论
  • 获得28次收藏
创作历程
  • 20篇
    2019年
成就勋章
TA的专栏
  • css
    4篇
  • javascript
    5篇
  • npm
    1篇
  • nginx
    2篇
  • 前端试题
    1篇
  • react
    1篇
  • webpack
    1篇
  • 对象
    1篇
  • es6
  • 散学习
  • 项目搭建
    1篇
创作活动更多

2024 博客之星年度评选报名已开启

博主的专属年度盛宴，一年仅有一次！MAC mini、大疆无人机、华为手表等精美奖品等你来拿！

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

react+typescript实例：实现上下一步流程图

做项目遇到一个需求，有5步，每一步都有权限控制，并且第一步和第二步需要数据缓存，之前只有两三步可以写死然后各种判断，但是这次加了5步之后，还那样，是要死的节奏啊。之前的代码是去年刚毕业写的，现在看，真是惨不忍睹，这次要优化下。先看实例图吧，没写什么样式，大致功能是这样：项目连接1、遇到的问题1) 声明变量定义类型在循环中获取定义变量对象的值，然后报错，当时未声明变量的类型；Eleme...
原创
发布博客 2019.09.25 ·
1178 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

css3动画实现

1、tab切换使用css伪类、transition、transform实现li:after给每个li加上一个红色border；使用transform: scaleX(0);缩放，1是正常大小，2是两倍长度，0是长度为0px，不显示；hover时，设置scale为正常大小，就能显示出来； <style type="text/css"> *{ margin:0; ...
原创
发布博客 2019.09.04 ·
522 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

重绘（repaint）和回流/重排（reflow）介绍，以及如何进行优化

首先了解浏览器的渲染过程1、浏览器渲染过程（截自chenjigeng作者的图）浏览器采用流式布局；解析HTML—DOM树，解析CSS—CSSOM树，DOM + CSSOM => 渲染树；根据生成的渲染树，进行回流（layout），得到节点的位置、大小；根据之前得到的信息，进行重绘（painting），得到节点的绝对像素；将像素发送给GPU，节点绘制到页面上；2、回流发...
原创
发布博客 2019.08.28 ·
607 阅读 ·
0 点赞 ·
1 评论 ·
0 收藏

react+webpack+typescript项目搭建

使用react可以直接引入js文件，打开html文件就能看到效果，也可以使用create-react-app去快速的构建react开发环境。在这想自己使用webpack启动react项目，也算是练习下项目搭建。先介绍一下前面两种使用方式，当然菜鸟教程上也有。1、引入js文件方式引入三个库：react：核心库，包含生成虚拟dom的react.createElement函数以及继承的Compo...
原创
发布博客 2019.08.16 ·
2251 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

0813 study

08.134、弹窗蒙层.pop{ width:600px; height: 300px; background: yellow; margin: auto; position: absolute; top: 50%; margin-top: -150px; left: 50%; margin-left: -300px;}.pop_mask{ position: fixe...
原创
发布博客 2019.08.15 ·
153 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

async/await通过”同步“实现异步

学习Event Loop时，有async/await，倒是学习过，也就看过就忘了，在这深入的学习下，做个总结。虽然是ES7里面的，但是很早就出来被使用，面试的时候也被问到过。接触异步最多的还是接口、setTimeout、Promise，相对于async，可能对promise更熟悉些，其实async也算得上Generator 函数的语法糖。promise调用then方法链式回调，async代码更优...
原创
发布博客 2019.08.14 ·
3855 阅读 ·
4 点赞 ·
0 评论 ·
8 收藏

mac使用brew下载nginx缺少echo模块

1、安装遇到的问题安装配置nginx时，使用brew install nginx的方法安装，sudo nginx启动时报错，缺少echo-module；搜索了一圈，把nginx卸载，然后使用brew install nginx-full重新安装了一遍；如果再报错，处理方法：brew tap denji/nginxbrew reinstall nginx-full —with-echo-...
原创
发布博客 2019.08.05 ·
523 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

创建对象和继承的几种方式及区别（1）

面向对象都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。每个对象都是基于一个引用类型创建的。1、对象创建：new Object() / 对象字面量var person = new Object();person.name = "qwe"person.sayName = function() { ... }---------------------------------...
原创
发布博客 2019.07.25 ·
512 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

webpack入门实例步骤+使用webpack-dev-server实现热加载

1）新建项目，执行npm init，生成package.json文件；2）下载webpack，npm install webpack --save-dev，开发环境需要，用–save-dev安装到devDependencies中；3）创建webpack.config.js文件...
原创
发布博客 2019.07.17 ·
407 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

react16

1、ref在react的自上而下的数据流中，父子组件交互是通过props实现的。state或者props改变，会导致子组件重新渲染。子组件调用父组件的方法，可以使用this.props.handle()。实际中也会有父组件需要调用子组件方法的场景，这时就需要使用refs。两种方式使用：PS：不能在函数组件上使用 ref 属性，因为他们没有实例React.createRef() （ Rea...
原创
发布博客 2019.07.17 ·
136 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

前端试题集合

css html篇1、A元素垂直居中A元素距离屏幕左右各边各10pxA元素里的文字font—size:20px,水平垂直居中A元素的高度始终是A元素宽度的50% <style type="text/css"> *{ margin: 0px; padding: 0px; } .box{ display: relative; } .conte...
转载
发布博客 2019.07.16 ·
366 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

本地调试 之 Nginx配置文件学习以及本地指向步骤

在本地调试时都是使用nginx进行反向代理，将线上资源代理到本地，再使用SwitchHosts指向本地，就能愉快的开始迭代了。但是每次都是从同事那拷过来的配置文件，并不理解怎么就代理到本地了，不知道就要学习。1、了解Nginx配置文件主要是使用正则匹配来实现转发，比如图片文件走文件服务器，动态页面走web服务器。文件结构主要分为这五大块：我们主要改动的是server模块（配置虚拟主机的相关...
原创
发布博客 2019.07.09 ·
2170 阅读 ·
0 点赞 ·
0 评论 ·
5 收藏

原生js jquery设置输入框不可编辑，attr、prop对比

1、设置输入框不可编辑点击switch按钮，输入框可编辑和不可编辑切换 <p>E-mail: <input type="text" id="email" name="email"></p> <button class="switch">switch</button>--------------------------------...
原创
发布博客 2019.07.05 ·
1062 阅读 ·
0 点赞 ·
0 评论 ·
3 收藏

原生js和jquery实现元素绑定，给li添加绑定

1、绑定事件addHandler(sele,"change",function(){})
原创
发布博客 2019.07.05 ·
568 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

npm package与package-lock

最近做的项目，因为是用公司平台的组件，依赖比较多，开发过程中以及发版过程中都遇到了些问题，修改了组件的版本，但是未生效等问题，特让人头痛，之前也没学习过npm的相关知识，就只是会使用npm install，现在系统学习一下。在这推荐一篇文章，炒鸡棒前端工程化（5）：你所需要的npm知识储备都在这了NPM是随同NodeJS一起安装的包管理工具查看版本:npm -v更新到最新版：np...
原创
发布博客 2019.07.03 ·
2617 阅读 ·
0 点赞 ·
0 评论 ·
4 收藏

数组实例记录

1-3题目作者给出来的都是自己的解法1、寻找两个数组中相同的元素中最小的元素 const a = [1, 2, 3,4,5, 9, 10] const b = [3, 4, 6, 7,8,9, 10] function calc(a,b){ let c = a.filter((num) => { return b.indexOf(num) !== -1 }) re...
原创
发布博客 2019.07.03 ·
267 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

数组方法汇总及其实例+map/forEach等方法区分+类数组解析+数组扁平化（flat）

之前做个一个关于react的todo分享，里面用了reduce函数，有同事问为什么用这个函数，因为是参考的实例，说不出个所以然，在这专门学习总结一下数组使用，在平时的开发过程中，处理数组或者类数组的机会还是很多的，因此对循环的方法也做一个对比。1、基础篇创建数组Array构造函数：let arr = new Array()数组字面量表示法：let arr = []【推荐】检测数组...
原创
发布博客 2019.07.02 ·
248 阅读 ·
1 点赞 ·
0 评论 ·
1 收藏

关于对闭包的理解以及实例

闭包，在面试时经常被问到，也看了很多文章，书籍，但是对于闭包的理解还是停留在“在一个函数内创建另一个函数，以此可以访问使用函数中的变量”，在这总结一下加深理解。首先，理解闭包得先了解作用域链。1、执行环境及作用域...
原创
发布博客 2019.06.29 ·
228 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

JS 正确判断this指向，理解call/apply使用

this对象是在运行时，基于函数的执行环境绑定的。指向大致分为四种：1）对象的方法调用，this = 该对象；2）普通函数，this = window；3）构造器；4）Function.prototype.call/apply1、作为对象的方法调用 var a = 2 var obj = { a: 1, getValue: function(){ console.l...
原创
发布博客 2019.06.27 ·
143 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

使用css实现元素水平垂直居中

在做弹窗组件时，需要实现元素水平垂直居中，总结记录一下。（有借鉴）1、使用position:absolute，绝对定位实现<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css">...
原创
发布博客 2019.06.25 ·
213 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏
加载更多