学前端视频笔记

浏览器进程模型

渲染主线程是如何工作的

何为异步

任务优先级

页面渲染

什么是 reflow

什么是 repaint

为什么 transform 的效率高

UI 组件的二次封装

UI 组件的二次封装_ui 的slot-CSDN博客

Vue 基础组件二次封装的高级技巧及方法,能更优雅的进行二次封装组件（Vue3组件封装--继承第三方组件的Methods方法）_vue moment时间处理二次封装-CSDN博客

TypeScript

深入理解 TypeScript 中的 Keyof 运算符，让你的代码更安全、更灵活！-CSDN博客

绝对路径和相对路径

相对路径

相对路径是相对于当前文档位置的路径。它不以斜杠(/)开头。

javascript 复制代码

<img src="images/logo.png">
<a href="about.html">About Us</a>
<script src="js/main.js"></script>

在这些例子中:

"images/logo.png" 指向与当前文件同级的 images 文件夹中的 logo.png
"about.html" 指向与当前文件同级的 about.html
"js/main.js" 指向与当前文件同级的 js 文件夹中的 main.js

相对路径的优点是它们使项目更容易移植,因为文件之间的相对关系保持不变。

绝对路径

绝对路径提供了从网站根目录到文件的完整路径。它以斜杠(/)开头。

javascript 复制代码

<img src="/images/banner.jpg">
<a href="/index.html">Home</a>
<link rel="stylesheet" href="/css/styles.css">

在这些例子中:

"/images/banner.jpg" 指向网站根目录下的 images 文件夹中的 banner.jpg
"/index.html" 指向网站根目录下的 index.html
"/css/styles.css" 指向网站根目录下的 css 文件夹中的 styles.css

绝对路径的优点是它们总是指向同一位置,不管当前页面在哪里。

根相对路径

还有一种特殊类型的路径叫做根相对路径,它以斜杠开头但不包含域名。这种路径相对于当前域的根目录。

javascript 复制代码

<a href="/contact.html">Contact Us</a>

这里,"/contact.html" 指向网站根目录下的 contact.html,不管 post.html 文件位于哪个子目录。

总结

相对路径: 相对于当前文件位置
绝对路径: 从网站根目录开始的完整路径
根相对路径: 相对于网站根目录,但不包含域名

对象数组去重

javascript 复制代码

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;

  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) return false;

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const array = [
  { id: 1, name: 'Alice', details: { age: 25, hobbies: ['reading', 'painting'] } },
  { id: 2, name: 'Bob', details: { age: 30, hobbies: ['coding', 'gaming'] } },
  { id: 1, name: 'Alice', details: { age: 25, hobbies: ['reading', 'painting'] } },
  { id: 3, name: 'Charlie', details: { age: 28, hobbies: ['traveling', 'cooking'] } }
];

const uniqueArray = array.filter((item, index, self) =>
  index === self.findIndex(t => deepEqual(t, item))
);

console.log(uniqueArray);

深度克隆

javascript 复制代码

function isObject(obj) {
  return obj !== null && typeof obj === 'object';
}

function deepClone(obj, hash = new WeakMap()) {
  if (!isObject(obj)) {
    return obj;
  }

  if (hash.has(obj)) {
    return hash.get(obj);
  }

  const constructor = obj.constructor;
  let clone;

  if (constructor === Date) {
    clone = new Date(obj);
  } else if (constructor === RegExp) {
    clone = new RegExp(obj);
  } else {
    clone = new constructor();
  }

  hash.set(obj, clone);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }

  return clone;
}

const originalObject = {
  name: 'Alice',
  age: 25,
  details: {
    hobbies: ['reading', 'painting'],
    address: {
      city: 'New York'
    }
  },
  getGreeting: function() {
    return `Hello, ${this.name}`;
  }
};

const clonedObject = deepClone(originalObject);

console.log(clonedObject);