RoastDuck

主题

常面常新-1016 ​

git回滚操作 ​

  • 撤销工作目录中的更改：如果还没有将更改提交到仓库，可以使用git checkout -- <file>来撤销工作目录中的更改

  • 撤销暂存区的更改：可以使用git reset HEAD <file>命令来撤销暂存区的更改

  • 回退到之前的提交：想要撤销最近的一次或多次提交，使用git revert <commit-hash> 命令

  • 交互式变基：需要对多个提交进行复杂的更改，可以使用git rebase命令的交互式模式

git分支管理 ​

使用原因：

  1. 并行开发：分支允许开发者在隔离的环境中工作，这意味着多个开发者可以同时在不同的分支上进行开发，而不会相互干扰。这有助于提高团队的协作效率。

  2. 功能开发：每个分支可以用于开发一个特定的功能或修复一个特定的问题。这样，当一个功能开发完成并通过测试后，可以将其合并回主分支，而不会影响主分支上的其他开发工作。

相关命令：

  • 创建分支：使用git branch <branch-name>来创建一个新的分支

  • 切换分支：使用git checkout <branch-name>或 git switch <branch-name>（Git 2.23+）来切换到指定的分支

  • 使用git merge <branch-name>将指定分支合并到当前分支

Vue3 Hooks VS Vue2 Mixins ​

Vue 3的Composition API中的Hooks与Vue 2中的Mixins都旨在实现代码的复用，但它们在设计理念和使用方式上存在一些差异。

...哥们学名没听懂，真该死啊

