自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

lee前端技术站

读万卷书,行万里路,代码运行了那么久,却总觉得不是最优秀。。。

  • 博客(101)
  • 资源 (2)
  • 收藏
  • 关注

原创 前端开发之如何理解前端工程化思想

谈到前端工程化问题,总觉得这是一个很大到问题,同时也是一个当前比较热聊到一个前端所面临的问题。其实从前后端分离,前端独立出来,到现在的前端迅速发展,经历的时间并不长,尽管当前有像vue,angular,react这样的框架供开发者使用,也大大提高了效率,但似乎离前端刀耕火种的年代并没有多远。所以前端工程化也就应运而生。什么是前端工程化?前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的

2020-08-11 13:56:46 131

原创 函数式编程:初识函数式编程

我们在经历了面向对象编程、面向过程编程之后,函数式编程又进入了我们的视线。其实,函数式编程并不是一个什么新鲜的东西。它早在上世纪50年代,随着 Lisp 语言的创建,就已经诞生。而近些年,随着react hooks的发布,函数式编程以其优雅,简单的特点再次出现在大众的视线中。函数式编程这种古老的编程范式并没有随着岁月而褪去其光彩,反而愈加生机勃勃。什么是函数式编程?关于函数式编程,维基百科是这样说的:函数式编程是一种编程范畴。他将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。函数编

2020-07-21 18:34:47 67

原创 react解密:react中key的作用是什么?

我们知道,不管是在vue还是react中,当循环列表的时候,往往会写一个key,那么这个key起到了什么作用呢?其实,key是react用来追踪哪些列表的元素被修改,被添加或者是被删除的辅助标示。在开发过程中我们需要保证某个元素的key在其同级元素中具有唯一性。在react的diff算法中react会借助元素的key来判断该元素是最新创建的还是被移动而来的,从而减少不必要的元素渲染。除此之外,react还要根据key来判断元素与本地状态的关联关系。注意点:key的值一定要和具体的元素一一对应

2020-10-15 16:11:32 40

原创 node基础:koa2的工作原理是什么

koa2是继express之后,node的又一个主流的web框架,相比于express,koa只保留了核心的中间件处理逻辑,去掉了路由、模版以及一些其他的功能,是一个基于node实现的web框架,特点是优雅、简介、健壮、体积小、表现力去强,它所有的功能都是通过插件的形式来实现的。koa的原理:koa是一个基于node实现的web框架,koa通过封装原声的node http模块,koa的context把node的request和response对象封装到单个对象中,并暴露给中间件等调用函数。其最主要的

2020-10-13 18:22:22 56

原创 node基础:koa2和expres的区别是什么

express是一个基于node.js平台的极度简单灵活的web应用开发框架,主要是基于connect中间件,并且自己封装了路由、视图处理、等功能,使用人数众多。koa相对来说更加年轻,是express原班人马基于es的新特性重新开发的一个新的框架,主要基于co中间件,基于es6 generator特性的异步流程控制,解决了回掉地狱问题和麻烦的错误处理,问题框架自生不包含任何的中间件,很多功能都需要借助第三方中间件来解决,koa2是koa的2.0版本,使用async/await来实现的异步流程控制。

2020-10-13 16:41:35 65

原创 前端网络与安全之http基础知识汇总

作为一个前端开发者,http应该说是我们最熟悉的陌生人。熟悉是因为我们每天都在用,浏览器地址栏输入的一个地址最开始的四个字母基本上都是http,可是尽管可能除了我们在吃饭睡觉的时间外都在接触http这四个字母,但是我们对于他背后的故事却又是非常的陌生。那我们就来说说这http背后的故事。在说http之前,我还是想先说说tcp/Ip协议族.tcp/Ip协议是internet的最基本协议,http只是其一个子集。TCP/IP协议族按层次分为以下四层,即应用层、传输层、网络层和链路层。应用层:应用层规定了

2020-09-11 14:21:12 51

原创 JavaScript基础之async/await函数基础及原理

