当前位置：首页 > article >正文

9.25盒马鲜生一面

article 2024/11/20 13:22:12

1.自我介绍

2.css两种盒子模型

3.rem和em

4.px概念

5.transition和animation的区别

6.移动端适配方案

7.vh、vw、%

8.js基本数据类型

9.call、apply、bind的区别

10.js实现继承的方法

11.get和post的区别

12.web安全（XSS，CSRF）

XSS（跨站脚本攻击）

CSRF（跨站请求伪造攻击）

13.跨域

14.vue2/vue3的响应式原理

15.vue新增的特性

16.有没有做过很有成就感的项目

17.做项目时碰到的难点

18.平时怎么学习前端的知识的

反问

内容参考

1.自我介绍

2.css两种盒子模型

3.rem和em

4.px概念

像素（px）是显示器或屏幕上最小的可控单位，表示图像或文本在屏幕上的大小。它是一个绝对单位，通常用来衡量界面元素的宽度、高度、边距、内边距、字体大小等。

5.transition和animation的区别

6.移动端适配方案

在移动端开发中，通过在 HTML 的 <head> 部分添加 viewport 的 meta 标签，可以控制页面的缩放和适应手机屏幕的大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：设置 viewport 的宽度为设备的宽度。
initial-scale=1.0：设置初始缩放比例为 1。

使用 rem 单位可以让页面的元素相对于根元素（<html>）的字体大小进行缩放，便于响应式设计。同时，结合媒体查询可以针对不同屏幕尺寸进行调整。


    html {
        font-size: 16px; /* 基础字体大小 */
    }

    .container {
        width: 80rem; /* 80 * 16px = 1280px */
        margin: 0 auto;
    }

    @media (max-width: 600px) {
        html {
            font-size: 12px; /* 小屏幕下字体缩小 */
        }
        .container {
            width: 90rem; /* 90 * 12px = 1080px */
        }
    }

vw 和 vh 单位分别代表视口宽度和视口高度的百分比。使用这些单位可以方便地创建相对布局。

<style>
    .full-screen {
        width: 100vw; /* 100% 的视口宽度 */
        height: 100vh; /* 100% 的视口高度 */
        background-color: #181818;
    }
</style>

<div class="full-screen">
    Hello, World!
</div>

100vw：占满整个视口的宽度。
100vh：占满整个视口的高度。

使用百分比来设置元素的宽度和高度可以使布局具有更好的灵活性，但需要注意父元素的宽度。

<style>
    .parent {
        width: 500px; /* 父元素固定宽度 */
        height: 300px; /* 父元素固定高度 */
        background-color: lightgray;
        position: relative;
    }

    .child {
        width: 50%; /* 子元素占父元素宽度的 50% */
        height: 50%; /* 子元素占父元素高度的 50% */
        background-color: blue;
        position: absolute;
        top: 0; /* 垂直居顶 */
        left: 0; /* 垂直居左 */
    }
</style>

<div class="parent">
    <div class="child">子元素</div>
</div>

7.vh、vw、%

8.js基本数据类型

9.call、apply、bind的区别

10.js实现继承的方法

原型链继承：将父类的实例作为子类的原型，通过 prototype 进行继承

构造继承：将父类的实例属性复制给子类，通过 call 进行继承

实例继承：为父类实例添加新特性，作为子类实例返回

拷贝继承：将父类实例通过循环拷贝给子类

组合继承：就是原型链继承和构造继承，一起使用

寄生组合继承：通过寄生方式，砍掉父类的实例属性，避免了组合继承中，在调用两次父类的构造时，初始化两次实例方法/属性的缺点

11.get和post的区别

12.web安全（XSS，CSRF）

XSS（跨站脚本攻击）

概念：
XSS 是一种安全漏洞，攻击者可以通过向用户提交的数据中注入恶意代码（如 JavaScript），从而在用户的浏览器中执行这些代码。这可能导致用户的敏感信息（如 Cookies、会话令牌等）被窃取。

修复方式：

对实体字符进行转义：在服务器端对用户输入的数据进行转义，防止浏览器将输入的代码作为可执行脚本解析。
- 例如，将 < 转义为 <，> 转义为 >。
使用 HTTP-only Cookie：将 Cookie 标记为 HTTP-only，禁止 JavaScript 读取 Cookie，降低被窃取的风险。
输入时校验：对用户输入进行严格的验证和过滤，拒绝不符合要求的输入数据。
统一字符编码：确保浏览器与 Web 应用端使用相同的字符编码，避免字符集相关的问题。

CSRF（跨站请求伪造攻击）

概念：
CSRF 是一种攻击方式，攻击者诱使用户在已认证的会话中发送未经授权的请求，可能导致敏感操作被执行。

修复方式：

嵌入 Token：在需要防范 CSRF 的页面中，嵌入一个随机生成的 Token，并在用户提交表单时附带该 Token。服务器在处理请求时验证 Token 的合法性。
再次输入密码：对于重要的操作（如更改密码或资金转账），要求用户再次输入密码进行确认，增加操作的安全性。
校验 Referer：在服务器端检查请求的 Referer 头，确保请求来源于合法的页面，拒绝来自可疑来源的请求。