- 博客(20)
- 收藏
- 关注
RSS订阅原创 react+typescript实例：实现上下一步流程图
做项目遇到一个需求，有5步，每一步都有权限控制，并且第一步和第二步需要数据缓存，之前只有两三步可以写死然后各种判断，但是这次加了5步之后，还那样，是要死的节奏啊。之前的代码是去年刚毕业写的，现在看，真是惨不忍睹，这次要优化下。先看实例图吧，没写什么样式，大致功能是这样：项目连接1、遇到的问题1) 声明变量定义类型在循环中获取定义变量对象的值，然后报错，当时未声明变量的类型；Eleme...
2019-09-25 10:46:03
1108
原创 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 16:13:42
494
原创 重绘（repaint）和回流/重排（reflow）介绍，以及如何进行优化
首先了解浏览器的渲染过程1、浏览器渲染过程（截自chenjigeng作者的图）浏览器采用流式布局；解析HTML—DOM树，解析CSS—CSSOM树，DOM + CSSOM => 渲染树；根据生成的渲染树，进行回流（layout），得到节点的位置、大小；根据之前得到的信息，进行重绘（painting），得到节点的绝对像素；将像素发送给GPU，节点绘制到页面上；2、回流发...
2019-08-28 10:46:16
548
1
原创 react+webpack+typescript项目搭建
使用react可以直接引入js文件，打开html文件就能看到效果，也可以使用create-react-app去快速的构建react开发环境。在这想自己使用webpack启动react项目，也算是练习下项目搭建。先介绍一下前面两种使用方式，当然菜鸟教程上也有。1、引入js文件方式引入三个库：react：核心库，包含生成虚拟dom的react.createElement函数以及继承的Compo...
2019-08-16 11:00:32
2169
原创 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 10:23:06
129
原创 async/await通过”同步“实现异步
学习Event Loop时，有async/await，倒是学习过，也就看过就忘了，在这深入的学习下，做个总结。虽然是ES7里面的，但是很早就出来被使用，面试的时候也被问到过。接触异步最多的还是接口、setTimeout、Promise，相对于async，可能对promise更熟悉些，其实async也算得上Generator 函数的语法糖。promise调用then方法链式回调，async代码更优...
2019-08-14 16:04:23
3739
原创 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 17:19:02
488
原创 创建对象和继承的几种方式及区别（1）
面向对象都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。每个对象都是基于一个引用类型创建的。1、对象创建：new Object() / 对象字面量var person = new Object();person.name = "qwe"person.sayName = function() { ... }---------------------------------...
2019-07-25 09:50:35
485
原创 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 17:01:34
379
原创 react16
1、ref在react的自上而下的数据流中，父子组件交互是通过props实现的。state或者props改变，会导致子组件重新渲染。子组件调用父组件的方法，可以使用this.props.handle()。实际中也会有父组件需要调用子组件方法的场景，这时就需要使用refs。两种方式使用：PS：不能在函数组件上使用 ref 属性，因为他们没有实例React.createRef() （ Rea...
2019-07-17 14:00:43
108
转载 前端试题集合
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 14:47:34
308
原创 本地调试 之 Nginx配置文件学习以及本地指向步骤
在本地调试时都是使用nginx进行反向代理，将线上资源代理到本地，再使用SwitchHosts指向本地，就能愉快的开始迭代了。但是每次都是从同事那拷过来的配置文件，并不理解怎么就代理到本地了，不知道就要学习。1、了解Nginx配置文件主要是使用正则匹配来实现转发，比如图片文件走文件服务器，动态页面走web服务器。文件结构主要分为这五大块：我们主要改动的是server模块（配置虚拟主机的相关...
2019-07-09 17:30:02
2020
原创 原生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 21:24:06
1008
原创 npm package与package-lock
最近做的项目，因为是用公司平台的组件，依赖比较多，开发过程中以及发版过程中都遇到了些问题，修改了组件的版本，但是未生效等问题，特让人头痛，之前也没学习过npm的相关知识，就只是会使用npm install，现在系统学习一下。在这推荐一篇文章，炒鸡棒前端工程化（5）：你所需要的npm知识储备都在这了NPM是随同NodeJS一起安装的包管理工具查看版本:npm -v更新到最新版：np...
2019-07-03 17:45:35
2431
原创 数组实例记录
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 15:33:31
213
原创 数组方法汇总及其实例+map/forEach等方法区分+类数组解析+数组扁平化（flat）
之前做个一个关于react的todo分享，里面用了reduce函数，有同事问为什么用这个函数，因为是参考的实例，说不出个所以然，在这专门学习总结一下数组使用，在平时的开发过程中，处理数组或者类数组的机会还是很多的，因此对循环的方法也做一个对比。1、基础篇创建数组Array构造函数：let arr = new Array()数组字面量表示法：let arr = []【推荐】检测数组...
2019-07-02 17:57:28
223
原创 关于对闭包的理解以及实例
闭包，在面试时经常被问到，也看了很多文章，书籍，但是对于闭包的理解还是停留在“在一个函数内创建另一个函数，以此可以访问使用函数中的变量”，在这总结一下加深理解。首先，理解闭包得先了解作用域链。1、执行环境及作用域...
2019-06-29 22:03:40
185
原创 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 10:59:32
123
原创 使用css实现元素水平垂直居中
在做弹窗组件时，需要实现元素水平垂直居中，总结记录一下。（有借鉴）1、使用position:absolute，绝对定位实现<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css">...
2019-06-25 16:49:16
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人