【工作记录】week2

day1 23.6.27

1.JS对象复制

在 JS 中，如果直接将一个对象赋值给另一个对象，那么实际上赋值的是该对象的引用，即指向该对象的内存地址。

这就意味着如果修改其中一个变量的属性，另一个变量的属性也会被修改。

如何解决？

1.1 Object.assign()

Object.assign() 方法用于将源对象的所有可枚举属性复制到目标对象中（可以复制多个源对象），并返回目标对象。

我们可以将一个空对象作为目标对象进行传递以实现对象的复制。

例如：

let obj1 = {a: 1, b: 2};
let obj2 = Object.assign({}, obj1);
console.log(obj2); // {a: 1, b: 2}

1.2 利用 ES6 的扩展运算符

ES6 的扩展运算符 (…) 可以将一个对象展开成多个单独的属性，因此可以用来快速实现对象的复制。

例如：

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1};
console.log(obj2); // {a: 1, b: 2}

1.3 JSON的序列化和反序列化

JSON.stringify() 方法用于将一个 JavaScript 对象转换为一个 JSON 字符串，而 JSON.parse() 方法用于将一个 JSON 字符串转换为一个 JavaScript 对象。

因此，可以将一个对象先序列化成一个 JSON 字符串，再反序列化成一个新的 JavaScript 对象，从而实现对象的复制。

例如：

let obj1 = {a: 1, b: 2};
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2); // {a: 1, b: 2}

需要注意的是，该方式无法实现复制对象中的函数属性，因为函数属性会被序列化成字符串，而在反序列化过程中又无法还原成函数

2.函数中的 _that 是干什么的？

在函数中常见到：

var that = this;
const _that = this;

为什么需要这样做？

因为 js 中的 this 指向当前函数所在的对象。而在 js 代码中，难免会出现函数嵌套的情况，当需要在嵌套函数中使用全局的 this 时，如果直接使用 this ，那么这个 this 会指向当前函数所在的对象(即当前函数的上一层函数)，就会导致不能使用到全局对象。

因此，为了使用全局对象，一般会在第一层函数中，让 that = this，即将最外层的全局变量存放到 that 中，那么不论在第几层函数中想要使用最外层全局对象，只需要使用 that 变量即可。

例：

async uploadOrderExcel(...) {
      const _that = this;
      ...;
      this.staffExportOrderExcel({
        ...;
      })
        .then((res) => {
          _that.orderNumber = res.orderNumber;
          ...;
          _that
            .staffExportOrderExcel({
              ...;
            })
            .then(({ fileList }) => {
              ...;
              Object.keys(fileList).map((_) => {
                _that.downloadExcel(fileList[_].url, fileList[_].fileName);
              });
            });
        })
        .catch(function (error) {
          _that.$Message['error']({
            background: true,
            content: error,
          });
          //_that.spinShow = false;
        });

这里可以看到，存在多个函数嵌套的情况，但需要使用最外层全局变量上的 downloadExcel 方法，因此就需要在最开始的第一层函数中，将 _that = this 从而使得后续可以使用最外层全局变量。

3.导入导出Excel的业务逻辑

…

4.Object.keys(…).map(…)

Object.keys(obj)
参数：要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组

在实际开发中，我们有时需要知道对象的所有属性，ES5 引入了Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。

而至于

Object.keys(list).map((key) => {
	list[key];
	...
})

这是一个常用的操作，通常用于取到对象各属性的值，从而做各种处理。

5.埋点

6.OSS以及OSS browser

OSS — 什么是OSS？

OSS browser 是阿里云官方提供的OSS图形化管理工具，提供类似Windows资源管理器的功能。使用ossbrowser，您可以快速完成存储空间（Bucket）和文件（Object）的相关操作。

官方文档地址：图形化管理工具ossbrowser快速入门 (alibabacloud.com)

7.业务推进表

每周二填写业务推进表

1. 对上周任务状态进行补充修改，已完成则填写已上线，未完成则说明原因。
2. 安排本周任务，对任务内容、产出、进行时间进行描述。

注意实时更新业务推进表！

8.iView 表格(table)渲染(render)

在 iView 的 table 组件中，可以使用 Vue 的 render 函数来自定义渲染某一列的内容。

实际使用场景有：

1. 在表格单元中显示多个内容
2. 在数据渲染之前，对其进行处理
3. 前端需要展示的数据与后端返回数据一一对应，但需要转换
4. …

iView表格(table)渲染(render)

---

day2 23.6.28

1.联调

明天…

2.前端提交到灰度环境的流程

完成联调、以及测试环境的测试后，需要将代码部署到灰度环境中进行测试。

开发人员提交灰度环境的流程如下：

1. 在 gitee 中，新建对应需求号的灰度分支。例如：需求号为 I6YMA7，那么开发时会在开发分支 dev-I6YMA7 上进行开发，而提交灰度时，则需要新建一个灰度分支 gray-I6YMA7。
   

2. 新建灰度分支后，在 gitee 仓库的代码评审中，新建代码评审请求，选择自己的开发分支，并将刚刚创建的灰度分支作为目标。
   
   
   并添加需求的相关信息，作为请求的标题。

3. 等待代码评审，根据评审结果对代码进行适当修改。

4. 代码评审通过后，会将代码部署到灰度环境中。

注意：部署到灰度环境中时，需要后端先进行部署，前端再进行部署。否则会报错。

3. code review

简单理解：直系负责人对代码进行检查。

---

day3 23.6.29

1.v-model的number修饰符

在v-model指令后面加上 .number 修饰符，可以将输入的数据转换为 Number 类型。

如果不加这个修饰符 ，则会导致输入的是数字，但其类型实际上是string。

但这里有两个坑：

1. 加上 .number 后，表单验证正则匹配数字，但输入汉字后，仍然会通过。

   其原因在于：.number 会将 input 里的值用 parseFloat() 转化，这样用正则匹配数字后，输入的即使是：‘123四五六’，也不会报错，因为 ‘123四五六’ 被转换成了 ‘123’。

2. 加上 .number 后，因为这里的 .number 指令并不是限制用户输入，而是将用户输入的数据尝试绑定为 js 中的 Number 类型。**如果用户输入的不是数字，这个指令并不会产生任何效果。**这就会导致，输入框支持数字前面带字母，而开头输入数字后，后续无法再输入字母。

2.提交代码流程

1.提交前准备

提交之前，在 vscode 的源代码管理中，对修改过的文件进行格式化：

这里红框中的是修改后的文件，在这个文件中使用 shfit + alt + F

格式化的目的是为了防止提交时因为代码规范检测而导致无法提交！

实际上，在平时写代码时，尽量也多进行格式化。

2.提交操作流程

首先需要切换到对应分支上(因为一般提交后，本地分支会与远程分支建立链接)。

接下来使用：

git add .
git commit -m "feat: XXXXXXX"

然后本地会进行代码检测和代码修复

等待完成后，使用：

git push

但注意第一次提交时，由于还没有与远程分支建立链接，所以会提交失败，需要使用以下命令：

git push --set-upstream origin xxxxxxx	//分支名

以后的提交就不需要这样做了，直接 push 就行。

这样就完成了提交

3.修改前端请求地址

由于前端的请求均使用了封装的 axios.request 方法，所以之间去对应的文件中去改就行。

即 src\libs\api.request.js

4.联调

通俗理解，前后端配合调试接口并初步修改代码。

---