卖菜的小白-CSDN博客

原创 js数组转化为tree

【代码】js数组转化为tree。

2022-08-21 16:33:52 652 1

原创前端面试题——dom的逆序

【代码】前端面试题——dom的逆序。

2022-08-21 15:41:25 516

一、作用指令用于条件性地渲染一块内容。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。指令基于一个数组来渲染一个列表。指令需要使用形式的特殊语法，其中是源数据数组或者对象，而则是被迭代的数组元素的别名。在的时候，建议设置值，并且保证每一个值都是独一无二的，这便是算法进行优化。二、优先级和都是模板系统中的指令。在模板编译的时候，会将指令系统转化为可执行的函数。编写一个标签，同时使用和创建示例，存放和数据。是的列表渲染函数，函数内部都会进行一次判断。初

2022-06-06 20:24:02 1792 1

原创 react组件通信如何实现？

react组件之间通讯方式：1、父组件向子组件通讯:父组件可以向子组件传入props的方式，向子组件进行通讯。2、子组件向父组件通讯:props+回调的方式，父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中。3、兄弟组件通信:找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信。4、跨层级通讯:Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，

2022-05-23 22:39:24 926

原创 setState到底是异步还是同步？

在介绍这个问题之前，我们先来看一下一个例子：state = { number:1};componentDidMount(){ this.setState({number:3}) console.log(this.state.number)}看完这个例子，也许很多小伙伴会下意识的以为setState是一个异步方法，但是其实setState并没有异步的说法，之所以会有一种异步方法的表现形式，归根结底还是因为react框架本身的性能机制所导致的。因为每次调用setState都

2022-05-22 17:33:25 1516

原创 React的请求应该放在哪个⽣命周期中?

React的异步请求到底应该放在哪个⽣命周期⾥,有⼈认为在 componentWillMount 中可以提前进⾏异步请求,避免⽩屏,其实这个观点是有问题的。由于JavaScript中异步事件的性质，当您启动API调⽤时，浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时，它不会等待componentWillMount它完成任何事情 - React继续前进并继续render,没有办法“暂停”渲染以等待数据到达。⽽且在 componentWillMount 请求会有⼀系列潜在的问题,⾸

2022-05-22 17:13:16 2242

原创 React最新的⽣命周期是怎样的?

React 16之后有三个⽣命周期被废弃(但并未删除)1、componentWillMount2、componentWillReceiveProps3、componentWillUpdate官⽅计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，⽬的是为了向下兼容，但是对于开发者⽽⾔应该尽量避免使⽤他们，⽽是使⽤新增的⽣命周期函数替代它们⽬前React 16.8 +的⽣命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段挂载阶段1、constructor: 构造函数，

2022-05-22 16:59:33 217

原创说说你对虚拟DOM的原理的理解?

1、什么是virtual domVirtual DOM是对DOM的抽象,本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述.2、为什么需要virtual dom既然我们已经有了DOM,为什么还需要额外加一层抽象?首先,我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手,因此我们需要这一层抽象,在patch过程中尽可能地一次性将差异更新到DOM中,这样保证了DOM不会出现性能很

2022-05-22 16:26:37 381

原创 react中为什么会引入jsx?

1、jsx是什么？jsx是一个javascript的语法扩展，jsx可以很好的描述ui应该呈现它应有的交互的本质。jsx其实是react.createElement的语法糖。2、react想实现什么目的？需要实现声明式代码结构需要非常清晰和简洁，可读性强。结构，样式和事件等能够实现高内聚低耦合，方便重用和组合。不想引入新的概念，只写javascript3、为什么jsx最好vue.js使用了基于html的模板语法，允许开发者声明式的将dom绑定到底层的vue实例的数据。引入太多概念，比

2022-05-21 21:59:39 646

原创说一下你对react的理解?

1、react是什么？react是用于构建用户界面的javascript库。2、react能干什么?可以通过组件化的方式构建快速响应的大型web应用程序。3、react如何干的？声明式使用声明式的编写用户界面，代码可行方便调试。声明式渲染和命令式渲染：命令式渲染，命令我们的程序去做什么，程序就会跟着你的命令一步一步去执行。声明式渲染，我们只需要告诉程序我们想要什么效果，其他就交给程序去做。4、组件化组件化把页面拆分为一个个组件，方便视图的拆分和使用，还可以做到高内聚低耦合。5、一次学习

2022-05-21 21:43:04 848

原创 react基本语法总结？

1、js和jsx有什么区别，为什么要使用jsx// ①jsx的使用 <script type="text/babel"> const VDOM = <h1 id='title'>hell,react</h1> ReactDOM.render(VDOM, document.getElementById('test')) </script>②js的使用 <script type="text/javascript">

2022-05-09 12:28:50 1467

原创移动端总结?

1、移动端适配方案参考答案:原则:1、开发时方便，写代码时设置的值要和标注的 160px 相关。2、方案要适配大多数手机屏幕，并且无 BUG。3、用户体验要好，页面看着没有不适感。思路:1、写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用2、按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px。3、固定尺寸+弹性布局，不需要缩放。viewport适配:根据设计稿

2022-05-03 21:06:01 377

原创性能面试总结?

1、前端性能优化手段前端性能优化手段从以下几个方面入手:加载优化，执行优化，渲染优化，脚本优化。1、加载优化:减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookie、避免重定向、异步加载第三方资源。2、执行加载:CSS写在头部，JS写在尾部并异步、避免img、iframe等的src为空、尽量避免重置图像大小、图像尽量避免使用DataURL3、渲染加载:设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速4、样式优化:避免

2022-05-03 16:18:06 2501

原创浏览器相关内容总结?

1、cookie和sessionStorage和localStorage的区别共同点:都保存在浏览器端，且同源的。区别:1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cook

2022-05-03 15:09:24 491

原创 js的工作原理

1、为什么js是单线程这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。扩展：什么是进程:进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小

2022-05-01 22:38:05 1951

原创 ES5+ES6

1、es6中箭头函数1、基本语法ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子：// 箭头函数let fun = (name) => { // 函数体 return `Hello ${name} !`;};// 等同于let fun = function (name) { // 函数体 return `Hello ${name} !`;};可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了functi

2022-05-01 21:43:23 510

原创引入文件方式？

1、link和@import作用：样式的导入方式link的使用:<link href='index.css' rel='stylesheet'>@import的使用:<style type='text/css'> @import url(index.css)</style>link和@import的区别？1、引入的内容不同link除了引用样式文件，还可以引入图片等资源文件，而@import只引入样式文件。2、加载顺序不同link引入css时，

2022-05-01 15:43:33 414

原创 this问题总结

