bytedance（2）

字节实习记录

---

一、关于样式less

less是一门CSS扩展语言，也可以说是CSS预处理器。less简称（Leaner Style Sheets），它相比css新增了如下功能：变量、函数、作用域等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本。

1.1 变量部分

组件FeedListLoadingTip.vue变量设置：rotate_duration: 450ms为声明的变量并给定了值，随后使用@rotate_duration引用。

rotate_duration: 450ms;
.loading-tip {
  padding: 9px 0;
  font-size: 13px;
  line-height: 18px;
  &.loading {
    color: #999;
    .loading-icon {
      display: inline-block;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      animation: rotate @rotate_duration ease-in infinite;
      margin-right: 10px;
    }
  }

1.2 &的用法：

• &：表示父选择器，可以将父子关系变为并且关系，如组件FeedListLoadingTip.vue中：

SCSS
.loading-tip {
  padding: 9px 0;
  font-size: 13px;
  line-height: 18px;
  .test{
    color: #999;
    }
  &.loading {
    color: #999;
    }
   }
进过css编译，即得到如下结果：

CSS
.loading-tip{}
.loading-tip .test{} //父子关系
.loading-tip.loading{} //并且关系
如果&符号在loading后面：.loading&{时，则有父子关系转变：

二、data中的属性的后续添加

2.1 this.$set的方式添加

代码如下（示例）：

  //来自组件oppoV2/AuthorCollections.vue
 this.$set(this.feedListData, tab.type, {
        loadingStatus: '',
        loading: false,
        loadingTip: '精彩内容正在加载…',
        hasMore: true,
        offset: '',
        cardList: [],
      });

• 使用this.$set做添加是因为常规的在methods中新添加属性时，即使添加上了，视图层也并没有更新该数据，vue不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化，使用this.$set为对象添加属性之后，他的对象身上多了set方法，所以，此时再次操作该属性的时候，就会引起视图的更新。

三、 异步操作

3.1 async结构

• async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。
• async函数可能包含多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。

async handleExport() {
      try {
        this.loading = true;
        const queryParams = generateQueryParams(this.queryParams);
        await whiteListService.download(queryParams);
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    }

触发try，等待whiteListService.download方法获得返回结果，然后进程结束，触发finally部分结束这个async。catch是捕捉发生的错误。
代码如下（示例）：

3.2 promise

2.3.1 promise all

• Promise.all(promiseArray)方法是Promise对象上的静态方法，该方法的作用是将多个Promise对象实例包装，生成并返回一个新的Promise实例。
• 在上面的方法中，promise数组中所有的promise实例都变为resolve的时候，该方法才会返回，并将所有结果传递results数组中。promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象。reject使用示例如下：

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 5000, 'foo');
});

Promise.all([promise3, promise2, promise1]).then((values) => {
  console.log(values);
});




var p1 = Promise.resolve(1),
    p2 = Promise.reject(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    //then方法不会被执行
    console.log(results); 
}).catch(function (e){
    //catch方法将会被执行，输出结果为：2
    console.log(2);
});

2.3.2 promise resolve

Promise.resolve(value);

value将被Promise对象解析的参数，也可以是一个Promise对象，或者是一个thenable。返回一个带着给定值解析过的Promise对象，如果参数本身就是一个Promise对象，则直接返回这个Promise对象, 静态方法 Promise.resolve返回一个解析过的Promise对象。

const promise1 = Promise.resolve(123);

promise1.catch((value) => {
  console.log(value);
  // expected output: 123
});

2.3.3 promise的链式结构

• 上一个的输出返回值作为下一个的输入，即使没有return也会进行下一个。当 .then() 中缺少能够返回 promise 对象的函数时，链式调用就直接继续进行下一环操作。因此，链式调用可以在最后一个 .catch() 之前把所有的 handleRejection 都省略掉。类似地， .catch() 其实只是没有给 handleFulfilled 预留参数位置的 .then() 而已。
• 链式调用中的 promise 们就像俄罗斯套娃一样，是嵌套起来的，但又像是一个栈，每个都必须从顶端被弹出。链式调用中的第一个 promise 是嵌套最深的一个，也将是第一个被弹出的。

四、this.$nextTick()的回调应用

• this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

his.$nextTick(() => {
          this.$refs.form.validate();
        });

五、关于对前端传入后端的数据做改动

5.1 trim

trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）。

5.2 set

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。此处的…set是为了去除重复元素。

5.3 split

split() 方法用于把一个字符串分割成字符串数组，括号里的即为分割标识。

5.4 Object.keys

Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致，将输入的queryParams中的键名进行遍历，对其格式进行修整方便传入后端进行处理。

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

5.5 Object.values()

Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']