韩子昕-CSDN博客

原创常见react面试题汇总

React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}</li> })} </ul> )} &n

2021-07-30 19:38:17 422 2

React路由SPA单页Web应用(single page web application，SPA)。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取,并在前端异步展现什么是路由一个路由其实就是一个映射关系（k:v）key为路径，value可能是function 或者是 component后端路由：value是function，用来处理客户端提交的请求注册路由：router.get(path,function(req,res)

2021-07-29 20:29:51 496 2

原创 React生命周期和Diff算法

生命周期（旧）组件从创建到死亡，会经过一些特定的阶段React组件中包含一系列钩子函数{生命周期回调函数}，会在特定的时刻调用我们在定义组件的时候，会在特定的声明周期回调函数中，做特定的工作如下图是旧生命周期的结构图：我们通过一个案例更详细的了解这个生命周期： class A extends React.Component{ constructor(props){ console.log("A --- constructor")

2021-07-28 19:57:40 279

原创组件实例的三大属性state,props,refs

组件实例的三大属性state 我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致了。state是组件的私有属性。在React中，更新组件的state，结果就会重新渲染用户界面(不需要操作DOM),一句话就是说，用户的界面会随着状态的改变而改变。state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）案例：1.

2021-07-27 11:07:08 433 7

原创超详细的新手React入门教程

React简介react是什么？为什么学？React入门React 基础案例JSX基础语法两种创建虚拟DOM的方式1.使用JSX创建虚拟DOM2.使用JS创建虚拟DOMjsx语法规则模块与组件、模块化与组件化的理解模块组件模块化组件化函数式组件类式组件react是什么？React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。为什么学？原生JS操作DOM繁琐，效率低使用JS直接操作DOM,浏览器会进行大量的重绘重排原生JS没有组件化编码方案，代码复用低Re

2021-07-26 19:24:38 17076 5

原创高频前端面试问题及答案整理

说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包有三个特性:“1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收请你谈谈Cookie的弊端cookie`虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。第一：每个特定的域名下最多生

2021-07-07 17:30:28 433 14

转载 Vue 3详细版教程

Vue 3尚未正式发布，但是维护者已经发布了Beta版本，供我们的参与者尝试并提供反馈。如果你想知道Vue 3的主要功能和主要变化是什么，那么我将在这篇文章中重点介绍一下，告诉你使用Vue 3 beta 9创建一个简单的应用程序。我将介绍尽可能多的新内容，包括fragments，telepo

2021-07-01 20:08:46 3287 7

原创 TypeScript面向对象类的使用方法

面向对象要想面向对象，操作对象，首先便要拥有对象；要创建对象，必须要先定义类，所谓的类可以理解为对象的模型；程序中可以根据类创建指定类型的对象；举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，不同的类可以用来创建不同的对象；定义类c

2021-06-30 20:56:10 284 17

原创 TypeScript中的基本类型及代码演示(零基础必看)

TypeScript中的基本类型TypeScript中的基本类型：类型声明类型声明是TS非常重要的一个特点；通过类型声明可以指定TS中变量（参数、形参）的类型；指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错；简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值；语法：let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...}

2021-06-29 21:00:58 249 4

原创使用webpack打包编译TypeScript代码

TypeScript打包webpack整合通常情况下，实际开发中我们都需要使用构建工具对代码进行打包；TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS；步骤如下：初始化项目进入项目根目录，执行命令 npm init -y，创建package.json文件下载构建工具命令如下：npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plug

2021-06-28 20:54:16 778 8

原创 32个原生 JS 知识点|面试高频

32个原生 JS 知识点01.数组扁平化02.数组去重03.类数组转化为数组04.Array.prototype.filter()05.Array.prototype.map()06.Array.prototype.forEach()07.Array.prototype.reduce()08.Function.prototype.apply()09.Function.prototype.call10.Function.prototype.bind11.debounce（防抖）13.函数珂里化14.模拟new

2021-06-28 11:09:13 443 6

原创 Vue3快速上手

认识Vue31) 了解相关信息2) 性能提升:3) 新增特性2. 创建vue3项目# 使用 vue-cli 创建# 使用 vite 创建1. Composition API(常用部分)[#](https://24kcs.github.io/vue3_study/chapter4/01_Composition API_常用部分.html#_1-setup)1) setup[#](https://24kcs.github.io/vue3_study/chapter4/01_Composition API_常用部

2021-06-25 20:50:48 250 6

转载 JS闭包的9大经典使用场景

1.返回值（最常用） //1.返回值最常用的 function fn(){ var name="hello"; return function(){ return name; } } var fnc = fn(); console.log(fnc())//hello这个很好理解就是以闭包的形式将 name 返回。2.函数赋值 var fn2; function fn(){ var name="hello"; //将函数

2021-06-24 20:21:59 290 8

原创 TypeScript的安装、使用、自动编译的教程

初识 TypeScript1. 初识 TypeScriptTypeScript 的介绍TypeScript 的特点总结2. 安装 TypeScript3. 第一个 TypeScript 程序编写 TS 程序手动编译代码总结vscode 自动编译1. 初识 TypeScriptTypeScript 的介绍 TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是 JavaScript 的超集，最终会被编译为 JavaSc

2021-06-23 20:53:53 554 4

原创如何通过HR面试

如何通过HR面试如何通过HR面试HR面的目的HR面的常见问题如何看待加班(996)?面对大量超过自己承受能力且时间有限的工作时你会怎么办?你之前在上海为什么现在来北京发展?为什么从上一家公司离职?你还有其他公司的Offer吗?如何与HR谈薪资?如何通过HR面试 HR通常是程序员面试的最后一面,讲道理刷人的几率不大,但是依然有人倒在了这最后一关上,我们会从HR的角度出发来分析如何应对HR面.HR面的目的 &nb

2021-06-21 20:12:12 344 6

原创 Web前端面试题目及答案汇总

1.什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

2021-06-21 17:22:41 1380

转载 2021webpack面试题及答案

关于webpack的面试题随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以

2021-06-11 17:06:03 5130

原创 Webpack 打包其他资源(详解)

打包其他资源需要安装的npm install --save-dev html-webpack-plugin 处理htmlnpm i url-loader file-loader -D处理图片打包HTML资源需要安装 npm install --save-dev html-webpack-plugin下载完还需要引用const HtmlWebpackPlugin = require('html-webpack-plugin');自动会新建一个index.html文件打包图片资

2021-06-10 20:07:18 345

原创最新版Webpack5实战教程（持续更新...）

Webpack简介Webpack是什么？Webpack五个核心概念EntryOutputLoaderPlugingsModeWebpack是什么？Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在Webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块化处理。它将根据模块化的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。Webpack五个核心概念Entry入口（Entry）指示 Webpack 以

2021-06-09 21:19:55 539 1

原创 Git与GitHub基础全套完整版教程（持续更新....）

Git基础1使用Github1-1目的1-2基本概念2 Git在本地的结构3 Git和代码托管中心局域网环境下外网环境下4 Git命令行操作5 基本操作状态查看：vim保存退出命令添加操作：提交操作：查看历史记录：前进后退删除文件并找回比较文件差异分支操作克隆6 解决合并分支后产生的冲突1使用Github1-1目的借助github托管项目代码1-2基本概念仓库（Repository）仓库用来存放项目代码，每个项目代码对应一个仓库，多个开源项目则有多个仓库收藏（Star）收藏项目，方便下次查看

2021-06-08 21:09:08 518

原创【浏览器】973- 前端浏览器缓存知识梳理

在前端性能优化的方式中，最重要的当然是缓存了，使用好了缓存，对项目有很大的帮助。比如我们访问网页时，使用网页后退功能，会发现加载的非常快，体验感很好，这就是缓存的力量。什么是缓存呢？当我们第一次访问网站的时候，比如 juejin.cn，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。缓存有哪些好处？缓解服务器压力，不用每次都去请求某些数据了。2.提升性能，打开本地资源肯定会比请求服务器来的快。3.减少带宽消耗，当我们使用缓存时，只

2021-06-07 20:30:30 125

原创 Git基本操作(详细版)

Git简介基本操作状态查看：git status 查看工作区、暂存区状态添加操作：git add[文件名] 将工作区的“新建/修改”添加到暂存区提交操作：git commit -m “commit message”[文件名] 将暂存区的内容提交到本地库查看历史记录：git log这个是最完整的形式多屏显示控制方式：空格向下翻页、b向上翻页、q退出由于git log显示的太多了,可以用git log --pretty=onelinegit log --oneline这

2021-06-07 20:24:02 145 1

原创让面试官哑口无言的JS奇葩知识，你遇到过吗？

标题久经沙场的前辈们，写了无数代码，踩了无数的坑。但有些坑，可能一辈子也踩不到摸不着，因为根本不会发生在业务代码里～～1Function.prototype 竟然是个函数类型。而自定义函数的原型却是对象类型。typeof Function.prototype === 'function'; // truefunction People() {}typeof People.prototype === 'object'; // true所以我们设置空函数可以这么做：// Good c

2021-06-04 20:07:15 185

原创十分钟带你深入了解什么是移动端？

目标能够知道移动web的开发现状能够写出标准的viewport 视口能够使用移动web的调试方法能够说出移动端常见的布局方案能够描述流式布局能够独立完成移动端页面1.移动端基础浏览器现状pc端常见浏览器360,谷歌,火狐,qq,百度,搜狗,IE移动端常见浏览器uc,qq,欧朋,百度手机,360安全,谷歌,搜狗手机,猎豹国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过了的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样总结

2021-06-04 19:40:56 5257 1

原创前端优化合集

防抖与节流函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。重绘和重排重绘（repaint或redraw）：重绘是指一个元素外观的改变所触发的浏览器行为

2021-06-03 19:30:16 136

原创 ES6 let 与 const 详解

概述解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。解构模型在解构中，有下面两部分参与：解构的源，解构赋值表达式的右边部分。解构的目标，解构赋值表达式的左边部分。数组模型的解构（Array）基本let [a, b, c] = [1, 2, 3];// a = 1// b = 2// c = 3可嵌套let [a, [[b], c]] = [1, [[2],

2021-05-30 20:18:02 236

原创 Es6如何使用箭头函数和使用场景详解

ES6 箭头函数ES6标准新增了一种新的函数：Arrow Function（箭头函数）。箭头函数提供了一种更加简洁的函数书写方式function关键字去掉,在形参括号后面添加符号=> var f = v => v;//等价于var f = function(v){ return v;}f(1); //1如果没有形参,必须保留形参() return 'i miss you'; } fun();对于一个形参而言省略

2021-05-30 18:29:06 250

原创重磅！超详细的JS数组方法整理出来了

数组方法替换(万能)array.splice( )let arr = ['a', 'b', 'c', 'd']// 替换参数: 1)起点 2)长度 3)用什么替换arr.splice(2, 1, 'x','y')console.log( arr ) // ['a', 'b', 'x', 'y', 'd']let arr = ['a', 'b', 'c', 'd']// 插入参数: 1)起点 2)长度 3)用什么替换长度为0 就是插入了arr.splice(2, 0,

2021-05-28 19:29:23 103

原创简单学会用Vue实现购物车功能

首先，还是先把布局写好，和引入vue、bootstrap和准备vue实例，这个不多说，代码如下 <script src="./js/jquery-3.5.1.min.js"></script> <script src="./js/vue.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" hr

2021-05-28 13:46:02 611 1

原创手把手教你Es6的promise对象？及用法讲解 ajax的封装

Promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息可以解决回调地狱（回调函数嵌套回调函数）promise的含义（本身不是异步，是封装异步操作的容器，统一异步的标准）promise对象的特点：对象的状态不受外界影响；一旦状态改变，就不会再变，任何时候都可以得到这个结果前引js中的异步操作有哪些ajax请求 var xhr = new XMLHttpRequest();xhr.onreadystatechange=function(){}

2021-05-25 08:56:41 161

原创 javaScript入门，新手小白也能会

js特点1.这门语言运行在浏览器中，只要有浏览器就能运行js优点1.使用JavaScript可以在客户端进行数据验证，节省服务器端的资源2.可以方便地操纵各种页面中的对象，使网页更加友好3使多种任务仅在客户端就可以完成而不需要网络和服务器的参与，从而支持分布式的运算和处理局限1.兼容性。互联网上有很多浏览器，如FireFox、Internet Explorer、Opera等，但各种浏览器支持JavaScript的程度是不一样的，所以各个浏览器运行JavaScript的效果会有一定的差距，有时甚

2021-05-23 19:50:40 499

原创 web前端面试必问的面试题

1.Vue 组件中 data 为什么必须是函数？在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。2. watch，conputed，methods的区别methods 普通方法没缓存,只有重新渲染页面的时候就会触发他 watch 监听属性想监听哪个属性,那起

2021-05-23 14:08:38 1089

原创 Vue中组件的几种使用，子传父，父传子，ref,动态组件

注册组件全局组件注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。 Vue.component('mycomponent',{ template: `<div>这是一个自定义组件</div>`, data () { return { message: 'hello world' } } })如上方式，就已经创建了一个自定义组件，然后就可以在Vue实例挂在的

2021-05-21 20:24:56 988

原创 vue的基础知识 ( 入门篇 )

一.概述什么是Vue?VueJs是【数据驱动】的【渐进式】前端框架。渐进式：1、可以只是用部分功能，而不用全部实现 2、与第三方很好的兼容VueJs的模型:MVVM模型具体指的是什么?其实就是所谓的数据的双向绑定数据驱动和组件化的前端开发通过简单的API就能实现响应式的数据绑定和组合的视图组件 V view 视图 (页面) VM controller 控制 (控制数据到页面的流程)安装：第一种.script直接引入<script src="h

2021-05-17 21:12:27 397

原创轻松看懂js点名器

css代码<style type="text/css"> .showName { width: 400px; height: 200px; border:2px solid #ccc; margin:100px auto 0px; text-align: center; line-height: 200px; font-size: 32px; } #btn { display: block; margin: 20px auto

2020-11-20 19:02:32 206

原创批量创建构造函数

用构造函数批量创建对象 function Student(a, b, c){ this.name = a this.sex = b this.age = c }构造函数的原型对象 prototype构造函数复制原型对象来创建实例对象给原型对象添加属性和方法, 所有实例对象都可以使用Student.prototype.teacher = '景水'Student.prototype.say = function(){console.log(this.n

2020-11-19 15:23:22 107

原创封装ajax

封装原则把可能会变动的内容,都给弄参数,让用户传递进来 function aa({url,type='get',async=true,data,success,error}){ var xhr=null //1.创建ajax对象 try{ xhr = new XMLHttpRequest()//IE8以下不兼容 }catch(e){ //IE8以下的声明方法

2020-11-10 09:07:08 87

原创 ajax请求的步骤

1.创建ajax对象try{ var ajax = new XMLHttpRequest(); //IE8以下不兼容}catch(e){ //IE8以下的声明方法 var ajax = new ActiveXObjec(Microsoft.XMLHTTP);}2.初始化ajax.open('get','./ajax_get.php?a=b&c=d',true); //参1 请求方式 get post //参2 url //参3 是否异步 true 异步 f

2020-11-10 08:29:13 163

原创 this关键字

概念面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。在方法中，this 表示该方法所属的对象。 var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; }};//

2020-11-05 18:37:52 123

原创什么是闭包？

闭包我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数闭包有3个特性①函数嵌套函数

2020-11-03 19:47:33 99

空空如也

空空如也