前端面试高阶

最新推荐文章于 2023-07-14 10:44:22 发布
最新推荐文章于 2023-07-14 10:44:22 发布
阅读量181 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44688451/article/details/119877067
版权

响应式布局

媒体查询

输出页面最大可见宽度

@media screen and (min-width:100px) and (max-width: 300px) {
    div {
        background-color:lightblue;
    }
}

弹性盒子

.fu{
    display: flex;
    flex-direction:row/column;主轴方向横向
    justify-content:space-around;主轴对齐方式
    align-items:center;交叉轴对齐方式
    align-content:space-around;将所有子项看作一个整体交叉轴对齐方式
}
.zi{
    flex:1;
}

九宫格布局

弹性盒子实现

<div class="box">
    <div class="r">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
    </div>
    <div class="r">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
    </div>
    <div class="r">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
    </div>
</div>

.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.r {
    flex: 1;
    display: flex;
}
.c{
    flex:1;
}

网格布局实现

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

#container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

web安全

xss攻击

往 Web 页面里插入恶意可执行网页脚本代码

解决方案：

  1. 将< >进行转义为&lt;和&gt;
  2. node.js中通过escape库解决。escape(data)

sql注入

利用服务端拼接sql字符串，拼接处各种sql，在服务端执行。使服务端数据泄漏。一般出现在登录页面。

在密码框输入1'or'1'=='1'

select*from tablename where username=''or true

解决方案：sql预编译

CSRF攻击

跨站请求伪造，它利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作。

解决方案：

  1. 使用post请求(不能完全解决)
  2. 加入验证码(确定为用户行为而不是黑客行为)
  3. 验证ReFerer(验证发起请求的网页的地址)
    • 也不能完全解决，因为网页地址也可以篡改伪装
  4. 请求时附带验证信息Anti CSRF Token

http协议

HTTP 是一种无状态 协议(本身不会对请求保存)，由于HTTP是无状态协议，所以必须引入一些技术来记录管理状态，例如Cookie。

http请求消息

  1. 请求行
    • 请求方法+空格+URL+空格+协议版本
  2. 请求头
    • 头部字段名+:+值
  3. 空行
  4. 请求数据

http响应消息

  1. 状态行
    • 协议版本+状态码+状态消息
  2. 消息报头
    • 头部字段名+:+头部字段值
  3. 空行
  4. 响应正文

常见状态码

1字头：信息，服务器收到请求，需要请求者继续执行操作

2字头：成功，操作被成功接收并处理

3字头：重定向，需要进一步的操作以完成请求

4字头：客户端错误，请求包含语法错误或无法完成请求

5字头：服务器错误，服务器在处理请求的过程中发生了错误

101：切换协议。

200：请求成功。一般用于GET与POST请求

203：非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204：无内容。服务器成功处理，但未返回内容。

301：永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。

302：临时移动。

304：未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。

305：使用代理。所请求的资源必须通过代理访问

307：临时重定向。

400：客户端请求的语法错误，服务器无法理解

404：服务器无法根据客户端的请求找到资源（网页）

405：客户端请求中的方法被禁止

500：服务器内部错误，无法完成请求

502：作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

503：由于超载或系统维护，服务器暂时的无法处理客户端的请求。

505：服务器不支持请求的HTTP协议的版本，无法完成处理

http原理

从输入url到页面解析

排序算法

冒泡排序

function fun(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
            // 把最小的放到最后面
            if (arr[j] < arr[j + 1]) {
                let temp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
            }
        }
    }
    return arr
}

快速排序

function fun(arr) {
    if (arr.length <= 1) {
        return arr
    }
    let left = []
    let right = []
    let k = arr.splice(0, 1)[0]
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < k) {
            left.push(arr[i])
        } else {
            right.push(arr[i])
        }
    }
    return fun(left).concat([k], fun(right))
}

Vue 初始化页面闪动问题如何解决？

出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 DOM 的显示，所以会看见模板字符串等代码。
解决方案是，在 css 代码中添加 [v-cloak] { display: none; } 规则，同时在待编译的标签上添加 v-cloak属性：

<div v-cloak>
 {{ message }}
</div>

双向数据绑定源码

/*
1.定义Vue的类
2.实现数据劫持
3.属性代理：将this.$data上面的所有的属性，代理到Vue实例上，方便取值，设置
4.模板编译:先把节点导入文档碎片中，文档碎片替换，将文档碎片放回去 【还没有处理替换操作】
5.文本替换:
    {{}}的内容已经放上去了，但是，当vm上的数据变了，页面不会再次渲染。
6.发布订阅模式：data---》view 单向数据已经实现
    1.Dep:收集订阅者
    2.Watcher：订阅者
    3.有个节点满足条件，就立刻实例化Watcher
    4. Watcher构造函数中，取值，调用了getter,准备将watcher添加到subs中 
    5.实例化dep
    6.getter添加订阅者
    7.修改了值，会调用setter,发布订阅
    8.在watcher的update中，取出新值，传给回调函数，进行更新
7.实现input的单向数据绑定
8.实现双向数据绑定
*/

// 1.定义Vue的类
class Vue {
  constructor(options) {
    //options={el:"#app",data:{ name:"妲己", age:20, info:{  a:"aa",  b:"bb" }}}
    this.$data = options.data;

    // 2.调用数据劫持的函数
    Observe(this.$data);

    // 3.属性代理
    Object.keys(this.$data).forEach((key) => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          //this.name  返回：this.$data["name"]
          return this.$data[key];
        },
        set(newValue) {
          //this.name=123 this.$data.name=123
          this.$data[key] = newValue;
        },
      });
    });

    // 4.调用模板编译的函数
    Compile(options.el, this);
  }
}

// 2.实现数据劫持
function Observe(obj) {
  // obj={ name:"妲己", age:20, info:{  a:"aa",  b:"bb" }}

  //2.4终止递归
  if (!obj || typeof obj !== "object") {
    return;
  }

  //   6.5实例化dep
  let dep = new Dep();

  //2.1获取到所有的key值，循环，给所有的属性加getter和setter
  Object.keys(obj).forEach((key) => {
    let value = obj[key];

    //2.3递归
    Observe(value);

    //2.2加getter和setter
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        //   6.6添加订阅者
        Dep.target && dep.addSub(Dep.target);
        return value;
      },
      set(newValue) {
        value = newValue;
        //2.4后面设置的新值，也需要加setter和getter
        Observe(value);

        //6.7发布订阅
        dep.notify();
      },
    });
  });
}

// 4.实现模板编译的函数
function Compile(el, vm) {
  // 4.1 获取节点
  vm.$el = document.querySelector(el);

  // 4.2 创建文档碎片
  let fragment = document.createDocumentFragment();

  // 4.3 将节点放入文档碎片中
  while ((childNode = vm.$el.firstChild)) {
    fragment.appendChild(childNode);
  }

  // 4.4数据替换
  // 5.调用文本替换函数
  replace(fragment);

  // 4.5 将文档碎片放回去
  vm.$el.appendChild(fragment);

  // 5.实现文本替换
  function replace(node) {
    // 5.1 插值表达式的正则 {{  name }}  \s空格 *(0个或者多个) \S非空字符 +(1个或者多个)
    let reg = /\{\{\s*(\S+)\s*\}\}/;

    //纯文本节点判断
    if (node.nodeType === 3) {
      let text = node.textContent; // ""  "name:{{name}}"  "123"

      let execResult = reg.exec(text); //如果不满足条件，返回null;满足，返回数组，而且数组的第二项是 "info.a"
      //满足插值表达式
      if (execResult) {
        let value = execResult[1].split(".").reduce((obj, k) => obj[k], vm);
        node.textContent = text.replace(reg, value);

        //6.3实例化Watcher
        new Watcher(vm, execResult[1], (newValue) => {
          node.textContent = text.replace(reg, newValue);
        });
      }

      return;
    }

    // 7.实现input的单向数据绑定
    if (node.nodeType === 1 && node.nodeName === "INPUT") {
      let attrs = Array.from(node.attributes);
      let attrObj = attrs.find((item) => item.nodeName === "v-model");
      if (attrObj) {
        let key = attrObj.value; //"name" "info.a"
        let value = key.split(".").reduce((obj, k) => obj[k], vm);
        node.value = value;

        //添加订阅者
        new Watcher(vm,key,(newValue)=>{
            node.value = newValue;
        })

        //8.实现双向数据绑定
        node.addEventListener("input",(e)=>{
            // e.target.value  123
            //key:"info.a" -["info","a"] vm  
            //obj=vm["info"] obj["a"]=123

            let arr=key.split(".");//["info","a"]
            let obj=arr.slice(0,arr.length-1).reduce((val,k)=>val[k],vm)
            obj[arr[arr.length-1]]=e.target.value;

        },false)

      }

      return;
    }

    //查看node的子节点是不是文本
    node.childNodes.forEach((item) => replace(item));
  }
}

// 6.1 收集依赖的类
class Dep {
  constructor() {
    //存放订阅者
    this.subs = [];
  }
  //添加订阅者
  addSub(watcher) {
    this.subs.push(watcher);
  }
  //发布订阅
  notify() {
    this.subs.forEach((watcher) => watcher.update());
  }
}

// 6.2订阅者类
class Watcher {
  //cb：更新的时候的回调
  //key:关联的属性  name
  //vm:所有的数据来源都是vm
  constructor(vm, key, cb) {
    this.vm = vm;
    this.key = key;
    this.cb = cb;

    //非常难理解6.4 准备将watcher添加到subs中
    Dep.target = this;
    this.key.split(".").reduce((obj, k) => obj[k], this.vm); //这句话并不是真的要取值
    Dep.target = null;
  }
  update() {
    // 在watcher的update中，取出新值，传给回调函数，进行更新
    let value = this.key.split(".").reduce((obj, k) => obj[k], this.vm);
    this.cb(value);
  }
}

EventBus原理

class EventBus {
    constructor() {
        this.subs = [];
    }
    $on(event, handle) {
        this.subs.push({
            event,
            handle
        });
        return this;
    }
    $emit(event, param) {
        this.subs.forEach(item => {
            if (item.event === event) {
                item.handle(param);
            }
        })
        return this;
    }
}
const eventBus = new EventBus();
// eventBus
//     .$on('aaa', n => {
//         console.log(n);
//     })
//     .$on('aaa', n => {
//         alert(n);
//     })
//     .$on('bbb', n => {
//         console.log(n);
//     })
//     .$on('bbb', n => {
//         alert(n);
//     });
// eventBus.$emit('aaa', 5);
// eventBus.$emit('bbb', 3);

js的继承方法

1.原型链继承

如果继承的属性是引用数据类型，一个实例化对象改变，则另一个实例化对象也会改变（缺点）

function Person(name) {
    this.name = name
}
Person.prototype.sey = function () {
    console.log("你好，我是" + this.name);
}
function Student() { }
Student.prototype = new Person("妲己")
let fun = new Student
fun.sey()
console.log(fun);

2.构造函数继承

原型链上的方法和属性不能继承

function Person(name) {
    this.name = name
}
Person.prototype.sey = function () {
    console.log("你好，我是" + this.name);
}
function Student(name) {
    Person.call(this, name)
}
let fun = new Student("妲己")
console.log(fun);

3.组合继承

function Person(name) {
    this.name = name
}
Person.prototype.sey = function () {
    console.log("你好，我是" + this.name);
}
function Student(name) {
    Person.call(this, name)
}
Student.prototype = Person.prototype

let fun = new Student("妲己")
fun.sey()
console.log(fun);

ES6定义一个类

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
    sey() {
        console.log(`你好，我叫${this.name}，我${this.age}岁了`);
    }
}
let student = new Student("小明", 18)

ES6继承一个类

// 提取共同属性name，封装成父类
class Person {
    constructor(name) {
        this.name = name
    }
    // 也可以继承方法
    drink(){
        console.log("喝水");
    }
}
// 继承父类
class Student extends Person {
    constructor(name, age) {
        // 调用父类Person构造函数
        super(name)
        this.age = age
    }
    sey() {
        console.log(`你好，我叫${this.name}，我${this.age}岁了`);
    }
}
let student = new Student("小明", 18)
console.log("student", student);
student.sey()
student.drink()

class Teacher extends Person {
    constructor(name, age) {
        super(name)
        this.age = age
    }
    teach() {
        console.log(`你好，我叫${this.name}，我${this.age}岁了`);
    }
}
let teacher = new Teacher("王老师", 46)
console.log("teacher", teacher);
teacher.teach()
teacher.drink()

vue异步组件

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})
会说嘴的话
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java高阶面试题整理.pdf
12-18
Java高阶面试题
状态码大全
m0_62218466的博客
04-27 6128
请求可以在减少请求头域的大小后重新提交。429 Too Many Requests 太多请求，可以限制客户端请求某个资源的数量，配合 Retry-After(多长时间后可以请求)响应头一起使用。4xx 客户端错误——处理发生错误，责任在客户端，如：客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。5xx 服务器端错误——处理发生错误，责任在服务端，如：服务端抛出异常，路由出错，HTTP版本不支持等。1xx 响应中——临时状态码，表示请求已经接受，告诉客户端应该继续请求或者如果它已经完成则忽略它。
Http状态码
lonzgzhouzhou的博客
09-13 1581
被用于当资源的访问由于法律原因被禁止的时候。497：（HTTP到HTTPS（Nginx））Nginx内置的代码，被用于原始的HTTP的请求发送给HTTPS端口去分辨4XX在日志中和一个错误页面的重定向。598：（网络读取超时异常(未知)）这个状态码也没有在任何RFC中指定，但是被用在微软的HTTP代理中去标注一个网络读取超时在一个客户端之前的代理的后面。599：（网络连接超时异常(未知)）这个状态码也没有在任何RFC中指定，但是被用在微软的HTTP代理中去标注一个网络连接超时在一个客户端之前的代理的后面。
几种常见的http状态码含义解析
weixin_45095113的博客
08-01 7487
对常见的http状态码如200、404解析
常见几种状态码
qq_29311611的博客
02-15 622
了解基本http状态码。HTTP状态码是服务器和客户端之间交流信息的语言。
常见的状态码
weixin_63083809的博客
07-12 1万+
一些常见的状态码为：200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务器超时1xx（临时响应） 表示临时响应并需要请求者继续执行操作的状态码。100（继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。2xx （成功） 表示成功处理了请求的状态码。200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此
golang 50k 高阶面试题
06-28
go大厂都面试什么
精选29道android高阶面试题
04-21
android高阶面试题，面试用的，平常积累11111111111111
高阶（六阶）无源滤波器的设计
06-26
根据原型滤波器设计六阶无源滤波器
详解Python高阶函数
09-16
主要介绍了Python高阶函数的相关资料，帮助大家更好的理解和学习python，感兴趣的朋友可以了解下
http常见状态码有哪些？
nbsl_的博客
04-09 4万+
http常见状态码有哪些？ 一、2开头的状态码 2xx(成功)表示成功处理了请求的状态码 200(成功)服务器已成功处理了请求。 二、3开头的状态码 3xx(重定向)表示要完成请求，需要进一步操作。通常这些状态代码用来重定向。 304(未修改)自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容 三、4开头的状态码 4xx(请求错误)这些状态码表示请求可能出错，妨碍了服务器的处理 400(错误请求)服务器不理解请求的语法 403(禁止)服务器拒绝请求 404(未找到)服务器找不到
http状态码大全(100 - 599状态码 全面讲解)
weixin_63149034的博客
08-16 2万+
HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。它由 RFC2616 规范定义的 ，并得到RFC 2518、RFC 2817、RFC 2295、RFC 2774、RFC 4918等规范扩展。
7种常见的状态码：
m0_53579196的博客
04-26 634
状态码301和状态码302相似，不同的是状态码301往往代表的是永久性的重定向，值得注意的是，这种重定向跳转，从严格意义来讲不是服务器跳转，而是客户端跳转的。服务器通过返回状态码304可以告诉客户端请求资源成功，但是这个资源不是由服务器提供返回给客户端的，而是客户端本地浏览器缓存中就有的这个资源，因为可以从缓存中获取这个资源，从而节省传输的开销。在服务器端的网页程序出错。状态码302代表临时跳转。状态码403代表请求的服务器资源权限不够，也就是说，没有权限去访问服务器的资源，或者请求的IP地址被封掉了。
常见的HTTP状态码有哪些
热门推荐
laishaohe的博客
01-13 4万+
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。   HTTP状态码的英文为HTTP Status Code。下面是常见的HTTP状态码： 200 – 请求成功 301 – 资源(网页等)被永久转移到其它URL 404
常见的几种HTTP状态码
qq_44169219的博客
11-08 1558
状态码类别 1XX（信息性状态码）表示接收的请求正在处理 2XX（成功状态码）表示请求正常处理完毕 3XX（重定向状态码）表示需要进行附加操作以完成请求 4XX（客户端错误状态码）表示服务器无法处理请求 5XX（服务器错误状态码）表示服务器处理请求出错 常见状态码 200 OK——客户端发来的请求在服务器端被正常处理 在响应报文中，随状态码...
HTTP状态码汇总（常见）
Z_CH8648的博客
11-19 3万+
HTTP状态码是服务器返回给客户端的，其核心作用是web服务器来告诉客户端，当前网页发生的什么事，或者说当前web服务器的响应状态。所以HTTP状态码常用来判断和分析当前web服务器的运行状况。
常见的 HTTP 状态码有哪些？
m0_64564920的博客
04-13 4867
常见的 HTTP 状态码
HTTP常见状态码（400、404、500）等错误
weixin_71107289的博客
08-31 6787
​ HTTP一些常见的状态码为： 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用
报错400是什么怎么解决呢？
最新发布
weixin_61189391的博客
07-14 1万+
你们有没有看出什么端倪来，可以看出前端传递的参数是type，然后后端接受的却是order类型的，所以参数接受错误。出现这种错误一般就是检查参数传递是否异常，前端传递的参数，后端有没有接受正确，前端传递的参数有没有和后端匹配。通常情况下是前端请求后端地址报错400，直接上一个例子。如果你遇到了400错误，你可以检查。时，通常会返回400错误码。它是一种客户端错误状态码，表示。HTTP状态码400表示"是否正确，并尝试修复问题。无法理解客户端发送的请求。未提供有效的身份验证凭据。资源未在服务器上找到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值