前端面试题总结二

一、预编译、作用域、变量提升、事件委派

预编译：JS引擎在执行之前进行一次预编译，首先将变量或者函数声明提升至作用域的顶端，再进行后续的处理
作用域：变量作用域（局部变量优先）和函数作用域
变量提升：先声明，不会对赋值初始化进行提升
函数提升：将函数声明提前，优于变量提升
事件委派（事件代理）：将事件交给别人去做，比如父级ul绑定，当点击li时会触发ul所定义的事件。（好处提升性能，不需要给每个子级安装事件）

//给父层元素绑定事件
document.getElementById('父级id').addEventListener('click',function(e){
	//兼容性处理
	var event = e || window.event;
	var target = event.target || event.srcElement;
	//判断是否匹配目标元素
	if(target.nodeName.toLocaleLowerCase === '子级标签'){
		console.log('the content is:',target.innerHTML);
	}
})

二、instanceof手写实现

实例的.proto=构造函数的.prototype
想要判断类型，就从实例的原型链，不断地从__proto__一层层向上寻找：if 有一处的__proto__等于构造函数的prototype，则返回true；若最后没找到，则返回false

const instance(A,B)=>{
	if (typeof A!== 'object' || A===null ||typeof B!=='function'){
		return false
	}
	const prototype = B.prototype;
  let __proto__ = A.__proto__;
  while (true) {
    // 假设找到顶端了，返回false
    if (__proto__ === null) {
      return false;
    };

    // 假设相等，返回true
    if (prototype === __proto__) {
      return true;
    };

    // 一直顺着__proto__网上找
    __proto__ = __proto__.__proto__;
  }
}

三、将数组转为二进制

使用栈的结构特点：每次用n除2，将余数记下，一直循环直到商为 0，再将余数倒着排列即可得到二进制数

function twoToTen(n){
	var stack=new stack()
	while(n>0){
		stack.push(n%2)
		n=math.floor(n/2)
	}
	var str=""
	while(!stack.isEmpty()){
		str+=stack.items.pop()
	}
	return str
}

四、http状态码

100 接收的请求正在处理
2xx表示成功
200成功
202接收到请求但未处理
204 处理已成功但返回报文不包含实体的主体部分
3xx 重定向，要完成请求则需要进一步处理
301 永远性重定向，指被分配了新的url
302临时重定向，指临时分配url
303 资源存在另一个url，需要get操作获取
304 未修改
4xx客户端错误
400错误请求
401需要http认证信息
403 服务器拒绝请求
404 未找到网页
5xx服务端错误
500服务器内部错误
503服务器停机或负超载

五、vuex的五大属性和工作原理

import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
console.log(store)  // store 实例对象

state存储状态信息$store.state.xxx
mutations存储方法，使用commit进行调用（同步）store.committ(‘方法名’,需要传递的参数)
action存储异步方法
在异步定义context.commit(‘方法名’,参数)
分发操作store.dispatch(‘方法名’,参数)

引入action来分发mutation就可以实现异步的操作，action来提交mutation，然后mutation再去改变对应store中的状态。而分发操作则调用action实现

getters相当于计算属性

getters 可以接收两个参数，一个是 state, 一个是自身的 getters 。$store.getters.xxx调用

modules模块化vuex

六、vue生命周期之间的差别

vue生命周期就是vue实例从创建到销毁的过程
1.beforeCreate:对象未创建，方法、数据、属性等无法访问。
2.create：可以请求数据但不能进行dom操作
3.beforeMounted：把data里面的数据和模板生成html，完成了el和data初始化，但并未挂载到页面
4.mounted：挂载完成，此时可以进行dom操作
5.beforeUpdate：内存中的数据是新的，而页面数据是旧的
6.update：由于数据更改导致的虚拟 DOM 重新渲染（$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM）
7.beforeDestory释放内存
8.destory指令解绑，监听器移除，实例销毁

七、HTML meta标签

meta：常用于定义页面的说明，关键字，最后修改的日期和其他的元数据。
charset：编码格式
name：描述网页：keywords关键字、description网页内容描述、viewport缩放比例
content用于搜索引擎查找信息：initial-scale、width、minimum-scale、maximum-scale
http-equiv属性：相当于头文件，向浏览器传递有效信息：expires到期时间、Set-Cookie、Refresh几秒后跳转到url、content-Type设定字符集、Pragma禁止从本地缓存中浏览网页、Window-target防止别人从iframe调用自己的网页、X-UA-Compatible强制浏览器按指定版本进行渲染

八、Doctype作用

告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

九、本地存储

cookie：被用来与服务器进行通讯 ，默认关闭服务器后失效，最大4k。每次都会携带在http头中，属于客户端存储

document.cookie = “” 设置值
document.cookie.indexOf(索引值)：获取值
document.cookie.length

localStorage数据会永久存储，除非代码或手动删除
sessionStorage 数据只会存在于当前会话，浏览器关闭则清空,sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。,且同源策略

localStorage和sessionStorage 都最大为5M，仅在客户端使用，且都为本地存储
常用的方法有：

• localStorage.setItem(“key”,“value”)存储，若key在则更value
• localStorage.getIten(“key”)不存在则返回null
  -localStorage.removeItem(“key”)删除信息
  -localStorage.clear()清空所有信息
  -localStorage.key()键索引

Session：位于服务器端，sessionStorage位于客户端，无任何关联。主要用户维护会话状态，关闭当前选项卡或者浏览器窗口，sessionStorage数据被删除，也就算会话结束

HttpSession session =request.getSession();获取值
session.getId()获取会话id
session.setAttribute(name,value);
session.getAttribute(name,value);
session.removeAttribute(name,value);

十、用户注册登录实现的大概步骤

登录实现：
第一步：先根据输入框输入的内容，向后台发送数据
第二步：后台收到请求，验证用户名与密码是否正确，若成功则返回token
第三步：将拿到的token存储在localStorage和vuex中，并跳转路由
第四步：在跳转时判断是否存在token，若没有则跳转到指定页面
注册实现：配置路由守卫：router.beforeEach（（to，from，next）=》{}） //进行条件判断然后跳转路由
第一步：views下新建注册页面 ，完成基本布局。
第二步：根据输入内容进行规范化提示
第三步：给注册页面添加路由信息

十一、css盒子居中

1.margin:0 auto;
2.父元素的弹性布局

display: flex;
justify-content: center; //主轴元素居中
align-items: center; //侧轴元素居中（文字居中是text-align:center）

3.行内块：父级text-align：center 子vertical-align: middle

十二、flex布局

弹性布局：
flex-direction 属性设置容器主轴的方向：row | row-reverse | column | column=reverse;
flex-wrap属性用于一行放不下怎么办：nowrap不换 | wrap | wrap-reverse向上换;
flex-flow就是前两个相加 [row nowrap]
justify-content属性用于设置项目在容器中的对齐方式。 justify-content: flex-start | flex-end | center |space-between两端对齐 | space-around间距相等
align-items定义了项目在交叉轴上是如何对齐显示的flex-start | flex-end | center | baseline基线对齐 | stretch填满高度
}
align-content属性定义多个轴线对齐方式：
项目属性：flex：flex-grow属性、flex-shrink属性、flex-basis 即默认0 1 auto
order属性设置项目排序的位置，默认值为0，数值越小越靠前
flex-grow属性用来控制当前项目是否放大显示。默认值为0（不放大），1则为放大。
flex-shrink 属性缩小比例，默认为1，若为0即空间不足也不缩小
flex-basis属性：占据主轴空间，默认auto。

十三、mvvm模式

MVVM分为Model、View、ViewModel三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；
Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom

十四、节流和防抖

节流：使用settimeout限制一个动作在一段时间内只能执行一次
防抖：设置时间差，就是当一个动作连续触发，只执行最后一次

十五、懒加载

就是延迟加载图片，比如说用户进一下网页只看目前的信息，则下面的信息进行延迟加载

图片懒加载方法一：
先将图片的src设置为同一张图片或者不设置，同时给img标签设置一个特殊属性，例如：data-src用于存放图片的真实预览地址；若图片未进入可视区域时，展示同一张图片或者直接不展示图片，此时就不会发生http请求，当图片进入可视区域时，将data-src上的值赋给src，此时再发送http请求
方法二：当页面滚动的时候需要去监听 scroll 事件，进行可视化判断。图片的真实路径则设置在 data-original 属性中，若到可视化区域，则图片的 src 属性设置为 data-original 的值
路由懒加载：
方法一 Vue异步加载技术
1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
2：component: resolve => require([‘放入需要加载的路由地址’], resolve
方法二：使用import进行懒加载

 routes: [
    { path: '/login', component: () => import('@/views/login/index.vue') },
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]