1、call apply和bind的作用和区别作用:都可以改变函数内部的this指向。区别点:1、call 和 apply 会调用函数，并且改变函数内部this指向。2、call 和 apply 传递的参数不一样，call 传递参数arg1,arg2...形式 apply 必须数组形式[arg]3、bind不会调用函数，可以改变函数内部的this指向。解析:call方法call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向。写法：fun.call(th

2022-05-01 15:08:56 325

原创异步相关面试题

1、Promise和async await的区别1、概念:Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的。async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。两者的区别:1、Promise的出现解决

2022-05-01 12:12:40 636

原创前端总复习——html篇

1、html标签的类型(head, body, !Doctype)他们的作用是什么？!DOCTYPE标签: 他是指示web浏览器关于页面使用哪个html版本进行编写的指令。head: 是所有头部元素的容器，绝大多数头部标签的内容不会显示给读者。body: 用于定义文档的主体，包含了文档的所有内容该标签支持html的全局属性和事件属性。2、h5新特性1、新增选择器document.querySelector，document.querySelectorAll2、拖拽释放（Drag a

2022-04-29 20:38:43 541

原创 webpack的构建流程？

webpack启动后，从entry开始，递归解析entry依赖的所有module,找到每一个module.rules里配置loader进行相关的转换处理，对module转换后，解析模块，解析的结果是一个一个的chunk,转化为bound,在整个构建过程中，webpack会执行plugin当中的插件，完成plugin的任务。entry:模块入口，使得源文件加入到构建流程中。output:配置模块如何输出最终代码。module:配置各种类型的模块的处理规则。plugin:配置扩展插件的。devServ

2022-04-28 10:36:43 436

原创 Typescript的优缺点？

一、什么是TypescriptTypescript是javascript的一个超集，主要提供了类型系统和对es6的支持，它由Microsoft开发，代码开源于Github上。Typescript是javascript的类型超级，它可以编译为纯javascript。编译出来的javascript可以运行在任何浏览器上。Typescript编译工具可以运行在任何服务器和任何系统上。Typescript是开源的。二、为什么选择TypescriptTypeScript 增加了代码的可读性和可维护性1、类型系

2022-04-25 11:36:29 4117

原创携程面试题

一、写在前面今天面试携程，面试问了一个问题:for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i) }, 100)}说出他的打印结果：结果是10个10。这都没什么问题。然后面试官问，你能不能打印出0-9。然后我该了一下代码。1、var -> letfor (let i = 0; i < 10; i++) { setTimeout(() => { console.l

2022-04-24 18:48:36 1672

原创携程面试题

一、写在前面今天携程一面，问了一道面试题:let a = ?if (a == 1 && a == 2 && a == 3) { console.log('1')}怎么才能打印出1,给我当时正懵逼了。不过面试官一直在引导我，最终还是没写出来。下面总结一下。二、总结我们在进行比较的时候，会对a进行类型转换，比如说a是一个对象，此时我们就会将其转化为基本数据类型，然后再进行比较。当进行转化的时候，就会触发Symbol.toPrimitive方法，所以此时我们需要

2022-04-24 18:30:32 629

原创学习css文本溢出显示省略号？

一、写在前面今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面重新整理一下。<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content

2022-04-24 17:54:46 1706

原创 Leetcode刷题(第438题)——找到字符串中所有字母异位词

一、题目给定两个字符串 s 和 p，找到 s 中所有 p 的异位词的子串，返回这些子串的起始索引。不考虑答案输出的顺序。异位词指由相同字母重排列形成的字符串（包括相同的字符串）。二、示例输入: s = "cbaebabacd", p = "abc"输出: [0,6]解释:起始索引等于 0 的子串是 "cba", 它是 "abc" 的异位词。起始索引等于 6 的子串是 "bac", 它是 "abc" 的异位词。输入: s = "abab", p = "ab"输出: [0,1,

2022-04-23 21:51:44 314

原创 leetcode刷题(第461题)—— 汉明距离

一、题目两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目。给你两个整数 x 和 y，计算并返回它们之间的汉明距离。二、示例输入：x = 1, y = 4输出：2解释：1 (0 0 0 1)4 (0 1 0 0) ↑ ↑上面的箭头指出了对应二进制位不同的位置。输入：x = 3, y = 1输出：1三、思路本题我们可以知道找到两个数对应的二进制位不同的位置即可。所以我们采用异或（相同为0，不同位1,），最后我们再使用while循

2022-04-23 20:54:08 435

原创 http协议

一、HTTP协议有哪些方法http1.0定义了三种请求方法：GET，POST和HEAD方法。http1.1新增了五种请求方法：OPTIONS,PUT，DELETE，TRACT和CONTENT方法。二、这些方法的具体是什么？GET方法：通常用于请求服务器发送某一些资源。HEAD方法：请求资源的头部信息，并且这些头部与HTTP GET方法请求时返回一致，该请求方法的一个使用场景是在下载一个大文件前先获取其大小再决定是否需要下载，以此可以节约宽带资源。OPTIONS方法：用于获取目的资源所支持的通信选

2022-04-23 16:53:31 2861

原创 git flow工作流总结？

一、写在前面之前我们在讲述前端工程化的时候，有提到git工作流。之前在面试pdd的时候，也被问到开发的工作流问题，但是当时没有回答出来。下面我们将总结一下git flow工作流。二、具体总计上面这张图还是比较清晰的，每一个分支的主要作用如下所示：名称说明master主分支develop主开发分支feature新功能分支，一般一个新功能对应一个分支，对于功能的拆分需要比较合理的代码冲突release发布分支，发布的时候用的分支，一般测试的时候发现bug

2022-04-23 15:28:24 569

原创 babel的原理

一、babel的原理babel的转移过程分为三个阶段，这三个步骤分别是：1、解析parse:将代码解析生成抽象语法树（AST）,即词法分析和语法分析的过程。2、转换Transform:对于AST进行变换的一些列的操作，babel接收得到的AST并通过babel-traverse对其进行遍历，在此过程中进行添加，更新以及移除等操作。3、生成Generate:将变换后的AST再转换为JS代码，使用到的模块是babel-generator。二、如何编写一个babel插件Babel的核心模块@babe

2022-04-22 18:12:41 5581

原创什么是浏览器同源策略？

同源策略限制了从同⼀个源加载的⽂档或脚本如何与来⾃另⼀个源的资源进⾏交互。这是⼀个⽤于隔离潜在恶意⽂件的重要安全机制。同源是指"协议+域名+端⼝"三者相同，即便两个不同的域名指向同⼀个ip地址，也⾮同源。下表给出了http://store.company.com/dir/page.html。URL结果原因http://store.company.com/dir2/other.html成功只有路径不同http://store.company.com/dir/inner/

2022-04-22 16:02:40 2661

原创前端如何实现即时通信？

一、ajax短轮询短轮询的原理很简单，每隔⼀段时间客户端就发出⼀个请求，去获取服务器最新的数据，⼀定程度上模拟实现了即时通讯。1、优点：兼容性强，实现非常简单。2、延迟性高，非常消耗请求资源，影响性能。二、Comet以即时通信为代表的web应用程序对数据的Low Latency要求，传统的基于轮询的方式已经无法满足，而且也会带来不好的用户体验。其实，服务器推很早就存在了，在经典的client/server模型中有广泛使用，只是浏览器太懒了，并没有对这种技术提供很好的支持。以下是典型的Ajax

2022-04-22 12:35:57 5218

原创浏览器原理面试题

一、浏览器如何解析css选择器浏览器会从右向左解析css选择器。我们知道DOM Tree和Style Rules会生成Render Tree。实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM tree进行遍历，才能将样式附着到对应的DOM元素上。以下这段css代码为例。.mod-nav h3 span { font-size: 16px}我们对应的DOM tree如下所示：若从左到右的匹配，过程是：1、从.mod-nav开始，遍历子节点

2022-04-21 18:24:37 366

原创如何在javascript中实现不可变对象

一、写在前面javascript是一种灵活的语言，你可以重新定义任何东西，但是当项目变得复杂时，我们会发现可变的数据结构的问题。随着javascript的最新版本的发布这种情况发生了改变。现在可以创建不可变的对象。本文介绍如何用三种不同的方法来做。对象的不变性意味着我们不希望对象在创建后即以任何方式更改(将他们设置为只读类型)假设我们需要定义一个car对象，并在整个项目中使用它的属性来执行操作。我们不能允许错误的修改任何数据。const myTesla = { maxSpeed: 155, ba

2022-04-21 13:23:40 1549

原创什么是前端工程化？

一、什么是前端工程化虽然前端工程化的概念兴起还没几年的时间，但是对于“工程化”这个词并不是一个新鲜词了，在其他软件开发的领域很早就已经有了高度的工程化，例如Web服务端开发。只不过那个时候，前端工程师并没有工程化的意识，也没有必要对前端进行工程化的操作，毕竟在那个时期，前端的开发工作只能算是整个项目开发过程中的“附属品”。那为什么这几年，前端工程化的概念又突然成为了热点话题了呢？要想讲好前端工程化其实并不容易，我就从下面几个方面入手，对前端工程化的概念做个简单的讲解，仅仅是个人理解，希望大家多多交流讨论。

2022-04-21 10:15:37 860

空空如也

空空如也