项目常见问题（根据自身项目）

最新推荐文章于 2024-10-16 16:26:58 发布

炫迈905

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量361

点赞数 1

文章标签： javascript 前端 react

本文链接：https://blog.csdn.net/weixin_56299841/article/details/126165637

版权

微信小程序上线流程

提交代码（上传 - 跨域设置 - 设置版本号）
设置为体验版
提交审核
发布上线

localStroage 满了之后怎么办

设置域名：各域名下的存储空间由各业务组统一规划使用
跨页面传数据：考虑单页应用，优先采用 url 传数据
清除别人的

webpack 如何构建项目（create-react-app时已经自动配置 webpack）

初始化项目yarn init -y，生成 package.json 文件
生成项目的目录结构
安装基础依赖：yarn add webpack webpack-cli webpack-dev-server
下载文件对应的加载器，然后再 webpack.config.js 当中配置 module 的语法规则

下载 style-loader 和 css-loader，然后再 webpack.config.js 当中配置语法规则，用来打包 css文件
下载 less、less-loader、css-loader、style-loader，然后配置语法规则，用来打包 less文件
下载 url-loader、file-loader ，配置语法规则，用来打包图片文件

为什么要使用 webpack

webpack 根据依赖关系把不同的模块根据不同规则打包成一个或多个文件，对代码重新加载翻译，合并静态资源，提高了开发效率和项目的可维护性。

瀑布流如何实现

插件
原生 js 实现

state = {
	imgs: [...],
	newImages: [
		{
			height: 0, // 用于记录当前列的总高度
			imgs: [...], // 这里保存所有第一列的图片对象
		},
		{
			height: 0, // 用于记录当前列的总高度
			imgs: [...], // 这里保存所有第二列的图片对象
		},
		...
	]
}

// 封装函数: 从newImages获取高度最低的那一列对象, 用于后续整理原始数据imgs.
 getMinHeightObj() {
   const allColumnHeights = this.state.newImages.map(
     item => item.height
   ); // 先获取所有列的高度值, 放在数组中
   // const minHeight = Math.min(200, 100, 30);
   const minHeight = Math.min(...allColumnHeights); // 从数组中获取高度最低的高度值
   const idx = allColumnHeights.findIndex(
     height => height === minHeight
   ); // 根据这个最低高度, 从newImages中, 获取它所在对象
   return this.state.newImages[idx]; // 返回这个对象
 }

 // 整理原始数据imgs的方法, 将imgs中所有的图片对象, 分别保存至第一列和第二列数组中.
 formatImages() {
   this.state.imgs.forEach(item => {
     let minColumnObj = this.getMinHeightObj();
     minColumnObj.imgs.push(item);
     // minColumnObj.height += parseInt(
     //   item.img.split("=")[1].split("x")[1]
     // );
     // 根据图片真实宽高, 以及css中的确定宽度, 动态计算图片的css高度.
     minColumnObj.height += (item.height * 236) / item.width;
     // 将这个计算出来的css高度, 保存到图片对象上. 否则图片高度自适应了.
     item.cssHeight = (item.height * 236) / item.width + "px";
   });
   this.forceUpdate();
 }

如何接入百度地图

注册成为开发者
点击开发文档，找到JavaScript API，详细的开发文档可以参考这里的
点击进入控制台，找到应用管理，进入我的应用，创建应用
填写应用名称和应用类型，并勾选所需的服务，并限制访问的白名单后提交

注意：只有在白名单中的网站才能成功发起调用

提交成功之后我们就可以看到自己的应用AK了
在需要的位置直接调用 API 即可

视口的宽度

在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，视口是浏览器窗口的大小。
在大多数移动设备中，浏览器是全屏的，视口是整个屏幕的大小。
在全屏模式下，视口是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比视口长或宽。

概括：视口就是当前文档的可见部分。

js 实现轮播图

把图片放在一个数组中，定义 index，给轮播图父组件定义固定宽高，给可视区设置 overflow:hidden，position:absolute，把第一张图片放在最后一张，使用 setTimeout 计时器，每多长时间更改一次，里面设置偏移量和 index++，判断 index 值，当 index 最大的时候，让 index=0，同时改变 css 样式为 left:0

setTimeout 和 setInterval 的区别

setTimeout：延时器，只执行一次。
setInterval：定时器，每隔 n 秒执行一次。

你封装过什么公共组件

导航栏，footer、输入框等

Echarts 如何使用（yarn）

安装 Echarts：yarn add echarts
在 index.js 中全局引入：import * as echarts from 'echarts';
按需引入 ECharts 图表和组件（参考官方文档）

系统退出流程

点击按钮，退出，调转到登录页面
同时清除 token

前端国际化

所谓前端国际化，就是根据用户的语言设置以及浏览器的环境计算出网站能支持的一种语言，然后将网站的文案替换为对应语言的文案

ES6 中的 class 类

在ES6中，class (类) 作为对象的模板被引入，可以通过 class 关键字定义类。class 的本质是 function 。它可以看作是一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

创建类：

class Example {
    constructor(a) {
        this.a = a;
    }
    test() {
		console.log("test");
	}
}
// 注意：不可重复声明

类是对事物的抽象，如下特点：有两个成员，属性、方法；构造函数，给对象动态添加属性。并返回该对象。
类的实例化：

let 对象名 = new 类名(实参);

总结：
1. 通过 class 关键字声明类。大驼峰的命名规范。
2. constructor() 是构造函数，接收参数，并对属性进行初始化，然后返回这个对象。
3. new 关键字，创建对象。new 的本质是申请内存空间。
4. 方法的声明，省略 function
5. 多个函数不需要逗号切割。
6. 使用 extends 继承父类。

后端返回的数据过多如何处理

分次加载数据
滚动加载数据

如何上传文件（头像）、下载文件

上传文件：
1. form 标签中，设置 “method=post” 和 encType=“multipart/form-data”
2. 在 form 标签中使用 input type=file 添加上传的文件
3. 编写服务器代码（不同的框架提供了不同的获取输入流的方式）接收，处理上传的数据。

axios 拦截器

请求拦截器

axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么，例如加入token
    .......
    return config; 
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

响应拦截器

axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    ......
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });