一、初见面
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 组件库
(什么学习路径,哈人)
总结
相当失败的一次面试,希望能以此获得更多知识和动力去学习吧。