2021.10.9web前端面经

一、初见面

1.自我介绍

        简单的介绍一下自己的学校，专业方向。说了下之前的实习情况，以及自己的学校专业课。

2.笔试

没有手撕代码，题目都是解答题。

1.聊聊输入链接按下回车后浏览器都在做什么。

回答方向往前端渲染，答偏了。

复盘解答：

        1.先进行DNS域名解析，查看本地hosts文件，查看有没有当前域名对应的ip地址，若有直接发起请求，没有的话会在本地域名服务器去查找，如果本地域名服务器没查找到，会从根域名服务器查找，根域名会告诉你从哪个与服务器查找，最后查找到对应的ip地址后把对应规则保存到本地的hosts文件中。

        2.http三次握手四次分手。

        3. 服务器处理，可能返回304也可能返回200。

        4.客户端自上而下执行代码，然后才是熟悉的CSS加载，DOM树，JS加载。

2.javascript创建对象的几种方法

        1.工厂模式：工厂模式是用函数来封装创建对象的细节，在函数里面创建对象并返回对象，就有些像工厂里的流水线一样

function createPerson(name,age,job){
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayname = function(){
        alert(this.name);
    };
    return o;
}
let person1 = createPerson('aa','21','前端');
let person2 = createPerson('bb','22','后端');

 工厂模式不能识别对象类型

        2.构造函数模式

构造函数模式，即通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayname = function(){
        alert(this.name);
    };
}
var person1 = new Person("aa",21,"前端");
var person2 = new Person("bb",22,"后端");

        3.原型模式

使用原型对象的好处就是，可以让所有对象实例共享它所包含的属性和方法。

function Person(){}
Person.prototype.name="a";
Person.prototype.age="29";
Person.prototype.job="cc";
Person.prototype.sayname = function(){
        alert(this.name);
};
var person1 = new Person();
var person2 = new Person();

这样把属性给原型附上可以在几个值相等时得出person1==person2//true

        4.组合使用构造函数模式和原型模式

组合使用中，构造函数模式用于定义实例自己的属性，原型模式用于定于方法和共享的属性。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype = {
    constructor: Person,
    sayname: function(){
        alert(this.name);
    }
}
var person1 = new Person("a",29,"cc");
var person2 = new Person("b",26,"cc");

3.jquery怎么把数组转成JSON再转回数组？

//需导入jquery

$.fn.stringify = function() {
  return JSON.stringify(this);
}

$(array).stringify();

$.fn.parseArray = function(array) {
　　return JSON.parse(array)
}

$(array).parseArray();

4.angular和jquery能一起用吗？

没学过angular 所以没答

复盘解答：

        可以一起用，angular是一个前端框架，jquery是一个前端工具，并没有本质上的冲突，但是共用时代码不便于维护。

5.Vue的生命周期

        复盘解答：beforeCreate()创建前,created()创建,beforeMount()挂载前,mounted()挂载,beforeUpdate()更新前.Updated()更新,beforeDestroy()销毁前,Destroyed()销毁后errorCaptured（）报错；（这是Vue2的）

Vue3: veforeCreate()和created()换成了setup(),

onBeforeMount()挂载前,onMounted()挂载,onBeforeUpdate()修改前,onUpdated()修改,onBeforeUnmount()卸载前,onUnmounted()卸载,onErrorCaptured()报错；（这是Vue3的）

6.vue中router的钩子函数

竟然不知道 寄！

复盘解答：

        1全局钩子

       1. vue router.beforeEach（全局前置守卫）

一个全局的before钩子函数，在每一次路由改变时都执行一遍。可以做页面跳转的处理，如需判断登录的页面拦截。

        2、vue router.afterEach（全局后置守卫）

全局的after函数，跳转后执行。可以做页面丢失后的处理操作。

        2单个路由里的钩子

        1.beforeEnter,beforeLeave

用于写某个指定路由跳转时执行的逻辑。

        3组件路由

        1.beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

作用类似,用于组件间切换时调用。

还有些记不清了……

3.问答部分

        1.知道Vue单页面和多页面开发的优缺点吗？

回答的很肤浅，没想单html配合多组件和多html的方面上。

复盘解答：

        单页面应用（spa）

只有一个html页面，跳转通过组件完成。

优点：跳转流畅，组件化，开发便捷易维护。

缺点：首次加载资源大，优化不好。

        多页面应用（mpa）

整个项目有多个html，所有跳转方式都是页面之间相互跳转

优点：首页载入快，只加载本页的内容，优化好。

缺点：页面跳转又是一次加载，频繁跳转的话体验会差很多。

        2.聊一聊Vue的生命周期

描述了一下生命周期函数都在哪些时候触发。

        3.用过哪些Vue的组件框架。

只用过elment-ui 寄！

        复盘解答：

Element：饿了吗开发的后台组件库

iview：友好的 API ，自由灵活地使用空间，细致、漂亮的 UI。

vuetify：一个为 Vue JS 2.0 打造的 Material 风格的组件库

cube-ui：滴滴团队开发的一套基于 Vue.js 实现的精致移动端组件库

buefy：基于 Bulma 的 Vue.js 轻量级 UI 组件库

vue-beauty：基于 ant design 的漂亮的 vue 组件库

vue-storefront：将 PWA 集成到电子商务的框架，支持离线访问

at-ui：一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品

Vue-Blu:基于 Vue.js(2.x) 和 Bulma 的 UI 组件库

(什么学习路径，哈人)

总结

相当失败的一次面试，希望能以此获得更多知识和动力去学习吧。