leelxp-CSDN博客

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

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

2020-08-11 13:56:46 906

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

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

2020-07-21 18:34:47 182

原创函数柯理化是什么，手动实现一个柯理化函数

函数柯理化是什么，手动实现一个柯理化函数https://leexiaop.github.io/coding/7/

2021-03-26 16:56:30 341

原创 react解密：react中key的作用是什么？

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

2020-10-15 16:11:32 673

原创 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 1747

原创 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 1119

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

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

2020-09-11 14:21:12 383

原创 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 695

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

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

2020-09-08 15:26:08 4730 3

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

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

2020-09-07 17:52:31 464

原创 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 1328

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

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

2020-08-31 18:33:51 406

原创 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 281

原创 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 158 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 353

原创 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 177

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

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

2020-08-27 11:21:54 689

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

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

2020-08-26 18:43:43 533

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

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

2020-08-26 15:22:33 1145

原创 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 1973

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

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

2020-08-26 10:26:34 547

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

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

2020-08-25 17:42:44 6396 1

原创 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 279

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

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

2020-08-24 17:45:37 1748

原创 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 2167

原创 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 2703

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

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

2020-08-24 11:22:04 2467

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

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

2020-08-23 11:44:41 329

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

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

2020-08-20 17:53:03 5208

原创前端网络与安全之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 19149 2

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

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

2020-08-20 14:35:19 424

原创前端工程化：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 4993

原创 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 1351

前端最全复习内容.xmind

前端内容.xmind

空空如也