2023年最全前端面试项目考点（npm，git，webpack，框架）

目录

模块化规范

懒加载

require与import的区别和使用

js的运行环境

浏览器

Node

特点

npm

项目规范

命令（创建运行）

项目文件结构

package.json

package-lock.json

node_modules

git代码管理

常用命令

分支

git多人协同merge冲突

暂时保存更改

性能优化

webpack打包管理

原理

Babel

loader

plugin

loader和plugin的区别

热加载原理

共性

问项目中有哪些难点，怎么解决的

代码遇到冲突怎么办

个性

介绍

后端接口

登陆注册

分页

弹窗组件modal

---

面试官基本就是照着简历里面的项目技术点切入然后深入展开。

模块化规范

一个模块是实现一个特定功能的一组方法。

1. 由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，几个函数作为一个模块，但是这种方式容易造成全局变量的污染，并且模块间没有联系。
2. 后面提出了对象，通过将函数作为一个对象的方法来实现，但是这种办法会暴露所 有的所有的模块成员，外部代码可以修改内部属性的值。
3. 现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。

• ES6 ：使用 import 和 export 的形式来导入导出模块。
• CommonJS ： require 来引入模块，通过 module.exports 定义模块的输出接口。

这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。

但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。

• AMD ：Asynchronous Module Definition，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。
•  CMD ：Common Module Definition，这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。

AMD是预加载，CMD是懒加载。

AMD是提前执行，CMD是延迟执行。

AMD在对应的加载之前导入，CMD在用的时候导入

懒加载

(Load On Demand)延迟加载、按需加载

可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长(长列表)的场景中。

require与import的区别和使用

require/import

// CommonJS 的写法
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// ES6 的写法
import { func1, func2 } from 'moduleA';

module.exports/export

// commonJS 的写法
var React = require('react');
var Breadcrumbs = React.createClass({
  render() {
    return 
;
  }
});
module.exports = Breadcrumbs;

// ES6 的写法
import React from 'react';
class Breadcrumbs extends React.Component {
  render() {
    return 
;
  }
};
export default Breadcrumbs;

1. 规范：require是CommonJS,AMD规范的模块化语法，import是ECMAScript 6规范的模块化语法，如果要兼容浏览器的话必须转化成es5的语法；CommonJS模块默认export的是一个对象，即使导出的是基础数据类型。
2. 本质：require是赋值过程，其实require 的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量，引入复杂数据类型时，数据浅拷贝该对象。。import是解构过程。
3. 加载：require是运行时加载，import是编译时加载；
4. 位置：require可以写在代码的任意位置，import只能写在文件的最顶端且不可在条件语句或函数作用域中使用；
5. 改变：require通过module.exports导出的值就不能再变，import通过export导出的值可以改变；
    

js的运行环境

脚本语言需要一个解析器才能运行，每一种解析器都是一个运行环境

JavaScript是脚本语言，在不同的位置有不一样的解析器，

浏览器

写入html的js语言，浏览器是它的解析器角色。

浏览器中的js的用途是操作DOM，浏览器就提供了document之类的内置对象。

Node

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，独立于浏览器的运行环境

nodejs中的js的用途是操作磁盘文件或搭建http服务器，nodejs就相应提供了fs,http等内置对象。

特点

• 简单：javascript,json进行编码，
• 强大：非阻塞IO,可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问，
• 轻量：node本身既是代码，又是服务器，前后端使用统一语言;
• 可扩展体：轻松应对多实例，多服务器架构，同时有海量的第三方应用组件。

npm

Node Package Manager ，即：node包管理器

是nodeJS的一个程序包管理和分发的管理工具，npm完全用 JavaScript 写成

允许用户从NPM服务器下载安装上传包

项目规范

整个项目不再使用class组件，统一使用函数式组件，并且全面用Hooks;

所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;

组件内部的状态，使用useState、业务数据全部放在redux中管理;

函数组件内部逻辑代码基本按照如下顺序编写代码:

组件内部state管理;

redux的hooks代码;

其他hooks相关代码(比如自定义hooks);

其他逻辑代码;

返回JSX代码;

redux代码规范如下:

redux目前我们学习了两种模式, 根据自己的情况选择普通模式还是rtk模式

每个模块有自己独立的reducer或者slice，之后合并在一起;

redux中会存在共享的状态、从服务器获取到的数据状态;

网络请求采用axios

对axios进行二次封装;

所有的模块请求会放到一个请求文件中单独管理;

项目使用AntDesign或者MUI(Material UI)

其他规范在项目中根据实际情况决定和编写

命令（创建运行）

npm run start 来运行启动项目并打开页面
npx create-react-app my-app //创建项目
cd my-app
npm start

安装命令：

npx create-react-app 项目名称 --template typescript     
 

项目文件结构

主要开发代码在src目录下。App.js为根组件，index.js为入口模块，index.css为全局样式文件。

package.json

配置jsconfig.json:这个文件在Vue通过脚手架创建项目时自动生成, React是没有自动生成

package.json相当于说明书,其重点字段：

{
  "name": "react-ts-app",
  "version": "0.1.0",
  "private": true,//是否私有，设置为 true 时，npm 拒绝发布
  "dependencies": {//生产环境下，项目运行所需依赖
    "@ant-design/icons": "^4.8.0",
     ...
    "@types/node": "^16.18.6",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "antd": "^5.0.4",
    "axios": "^1.2.1",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.4",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "redux-persist": "^6.0.0",
    "sass": "^1.56.1",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {//执行npm脚本命令简写，比如“start" : "react-scripts start",执行npm start就是运行“react-scripts start"
    "start": "SET PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
....
  "devDependencies": {//开发环境下，项目所需依赖
    "@types/lodash": "^4.14.191"
  }
}

package-lock.json

用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

node_modules

是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。

git代码管理

常用命令

git init 初始化git仓库

git status 查看文件状态

git add 文件列表 追踪文件

git commit -m 提交信息 向仓库中提交代码

git log 查看提交记录

分支

1.分支明细

（1）主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。

（2）开发分支（develop）：作为开发的分支，基于 master 分支创建。

（3）功能分支（feature）：作为开发具体功能的分支，基于开发分支创建

2.分支命令

（1）git branch 查看分支

（2）git branch 分支名称 创建分支

（3）git checkout 分支名称 切换分支

（4）git merge 来源分支 合并分支 (备注：必须在master分支上才能合并develop分支)

（5）git branch -d 分支名称 删除分支（分支被合并后才允许删除）（-D 强制删除）

git多人协同merge冲突

是当前修改是左箭头方向，传入的是右箭头的方向，

中间用等于号分割，等号上边是当前修改（本地），下边是传入的修改（线上的代码）。

两人同时提交可能会出现冲突，解决办法是手动修改冲突

暂时保存更改

存储临时改动：git stash（藏匿）

恢复改动：git stash pop

• 应用场景：

对于多人并行开发，维护同一仓库工作场景，经常会出现文件合并冲突的情况

• 作用：

能够将所有未提交的修改（工作区和暂存区）保存至堆栈中，用于后续恢复当前工作目录。

git add

只是把文件加到 git 版本控制里

性能优化

压缩js，css，js分包，优化图片（webp），开启gzip（后端开启），配置缓存（强制缓存协商缓存），使用cdn，
webpack分包，减少重绘回流

webpack打包管理

它将根据模块的依赖关系进行静态分析，然后将这些模块（ js、css、less ）按照指定的规则生成对应的静态资源，减少了页面的请求。Webpack是以公共JS的形式来书写脚本的，方便旧项目进行代码迁移。

原理

Webpack通过一个给定的主文件（如：index.js）开始找到项目的所有依赖文件，

使用loaders处理它们，plugin可以压缩代码和图片，

把所有依赖打包成一个 或多个bundle.js文件（捆bundle）浏览器可识别的JavaScript文件。

Babel

JavaScript 编译器

将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法，即浏览器兼容的语法，比如将箭头函数转换为普通函数

将jsx转换成浏览器认的js

loader

webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理，最终变为js代码。

• less-loader：将less文件编译成css文件（开发中，会使用less预处理器编写css样式，使开发效率提高）
• css-loader：将css文件变成commonjs模块（模块化的规范）加载到js中，模块内容是样式字符串
• style-loader：创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效
• ts-loader：打包编译Typescript文件

plugin

Plugin解决loader 无法实现的事情，比如打包优化和代码压缩等。

• html-webpack-plugin 处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）
• mini-css-extract-plugin 打包过后的css在js文件里，该插件可以把css单独抽出来
• clean-webpack-plugin 每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除

loader和plugin的区别

运行时机
1.loader运行在编译阶段
2.plugins 在整个周期都起作用

热加载原理

浏览器热更新：开发时能够在浏览器页面中实时看到我们代码的变化产生效果的流程。

热加载是通过内置的 HotModuleReplacementPlugin 实现的

1. 构建 bundle 的时候，监听文件变化。
2. 文件修改会触发 webpack 重新构建，
3. 服务器通过向浏览器发送更新消息，
4. 浏览器通过 jsonp 拉取更新的模块文件，
5. jsonp 回调触发模块热替换逻辑。

共性

问项目中有哪些难点，怎么解决的

代码遇到冲突怎么办

个性

介绍

使用ant-design做ui，redux做状态管理，typescript增加类型，axios网络库

后端接口

1. Navicat创建数据库和空表
2. 加载MySQL等模块
3. 创建MySQL连接池（设置服务器地址host，服务器端口号port） 和 服务器对象server

• （127.x.x.x）是本机回送地址（Loopback Address），即主机IP堆栈内部的IP地址，主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用回送地址发送数据，协议软件立即返回，不进行任何网络传输。
• 3306是MySQL的默认端口
• 默认的服务端口就是8080。
• 跨源资源共享CORS

// 创建MySQL连接池
const pool = mysql.createPool({
  host: '127.0.0.1', //MySQL服务器地址
  port: 3306, //MySQL服务器端口号

  user: 'root', //数据库用户的用户名
  password: '', //数据库用户密码
  database: 'reg_log', //数据库名称
  connectionLimit: 20, //最大连接数
  charset: 'utf8' //数据库服务器的编码方式
});
 
// 创建服务器对象
const server = express();

// 加载CORS模块
const cors = require('cors');

// 使用CORS中间件
server.use(cors({
  origin: ['http://localhost:8080', 'http://127.0.0.1:8080']
}));

登陆注册

示例都使用端口3000作为HTTP服务器的默认监听端口。

3000 是整数。 0 ~ 1023 （常用端口）49152 ~ 65535 号端口是动态端口

//用户注册接口
server.post('/register', (req, res) => {
  //console.log(md5('12345678'));
  // 获取用户名和密码信息
  let username = req.body.username;
  let password = req.body.password;
  ...
  // 将用户的相关信息插入到数据表
   
});
 
// 用户登录接口
server.post('/login', (req, res) => {
  //获取用户名和密码信息
  let username = req.body.username;
  let password = req.body.password;
  // 获取SQL数据并进行判断
  ...
  });
 
// 指定服务器对象监听的端口号
server.listen(3000, () => {
  console.log('server is running...');
})

注册页

​
checkForm() {
      // 点击注册按钮后调用此方法，验证用户名、密码、二次密码是否均正确，正确则发送axios请求
      if (this.checkName() && this.checkPwd() && this.checkrePwd()) {
        console.log(`验证成功，执行注册业务......`);
        // 发送注册(post)请求
        this.axios
          .post("/register", `username=${this.name}&password=${this.pwd}`)
          .then((result) => {
            console.log(result);
            if (result.data.code == 200) {
              // 弹窗提示注册成功
               ...
              // 注册成功后直接跳转到登录页
              this.$router.push("/login");
            } else if (result.data.code == 201) {
              ...
            }
          });
      }


​

分页

currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量）
把所有的数据请求回后，通过arr.slice(开始索引，结束索引)来进行截取每一页的数据；

假设当前页是currentPage = 1，pageSize = 5，那么应该从(currentPage-1)*pageSize开始截取，到currentPage*pageSize结束

弹窗组件modal

.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    ...
    overflow: auto; 
}

// 点击按钮打开弹窗
btn.onclick = function() {
    modal.style.display = "block";
}