异步请求,我们第一时间想到的应该是promise,但是对于async/await函数也并不陌生。而且async/await函数在运用上可能会更加的方便简单。 那么我们就来剖析一下async/await函数。但是我想在细说async/await之前,还是要先说说generator函数。generator:generator函数是es6的一种新的数据类型。一个generator看上去像一个函数,但可以返回多次。function* generator () { yield '1111'

2020-09-09 13:56:30 45

原创 微信开发之微信环境h5页面登录实现流程

一、unionid和openId在了解微信环境登录流程之前,先讲俩个概念:unionid和openId。unionid表示某一个用户在某一个公司或者商家下的用户id(某公司或商家的身份证);openid表示某一个用户在某一个公司或者商家下的某一个应用或者公众平台下的用户id(某一个应用或者公众平台的身份证)所以,某一个公司或者商家下会有多个应用或者公众平台,那么就通过unionid来关联某一个用户在不同应用或者不同平台的关系。二、静默授权和非静默授权我们在平时开发中,总会听到产品要求

2020-09-08 15:26:08 238

原创 状态管理库之redux和mobx的共同点和区别有什么

谈到react我们一定会想到redux,mobx这些状态管理库,那么 redux和mobx之间有哪些共同点,又有哪些区别呢?且听我一一道来:共同点:为了解决状态管理混乱,无法有效的同步的问题 统一尾货管理应用状态 某一状态只有一个可信的数据源,通常是以action的方式提供更新状态的途径 支持将store与react链接,如react-redux,mobx-react区别:redux:redux更多的是解决flux模式的一种实现,是JavaScript库,他关注的主要有以下几个方面的东西

2020-09-07 17:52:31 52

原创 webpack构建之webpack的构建流程是什么

webpack是一个打包模块化javascript的工具,它将一切文件都看作是模块。通过loader编译转换文件,通过plugin注入钩子,最后输出的资源模块组合成文件。它的主要配置有entry,output,modules,plugins,loader.基本概念:1、compiler:webpack的运行入口,实例化时定义webpack构建主要流程,同时创建时使用的核心对象compilation;2、compilation:由compiler实例化,存储构建过程中使用的数据,用户监控这些数据的

2020-09-07 14:55:28 146

原创 前端网路与安全:XSS和CSRF的基本概念、攻击原理以及防范措施是什么?

一、XSS跨站脚本攻击攻击者想尽一切办法,将可以执行的代码注入到网页中。1.1存储型场景:常见于带有用户保存数据的网站功能,如论坛发帖,商品评论,用户私信等。攻击步骤:攻击者将恶意代码提交到目标网站的数据库中用户打开目标网站,服务器将恶意代码从数据库取出,拼接在HTML中返回给浏览器浏览器在收到响应后的数据解析执行,混在 其中的恶意代码同时也被执行恶意代码窃取用户数据,并发送到指定的攻击者的网站,或者冒充用户行为,调用目标网站的接口,执行恶意操作1.2反射型与存储型.

2020-08-31 18:33:51 57

原创 JavaScript基础之原型链继承和类继承

实现继承的方式有:1、原型链继承function Aminal (name, age) { this.name = name this.age = age}Aminal.prototype.say = function () { console.log('我是' + this.name + ',现在' + this.age + '岁')}let cat = new Animal('cat', 9)cat.say() // 我是cat,现在9岁这就是原

2020-08-28 16:39:06 58

原创 JavaScript基础之原型和原型链详解

普通对象和函数对象let obj1 = {}let obj2 = new Object()let obj3 = new fun3()let fun1 = function () {}let fun2 = new Function('str', 'console.log(str)')function fun3 () {}console.log(typeof Object) // functionconsole.log(typeof Function) // functionc

2020-08-28 14:30:58 44 2

原创 前端网络与安全之get请求和post请求的区别是什么

http请求之get请求和post请求的区别:一般来说,get请求是从服务器获取资源,而post请求是向服务器提交资源; get请求的url的长度有限制,为2048字符。而post请求没有; get请求的参数是在url后,而post请求的参数在body中,所以相比get请求,post请求比较安全; get请求会被缓存,会被记录在浏览器中,也可被收藏在标签中,而post请求不能。 点击浏览器的回退时,post请求会被再次提交,而get请求不会。 get类型请求只允许ASCII类型数据,而post

2020-08-27 16:36:04 48

原创 React解密:React生命周期是什么

了解react的运行机制,生命周期是一个绕不过去的话题,那么react的生命周期会经历哪些阶段呢?在我看来应该是会经历四个阶段:一、初始化阶段在我们编写类组件的时候,我们常常会有这样的代码:import React, { Component } from 'react'class App extends Component { contructor (props) { super(props) }}export default App这也是组件的初

2020-08-27 15:23:17 32

原创 CSS基础之如何前端布局方式有哪些

我们知道html定义了前端页面的结构,css定义了页面的样子,JavaScript定义了用于的行为。页面的结构和样式,又可以简单的成为是布局,我们就来讲讲前端页面的布局有哪些?1、流体布局流体布局其实我们正常的布局,他其实就是一个盒子模型。在这种布局下我们其实能操作的布局样式很少,我这里主要提一下margin属性,我们可以通过margin:auto;对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理:auto会让盒子模型填充父元素剩下的宽度。也可实现盒子的垂...

2020-08-27 11:21:54 65

原创 React解密:React实际项目开发中可以做哪些优化?

我们知道,项目优化,是开发中的重中之重,一般会分为几个阶段:开发过程中,上线之后的首屏,运行中的状态。而上线之后的首屏和运行中的优化最为多:首先会涉及到几个指标,FP(页面在导航后首次呈现出不同于导航前内容的时间点)、FCP(首次绘制任何文本,图像,非空白canvas或SVG的时间点)、FMP(首次绘制任何文本,图像,非空白canvas或SVG的时间点),要有一个良好的体验是尽可能的把FCP提前,需要做一些工程化的处理。去优化资源的加载。 方式及分包策略:资源的减少是最有效的加快首屏打开的方式。 .

2020-08-26 18:43:43 78

原创 React解密:React中setState的运行原理是什么

我们知道react中更新state的时候,会调用setState方法。那么调用setState方法为什么就能更新组件的state呢,其原理又是什么呢?下面我们就来讲讲setState的原理:setState()将对组件 state 的更改排入队列批量推迟更新,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步,只是代码执行顺序不同,有了异步的感觉。setState(stateChange | updater [, callback]).

2020-08-26 15:22:33 55

原创 React解密:React事件绑定原理是什么?

React的事件绑定,是通过在react元素上添加事件属性,且事件属性名必须采用驼峰命名的方式,如onClick等。import React from 'react'const Test = () => { const handleClick = () => { console.log('点击我') } return ( <div onClick={this.handleClick.bind(this)}>点我<

2020-08-26 11:33:32 160

原创 CSS基础之浏览器的重绘和回流是什么

回流和重回一直以来是我们关注的重点,所以在讨论回流与重绘之前,我们要知道:浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM,把CSS解析成CSSDOM,DOM和CSSDOM合并就产生了Render Tree。 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次

2020-08-26 10:26:34 57

原创 React解密:React中PureComponent和Component的区别是什么

提到PureComponent,应该并不是react与生俱来就有的,而应该是在15.3版本之后才出现的,主要是为了取代之前的PureRenderMixin。所以对于几年不怎么接触react的我来说,当提到PureComponent的时候,还是有那么些许的懵逼。更不要说它于Component的区别是什么?那么我们先来看看pureComponent是个什么鬼?PureComponent其实就是一个继承自Component的子类,会自动加载shouldComponentUpdate函数。当组件需要更新的时候,

2020-08-25 17:42:44 215

原创 CSS基础之link和@import的区别是什么?

CSS基础之link和@import的区别是:1、从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2、加载顺序区别加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。3、兼容性区别@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

2020-08-24 18:37:45 53

原创 React解密:props和state的区别是什么

开发react组件,我们最常用到的俩个引起组件渲染的可能就是state和props了,那么他们有什么区别呢?props:props:函数组件的props就是函数的入参组件 类组件:this.props包含被该组件调用或者定义的propsstate:组件中的state包含了随时可能发生变化的数据。 state是由用户定义,是一个普通的JavaScript对象区别:props是传递给组件的(类似于函数的形参),而state是在组件内部被组件自己管理的(类似于在一个函数内声明的变量) p

2020-08-24 17:45:37 264

原创 React解密:React类组件中为什么要绑定this?

我们在开发react组件的时候,总是会在构造函数中或者是事件中去通过bind方法去绑定this。不知道你有没有思考过这是为什么呢?难道不绑定this就不可以吗?为什么react类组件中要绑定this,绑定的方式又有哪些呢?直白点来说。其实react中绑定this和react本身没有半毛钱关系。哈哈哈,意不意外?惊不惊喜?所以,既然是这样,我们就来说说this绑定的哪些事儿。默认绑定function test() { console.log(this)}test() //

2020-08-24 16:57:16 321

原创 React解密:React高阶组件是什么?

React中比较高大上的东西,高阶组件应该算是一个点,开发中也许写的不多,但是我们必须要直到高阶组件是什么,高阶组件能干什么?A higher-order component is a function that takes a component and returns a new component.这是react官网给出的解释,也就是说,高阶组件就是接收一个组件,然后返回一个新组件。这是函数式编程的思想。那么高阶组件是如何实现的呢?俩种方法:属性代理和反向继承。属性代理:实质就是通过包裹原

2020-08-24 14:48:13 106

原创 webpack构建之loader与plugin的区别是什么

在webpack中,loader和plugin是俩个关键的部分,常常被面试官拿来比较他们,那么他们到底有什么区别呢?loaderloader是文件加载器,能够加载资源文件,并对这些文件进行统一处理,诸如编译、压缩等,最终一起打包到指定的文件中。处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序正好相反,也就是说最后一个loader最先执行,第一个loader最后执行。第一个执行的loader的返回值接收源文件内容作为参数,其他loader接收前一个执行的loader的返回值作

2020-08-24 11:22:04 549

原创 前端工程化之不需要打包的snowpack初窥

snowpack看单词拼写好像和webpack有那么一丝丝的关联,是的,你想的没有错。snowpack是一个以原生JavaScript模块化核心的年轻的构建工具。目前在github上的star也已经达到了11.3k.看来受到了众多开发者的青睐,那么我们就来说说他是如何实现老牌构建工具所提供的哪些特性的。...

2020-08-23 11:44:41 84

原创 webpack构建之tree-shaking的原理是什么

我们在开发一个项目的时候,总会遇到这样的问题,就是比如我们写了一个utils工具类,我们在某一个组件内要用到utils这个类里的其中一个或者某几个方法,但是当我们引入utils的时候,实际是将utils里的方法全都引入了,这样就会导致将没有必要的东西也引入,包提就会越来越大。那么我们如何解决这个问题呢?是的,tree-shaking.看名字就知道是将哪些没有用的东西都shaking掉。Tree-shaking是一种通过清楚多余代码的方式来优化项目打包体积的技术。tree-shaking原理利用es6

2020-08-20 17:53:03 543

原创 前端网络与安全之connection为keep-alive是什么意思?

看到keep-alive你能想到的一定是缓存俩个字,http中connection的keep-alive也是这样吗?那可不一定,下面我们就来讲讲connection的keep-alive.其实http的connection的keep-alive和缓存没有半毛钱关系。HTTP keep-alive 也称为 HTTP 长连接。它通过重用一个 TCP 连接来发送/接收多个 HTTP请求,来减少创建/关闭多个 TCP 连接的开销。一、什么是keep-alive?keep-alive 是客户端和服务端的一个约

2020-08-20 16:03:32 479

原创 前端网络与安全之https工作原理是什么?

作为一个前端,虽说每天都是在写JavaScript,但是http相关原理还是要懂的。近些年,互联网发生翻天覆地的变化。尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代,在浏览器、搜索引擎、CA机构、大型互联网企业的共同促进下,互联网迎来了“HTTPS加密时代”,HTTPS将在未来的几年内全面取代HTTP成为传输协议的主流。那么接下来,我们就来聊聊https的相关东西。一、什么是https?HTTPS是在HTTP上建立SSL加密层,并对传输数据进行加密,是HTTP协议的安全版。现在

2020-08-20 14:35:19 92

原创 前端工程化:CommonJS、AMD、CMD、UMD和ES Modules的区别

前端工程化思想一直以来都是一个非常热议的话题,其实前端工程化从技术方面来说,无非就是这么几点:CommonJS、AMD、CMD、UMD和ES6 Modules,那么我们就来说说前端这几个模块。1、CommonJS说到CommonJS,那就的从他的出发点说起了,commonjs的出发点是js没有完善的模块系统。标准库较少,缺少包管理工具,而在node.js兴起之后。能让js在任何地方运行,特别是服务端,也能具备开发大型项目的能力,所以commonjs也就应用而生了。node.js是commonjs的最

2020-08-19 19:00:38 270

原创 React解密:React关键核心fiber是什么

学习react,虚拟dom和diff算法是你绕不开的核心话题。我们知道,随着react新版本的发布,在虚拟dom和diff算法上还是有了很大的变化,那么我们就来diff一下新旧版本的虚拟dom和diff算法都是怎么样的,我们先来看看旧版本的虚拟dom和diff算法。我们知道react的核心思想是:内存中维护一颗虚拟DOM树,数据变化时(setState),自动更新虚拟 DOM,得到一颗新树,然后 Diff 新老虚拟 DOM 树,找到有变化的部分,得到一个 Change(Patch),将这个 Patch

2020-08-17 15:31:22 160

原创 前端性能优化:前端性能优化该从哪些点入手

前端性能优化,一直以来都是一个老生常谈的问题。页面响应的时间快慢等性能问题,直接决定了用户体验的好坏,从而决定了用户消费的欲望。所以,前端优化势在必行。那么,我们就来判断一下,可以做的前端性能优化有哪些?1、loading对,你说的没错,这中优化方式确实是很low,但是请问,你在开发中加loading了吗?没加,请加上。就这这么简单,别问怎么做。2、骨架屏这个听起来似乎要高大上一点,应该至少要比loading要高大上。实现骨架屏的方式:(1)base64图片:辛苦设计小姐姐,设计一张b

2020-08-17 10:59:07 46

原创 VueRouter: VueRouter的实现原理

vue的路由,既熟悉又陌生,堪称是最熟悉的陌生人,我们在平时的开发中一直在用,但是对其原理却知道的非常少,那么他到底是如何实现切换更新视图,却又不去请求页面的呢?我们来揭晓答案。我们知道在我们配置路由的时候,我们会写这样的一行代码:const router = new Router({ mode: 'history, routes: routes // routes没有引入})所以想要了解vue-router的原理一切都要从这个new Router()创建实例开始。很明

2020-08-14 11:15:06 63

原创 React解密:React组件通信的方式有哪些?

随着react,vue,angular,组件化思想的深化,组件通信一直以来都是开发的重要内容。那么我们就来说说react组件的通信方式有哪些?组件通信的类别:1、父子组件2、子父组件3、子孙组件4、无关组件父子组件通信:propsconst Child = (props) => { return ( <div>我的原色是:{{props.color}}</div> )}const Parent = () =&gt

2020-08-13 16:39:16 60

原创 webpack构建之webpack打包流程到底是什么

webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:首先会从配置文件和Shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数;初始化完成后会调用Compiler的run来真正启动webpack编译构建过程,webpack的构建流程包括compile、make、build、seal、emit阶段,执行完这些阶段就完成了构建过程。

2020-08-13 15:19:13 161

原创 JavaScript基础之EventLoop事件循环机制

每每遇到异步问题的时候,总是能让我们抓耳挠腮,无所适从。那么我们就来讲讲异步问题——EventLoop事件循环机制。首先来了解一个概念,进程和线程:进程:进程是 CPU 资源分配的最小单位;线程:线程是 CPU 调度的最小单位。如何理解这句话呢?计算机是多进程执行的,打开自己的电脑的任务管理器,可以看到所有的执行的进程,而每一个执行的进程又是有多个线程组成的。线程是一个进程中代码的不同执行路线。一个进程的内存空间是共享的,每个线程都可用这些共享内存。而每个进程是独立的。所以这里就会出现另一个

2020-08-11 18:07:58 45

原创 JavaScript基础之缓存机制:HTML5离线缓存

浏览器的缓存机制,多种多样,离线缓存是其中之一,这也是为了更好的用户体验,性能优化的重要一步。我们来讲讲这个离线缓存。什么是HTML5离线缓存?离线缓存(Application Cache)就是web应用缓存方式的一种,可以使得用户在离线状态下,依然能够很完美的浏览网站。HTML5离线缓存的优势?离线浏览 - 用户可在应用离线时使用它们。 速度 - 已缓存资源加载得更快。 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。HTML5离线缓存应用场景?h5游戏及一些页面

2020-08-10 19:00:17 151

原创 JavaScript基础之缓存机制:浏览器缓存机制

缓存可以说是网站性能优化非常有用的一种方式。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。一、缓存的位置从缓存的位置来说,主要是分为四种,如果这四种都没有命中,才回去发起网络请求

2020-08-10 14:24:03 79

原创 JavaScript基础之缓存机制:HTTP缓存机制

说到前端的缓存机制,无非就是俩中,一种是浏览器缓存机制,一种就是我们今天要说的HTTP缓存机制。那么接下来就说说这HTTP缓存机制。什么是HTTP缓存?HTTP缓存指的是,当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有“要请求资源”的副本,就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力,所以后续说的请求缓存都是指GET请求。http缓存都是从第二次请求开始的。第一次请求资源时,服务器返回

2020-08-10 10:53:29 70

前端最全复习内容.xmind

涵盖前端最全复习点,面试要点,包含js基础,vue,react,angular,webpack,前性能优化,前端安全等。。。持续更新中。

2020-08-10

前端内容.xmind

自己总结的全球最全的前端复习点,包括了基础知识,主流框架,服务安全网络,工程化工具等,持续更新中。。。

2020-07-22

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除