qq_36967515的博客

原创 React学习

React学习

原创 VUE面试题

1、2、3、

原创 前端2024

1、什么叫做执行栈，什么叫做执行上下文？2、闭包的理解、闭包的作用、闭包所带来的的问题？3、js的作用域和作用域链？4、js的原形和原型链？5、typeof和instanceof的区别？ instanceof的原理？6、为什么typeof null是object?7、字面量创建对象和new创建的对象有什么区别？new内部做了什么？8、new创建的对象和Object.create(null)创建出来的对象有什么区别？9、js的继承方式有哪些以及各种方式的优缺点？10、垃圾回

原创 工作中遇到的技术问题

字符串如何删除最后一个元素

原创 vite与webpack?

vite对比react-areate-app1、构建速度2、打包速度3、打包文件体积

原创 react中如何使用i18n国际化

react中如何使用i18n国际化

原创 canvas如何将多张连续图片拼接成一张动画？

canvas如何将多张连续图片拼接成一张动画

原创 react开发订票网站

react子组件接收父组件的参数传递，并且限制约束？

原创 JS的设计模式与常规笔试题

js的设计模式

原创 a-upload自定义上传图片

【代码】a-upload自定义上传图片。

原创 elementUI-input只能输入纯数字

elementUI-input只能输入纯数字。

原创 RAIL标准

原创 网络层HTTP面试题

1、跨域的方式有哪些？各有什么特点？2、讲一下三次握手和四次挥手？以及为什么是三次？ 为什么是四次？3、HTTP和HTTPS的区别？4、讲讲HTTP的缓存？5、TCP和UDP有什么区别？6、浏览器输入URL后都经历了什么？7、什么是CDN？8、什么是xss？什么是CSRF？9、...

原创 Nuxt如何使用 vuex以及Nuxt版本问题