Vue 2 Mixins ​

  • 代码示例：

    js
    export const myMixin = {
  data() {
    return {
      count: 0,
    };
  },
  mounted() {
    console.log("Component mounted");
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
export default {
  mixins: [myMixin],
};

Mixins是Vue 2中用于代码复用的一种机制，允许将组件中的可复用功能抽象成可重用块，通过mixins选项将这些功能混入到组件中。

  • 优点：

  1. 简单易用：对于简单的逻辑复用，Mixins使用起来非常方便。

  2. 兼容性好：Vue 2的Mixins已经存在很长时间，社区有大量的现成Mixins可以直接使用。

  • 缺点

  1. 命名冲突：如果多个Mixins中有相同的属性或方法名，可能会导致命名冲突，难以调试。

  2. 逻辑分散：相关逻辑可能分散在多个生命周期钩子中，使得代码难以维护和理解。

  3. 类型支持差：TypeScript支持较差，因为Mixins是基于对象的，类型推断不如Composition API好。

Vue 3 Hooks ​

  • 代码示例：
js
import { ref, onMounted } from "vue";

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log("Component mounted");
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

优点：

  1. 逻辑更清晰：Composition API允许你将相关逻辑组织在一起，而不是分散在生命周期钩子中，使代码更易读和维护。 更好的类型支持：

  2. TypeScript支持更好，因为Composition API是基于函数的，可以更容易地推断类型。

  3. 更灵活：可以在函数中使用响应式数据和生命周期钩子，使得逻辑复用更加灵活。

  4. 避免命名冲突：Composition API使用函数来组织逻辑，避免了Mixins中可能出现的命名冲突问题。

父子组件生命周期顺序 ​

创建阶段 ​

  • 父组件 beforeCreate
  • 父组件 created
  • 父组件 beforeMount
  • 子组件 beforeCreate
  • 子组件 created
  • 子组件 beforeMount
  • 子组件 mounted
  • 父组件 mounted

更新阶段 ​

  • 父组件 beforeUpdate
  • 子组件 beforeUpdate
  • 子组件 updated
  • 父组件 updated

销毁阶段 ​

  • 父组件 beforeDestroy
  • 子组件 beforeDestroy
  • 子组件 destroyed
  • 父组件 destroyed

TypeScript高级类型 ​

  1. 交叉类型（Intersection Types）

    交叉类型用于将多个类型合并为一个类型。新类型将具有所有合并类型的属性。

  2. 联合类型（Union Types）

    联合类型表示一个值可以是几种类型之一。

  3. 类型别名（Type Aliases）

    类型别名用于为类型创建新名称。

  4. 可辨识联合（Discriminated Unions）

    可辨识联合是一种类型保护模式，通常与联合类型和字面量类型一起使用。

  5. 索引类型（Index Types）

    索引类型用于检查对象的动态属性。

  6. 映射类型（Mapped Types）

    映射类型用于将一个类型的所有属性转换为另一个类型。

  7. 条件类型（Conditional Types）

    条件类型根据条件表达式返回不同的类型。

  8. 内置类型工具（Utility Types）

    TypeScript提供了一些内置的类型工具，用于常见的类型转换。

cookie、localstorage、SessionStorage ​

  1. Cookie
  • 存储大小：每个cookie的大小限制为 4KB 左右。
  • 生命周期：可以设置过期时间。如果未设置过期时间，cookie在浏览器会话结束时失效。
  • 作用域：可以指定cookie的作用域（域名和路径）。
  • 安全性：可以设置HttpOnly和Secure 属性，增强安全性。
  • 用途：通常用于会话管理、用户跟踪和存储少量数据。
  1. LocalStorage
  • 存储大小：每个域名可以存储约5MB的数据。
  • 生命周期：数据持久化存储，除非手动删除，否则不会过期。
  • 作用域：仅限于同源的所有页面。
  • 安全性：数据以明文形式存储，容易被XSS攻击获取。
  • 用途：适用于存储较大且需要持久化的数据，如用户设置、应用状态等
  1. SessionStorage
  • 存储大小：每个域名可以存储约5MB的数据。
  • 生命周期：数据在页面会话期间有效，关闭页面或浏览器后数据被清除。
  • 作用域：仅限于同源的单个页面会话。
  • 安全性：数据以明文形式存储，容易被XSS攻击获取。
  • 用途：适用于存储临时数据，如表单数据、页面状态等。

前端加密的方法 ​

在前端开发中，加密是保护敏感数据的一种重要手段。以下是一些常见的前端加密方法：

  1. 哈希算法（Hashing）

    哈希算法将输入数据转换为固定长度的字符串，常用于密码存储和数据完整性校验。常见的哈希算法有MD5、SHA-1、SHA-256等。

  2. 对称加密（Symmetric Encryption）

    对称加密使用相同的密钥进行加密和解密。常见的对称加密算法有AES、DES等。

  3. 非对称加密（Asymmetric Encryption）

    非对称加密使用一对密钥（公钥和私钥）进行加密和解密。常见的非对称加密算法有RSA、ECC等。

  4. Base64编码(非加密方法)

    Base64编码是一种将二进制数据转换为文本字符串的编码方法，常用于数据传输和存储。需要注意的是，Base64不是加密方法，只是一种编码方式。

  5. HMAC（Hash-based Message Authentication Code）

    HMAC使用哈希函数和密钥生成消息认证码，用于验证数据完整性和真实性。

事件代理 ​

事件代理（Event Delegation）是一种将事件处理程序添加到父元素，而不是每个子元素的技术。通过利用事件冒泡机制，父元素可以处理其子元素触发的事件。这种方法可以提高性能，特别是在需要处理大量子元素的情况下。

事件冒泡机制 ​

在了解事件代理之前，首先需要了解事件冒泡机制。事件冒泡是指当一个事件在元素上触发时，事件会从目标元素开始，逐级向上传播到父元素，直到根元素（document）。

事件代理的优点 ​

  1. 减少内存消耗：只需要在父元素上绑定一个事件处理程序，而不是在每个子元素上绑定事件处理程序。

  2. 动态元素处理：可以处理动态添加的子元素，而不需要重新绑定事件处理程序。

  3. 简化代码：减少了重复代码，使代码更简洁易读。

前端模块化 ​

前端模块化是指将代码分割成独立的、可复用的模块，每个模块封装特定的功能或逻辑。模块化可以提高代码的可维护性、可读性和复用性。

以下是前端模块化的几种常见方式：

  1. IIFE（立即执行函数表达式）

    IIFE是一种早期的模块化模式，通过函数作用域来避免全局变量污染。

  2. CommonJS

    CommonJS 是Node.js中的模块化标准，使用require和module.exports来导入和导出模块。

  3. AMD（Asynchronous Module Definition）

    AMD 是一种用于浏览器的模块化标准，使用define和require来定义和加载模块。RequireJS 是一个常见的AMD实现。

  4. ES6模块（ESM）

    ES6模块是现代JavaScript的模块化标准，使用import和export来导入和导出模块。

CommonJS 和 ES6 ​

CommonJS ​

CommonJS是Node.js中使用的模块化规范，主要用于服务器端开发。它使用require和module.exports来导入和导出模块。

  • 特点
    1. 同步加载：模块在运行时同步加载，适用于服务器端环境。
    2. 单个导出对象：每个模块导出一个对象，该对象包含所有导出的成员。
    3. 动态加载：可以在代码的任何地方动态加载模块。

ES6 ​

ES6 模块化是现代JavaScript的模块化标准，使用import和export来导入和导出模块。它主要用于浏览器端开发，但也可以在支持ES6的服务器端环境中使用。

  • 特点

    1. 静态加载：模块在编译时静态解析，适用于浏览器端和现代JavaScript环境。
    2. 多种导出方式：支持命名导出和默认导出。
    3. 严格模式：ES6模块默认在严格模式下运行。
    4. 顶层作用域：每个模块都有自己的顶层作用域，不会污染全局作用域。

前端新技术 ​

SSR ​

服务器端渲染（Server-Side Rendering, SSR） 是指在服务器端生成HTML内容，并将其发送到客户端进行显示。与客户端渲染（Client-Side Rendering, CSR）不同，SSR可以在页面加载时提供完整的HTML内容，从而提高首屏加载速度和SEO友好性。

tailwindcss ​

Tailwind CSS 是一个实用优先的CSS框架，提供了一组低级别的工具类，用于快速构建自定义设计。与传统的CSS框架（如Bootstrap）不同，Tailwind CSS不提供预定义的组件，而是提供了一组灵活的工具类，允许开发者根据需要组合和定制样式。

  • 使用Tailwind CSS构建一个简单的页面：
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet" />
  </head>
  <body class="bg-gray-100 p-8">
    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
      <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img
            class="h-48 w-full object-cover md:w-48"
            src="https://via.placeholder.com/150"
            alt="Placeholder Image" />
        </div>
        <div class="p-8">
          <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Tailwind CSS</div>
          <a
            href="#"
            class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
            Building with Tailwind CSS
          </a>
          <p class="mt-2 text-gray-500">
            Tailwind CSS is a utility-first CSS framework for rapidly building custom designs.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

如有转载或 CV 的请标注本站原文地址

Copyright © 2024-present RoastDuck