Toypipi's blog

发表于 更新于 分类于 本文字数： 91 阅读时长 ≈ 1 分钟

此问题是 chrome vue.js devtools 插件引起的。
我的插件版本号是： Vue.js devtools 6.5.0
操作系统：win7
解决办法：
F12 打开调试控制台 -> 点击 Vue -> 点击右上角竖排三个点 -> 选择 Devtools plugins -> 点击控制台中间的 Vue2 -> 在最右侧 Plugin settings 开启 Legacy Actions 开关

阅读全文 »

发表于 更新于 分类于 本文字数： 68 阅读时长 ≈ 1 分钟

下面这样写无法正确加载背景图片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url('@/assets/image.svg');
}
</style>
阅读全文 »

发表于 分类于 本文字数： 364 阅读时长 ≈ 1 分钟

1.题目描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class EventEmitter {
  constructor() {
    // 创建一个空对象 events，用于存储事件名称和对应的回调函数数组
    this.events = {};
  }
  // 接受两个参数，eventName 事件名称，callback 回调函数
  subscribe(eventName, callback) {
    // 如果 evnets 对象中不存在 eventName 对应的数组，则创建一个空数组
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }

    // 将回调函数添加到对应事件的数组中
    this.events[eventName].push(callback);

    // 返回一个包含 unsubscribe 方法的对象，以允许用户取消订阅
    const unsubscribe = () => {
      const index = this.events[eventName].indexOf(callback);
      if (index !== -1) {
        this.events[eventName].splice(index, 1);
      }
    };

    return { unsubscribe };
  }
  // 接受两个参数，eventName 事件名称和可选的 args 参数数组
  emit(eventName, args = []) {
    // 首先检查 events 对象中是否存在 eventName 对应的数组，如果不存在则返回一个空数组
    if (!this.events[eventName]) {
      return [];
    }

    const results = [];
    // 遍历 eventName 对应的数组，依次调用每个回调函数，并将 args 作为参数传递给它们
    // 将每个回调函数的返回值添加到一个结果数组中
    for (const callback of this.events[eventName]) {
      results.push(callback(...args));
    }
    // 返回结果数组
    return results;
  }
}

// 示例用法
const emitter = new EventEmitter();

// 订阅事件 "myEvent"
const subscription1 = emitter.subscribe("myEvent", (arg1, arg2) => {
  console.log(`Callback 1: ${arg1}, ${arg2}`);
});

// 另一个订阅同一个事件
const subscription2 = emitter.subscribe("myEvent", (arg1, arg2) => {
  console.log(`Callback 2: ${arg1}, ${arg2}`);
});

// 触发事件 "myEvent"，并传递参数
const results = emitter.emit("myEvent", ["Hello", "World"]);

console.log(results); // 输出结果数组

// 取消订阅第一个回调函数
subscription1.unsubscribe();

// 再次触发事件 "myEvent"
emitter.emit("myEvent", ["Goodbye", "EventEmitter"]);
阅读全文 »

发表于 分类于 本文字数： 807 阅读时长 ≈ 3 分钟

1.题目描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var compactObject = function (obj) {
  // 函数首先检查 obj 是否是数组
  if (Array.isArray(obj)) {
    // 如果是数组，它会递归处理数组中的每个元素，并使用 filter(Boolean) 来过滤掉数组中的假值元素
    return obj.map((item) => compactObject(item)).filter(Boolean);
  }

  // 检查 obj 是否是对象
  if (typeof obj === "object" && obj !== null) {
    // 创建一个新的空对象 result，用于存储精简后的属性
    const result = {};
    // 接下来，函数遍历 obj 的所有属性，并将精简后的属性值存储在 result 中，前提是这个属性值不是假值。
    for (const key in obj) {
      // 确保只检查 obj 自身的属性，而不受原型链上属性的影响
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        // 递归处理每个属性值
        const compactedValue = compactObject(obj[key]);
        // 如果属性值为真
        if (Boolean(compactedValue)) {
          // 保存真值属性
          result[key] = compactedValue;
        }
      }
    }
    // 最后，函数检查 result 对象，如果该对象至少包含一个属性，就返回它；否则返回 {}
    return Object.keys(result).length > 0 ? result : {};
  }

  return obj;
};
阅读全文 »
0%