1、首先看一下自己的Nuxt的版本 nuxt-v如何是2.4.0之前的版本， 写法和正常的vue一样index.jsimport Vue from 'vue'import Vuex from 'vuex'import geo from './modules/geo'import home from './modules/home'Vue.use(Vuex)const store = () => new Vuex.Store({ modules: { geo

原创 next路由钩子

import { Button } from 'antd'import Link from 'next/link'import Router from 'next/router'function HomePage() { function toA() { Router.push({ pathname: '/a', query: { id: 3 } }) } Router.events.on('routeChangeS..

原创 next集成antd

npm i install antdnext默认不支持css样式，需要npm i @zeit/next-cssnpm i babel-plugin-importnpm i antd一、创建next.config.js文件// 让nextjs支持css的配置const withCss = require('@zeit/next-css')if (typeof require !== 'undefined') { require.extensions['.css'] =

原创 前端-微前端

什么是微前端？单实例：即同一时刻只要一个子应用被展示，子应用具备一个完整的生命周期多实例：通常用URL的转换来切换子应用系统的稳定性当一个实际的系统处于一个平衡的状态时,如果受到外来作用的影响时,系统经过一个过渡过程仍然能够回到原来的平衡状态,我们称这个系统就是稳定的,否则称系统不稳定系统的健壮性 计算机软件在输入错误、磁盘故障、网络过载或有意攻击情况下,能否不死机、不崩溃就是该软件健壮性的具体表现。 解释:一个系统容错能力强,运行不...

原创 node如何使用mongoose？

如何使用mongoose

原创 TS的静态属性、Setter和Getter、抽象类

抽象类abstract class Geom{ // 抽象类只能被继承，不能创建实例 abstract getArea(): number // 如果子类继承了抽象类，那么抽象方法也要在子类中写一下}class Cricl extends Geom { getArea(): number { return 123 }}...

原创 TS-Base

TS基础知识

原创 TS interface 接口与type的区别？

tsc --init 初始化环境tsc --demo.ts ---> demo.jsts-node 依赖安装 ts-node demo.tsinterface Person { // readonly name: string, // 代表这个属性是可读，不可写 name: string, age?: number, // 代表这个属性可有可无 [propName : string] : any, // 代表除了name以外，还可以有其他的参数，可以是任.

原创 TS基础变量

// ts比js的优势就是首先在编写的时候，就可以及时发现代码的错误，但是js必须在执行的时候才知道// 编辑器更好的提示interface point { x: number, y: number}function add(data: point) { return Math.sqrt(data.x ** 2 + data.y ** 2)}add({x: 1, y: 22})// 基础类型const a: number = 1const b: string = ...

原创 koa2中间件

koa2中间件原理

原创 Babel处理es6语法

npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-dev // 语法转义npm install --save @babel/polyfill // 往低版本浏览器中添加缺失的js对象和方法module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, // 第三方.

原创 webpack devserver和热模块替换

1、在打包的时候如果每次运行都需要执行打包命令，会显的比较麻烦，这个时候可以在package.json中配置 --watch 启动监听， 但是如果想要深层次的操作，比如自动打开浏览器，就要启用devserver这个配置了。"scripts": { "start": "webpack-dev-server" },const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin')

原创 sourceMap的配置

sourceMap是一个映射关系，比如代码写错，但是打包成功，在程序运行时发现错误，提示的错误却是在打包后的js文件中，那我们如何将报错信息提示到本地文件中const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = { mode

原创 entry和output的基础配置

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = { mode: 'development', entry: { main: './src/index.js', sub: './src/index.js' }, .

原创 plugins

npm install --save-dev html-webpack-pluginnpm install --save-dev clean-webpack-pluginconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = {.

原创 loader打包静态文件

file-loadermodule: { rules: [{ test: /\.(jpg|png|gif)$/, use: { loader: 'file-loader', options: { // placeholder 占位符 name: '[name]_[hash].[ext]', // 打包出来的图片以原来的名字加hash值来命名 outputPath: 'img/' // 打包的文件在dist文件夹下的img文件夹中 } .

原创 loader是什么？

loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。在 webpack 的配置中，loader有两个属性：test属性，识别出哪些文件会被转换。 use属性，定义出在进行转换时，应该使用哪个 loader。const path = require('path');module.exports = { output: { filename: 'my-first-webpack.bundle.js',...

原创 webpack的配置文件

我们在执行了npm init之后， 需要在项目内安装webpacknpm install webpack@4.26.0 webpack-cli@3.1.2 -D 默认安装最新的，我这是安装了指定版本，并没有全局安装，全局安装会出现不同的项目因为webpack版本不一致问题导致打包失败，安装完成npx webpack -v 查看版本webpack打包都会有一个默认的配置文件 ，官方使用的是webpack.config.js 但是这个也可以更改使用 npx webpack --...

原创 为什么服务端渲染对SEO更加友好？

如果是客户端渲染出来的内容，搜索引擎大多数不识别js渲染出来的内容，如果搜索引擎抓取不到网站的内容，他们就会觉得你的网站没有太多的价值。不推荐Title 和 Description真正作用？第三代或者第二代的搜索引擎，会根据整个网站的文本去分析出来的你整个网站的基本信息，当用户搜索的时候，相关推荐如果匹配你的文案，也会推荐出来相应的网站。所以通过title和Description中的文字，在现在的搜索引擎中靠前排名，基本上没多大意义，但是搜索出来的标题一般由什么决定的呢。一般是title标签

原创 服务端渲染如何支持css样式修饰

1、clientconst clientConfig = { mode: 'development', entry: './src/client/index.js', // 入口 output: { // 打包的文件要放在哪里去 filename: 'index.js', // 打包之后起的名字 path: path.resolve(__dirname, 'public') // 打包过后将文件放在哪个目录下 }, module: { rules: [

原创 数据的脱水和注水

数据的脱水和注水

原创 node中间层是什么

一般情况下node只负责中间层，只负责第一次的渲染页面，后面的请求全部丢给浏览器渲染与java后端接口的通信，就不在关node的事了。当我们遇到用户频繁刷新浏览器向node服务器发起请求，我们可以通过增加机器或者增加node数量来解决高并发的问题。...

原创 webpack-merge工程代码优化

npm install webpack-merge --save 安装抽离公共部分webpack.base.jsmodule.exports = { module: { // 打包过程中配置的规则 rules: [{ test: /\.js?$/, // 检测以JS结尾的文件 loader: 'babel-loader', // 语法的编译器 使用需要安装 exclude: '/node_modules/', // 一些外部文件不需要编译

原创 让React代码在浏览器上运行

1、Home文件import React from 'react';const Home = () => { return ( <div> <div>hello world</div> <button onClick={() => alert('click')}>click</button> </div> )}export default Home;2、创建

原创 简单实现SSR?

Home文件import React from 'react';const Home = () => { return <div>这是一个演示地址</div>}export default Home;import express from 'express';import Home from './containers/Home';import React from 'react';import {renderToString} from 'r.

原创 服务端webpack的配置？

// webpack.server.jsconst path = require('path')const nodeExternals = require('webpack-node-externals')module.exports = { target: 'node', // 确定打包的是服务端的代码 mode: 'development', entry: './src/index.js', // 入口 output: { // 打包的文件要放在哪里去 filename.

原创 什么是服务端渲染？

SSR和CSR/缓存类型