前端面试

最新推荐文章于 2021-04-19 09:52:47 发布

Williamszwk

最新推荐文章于 2021-04-19 09:52:47 发布

阅读量96

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/dazhougege/article/details/105151406

版权

前端面试专栏收录该内容

12 篇文章 0 订阅

订阅专栏

MVC

model:(模型)数据层，负责存储数据，操作数据库

view：视图层，负责展示。

controller：控制层，负责协调model和view层，根据用户在view上的输入，在model上进行查询，修改，并及时返回显示在view上

controller可以直接访问Model，也可以直接控制view，是两者的协调则，model->view

MVVM

model：数据模型，存储数据，操作数据库

view：视图层显示数据

viewmodel：负责监听model中的数据改变，并控制视图的更新,处理用户的交互操作

model和view没有直接的关联

MVVC

model：数据层，负责存储数据。

view：展现层，创建需求，创建cell

view：定义数据，用来接收控制中的数据，处理回调。

controller：加载网络数据，懒加载。

v-if和v-show

v-show控制display属性在block和none来回切换，v-if会控制这个DOM节点是否存在与否，当需要经常切换某个元素的显示和隐藏时，v-show会节省开销，而当只一次显示或隐藏时，使用v-if更加合理。

简述vue的响应式原理

当一个vue实例被创建时，vue会遍历data选项的属性，用object.defineProperty将他转化为getter/setter,在属性访问修改时通知变化。

每个组件实例都有相应的watcher程序实例，他会在组件渲染时，把属性记录为依赖，之后当依赖setter被调用时，会通知watcher重新计算，并更新相关联的组件。

简述VUE声明周期

beforeCreate

created

beforeMount

mounted

beforeupdate

updated

beforedestroy

destroyed

VUE 中computed和watch区别

computed:计算结果并返回，当被计算的值发生改变时才会触发，计算属性的结果会被缓存。

watch：监听某一个值，当值发生变化时，执行对应的操作，

watch更适合监听一个值的变化并作出对应的操作，computed适合计算已有的值并返回结果。

VUE和React优缺点对此

vue：

API设计简单，语法简单，学习成本低

构建方面不含路由，需要使用vuex vue-router

逻辑清晰，性能好容易优化，基于依赖追踪

独立触发，v-model实时渲染，简单的语法，更快的渲染，更小的体积

react：

利用jsx创建虚拟DOM树，函数式的方法描述视图，使用虚拟DOM作为模板，不好控制DOM

适用于：大型应用，并有更好的测试性能，更大的生态圈，

vue,react 共性：

虚拟DOM实现快速渲染，轻量级响应式组件，服务端渲染易于集成路由工具，打包工具及状态管理工具。

vueX

在单页面组件开发中，vuex和redux都是状态管理，简单的理解就是定义一个数据之后，你可以在所有项目中使用。

State:看做所有组件data，用于保存公共数据。

Getter：允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）返回值会根据它的依赖被缓存下来，只要当它的依赖值发生了变化时，才会重新计算。

Mutations：可以理解为store中的methods。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，mutation都有一个字符串的事件类型，和一个回调函数，也是我们进行状态更改的地方，通过store.commit进行出触发函数，

Action 类似于 mutation，不同的是action提交的mutation ,不是直接改变状态，action可以包含任何异步操作，

action通过store.dispatch方法触发，可以将store分割成模块，每个模块都有自己的state，mutation,action ,getter.

vue父子之间传递

父向子传递：在用子组件child时，传入message即可，child通过props接收。

子向父传递：子组件中通过$emit触发自定义事件，

router和route

router是VueRouter的一个对象，Vue.use(VueRouter) 和new VueRouter构造函数得到一个router的实例对象，这个对象是一个全局对象，包含了所有路由和关键对象，属性，

route是一个跳转的对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path等

spa应用首屏加载慢，解决

公用JS库通过script标签外部引入，减少app.bundel的大小，并行加载文件，提高速度

配置路由时页面和组件使用懒加载方式引入

加一个首屏loading图，增加用户体验

网页从输入网址到渲染完成经历了哪些过程

输入网址进入

发送到DNS服务器查询域名对应的服务器的IP地址

与web服务器简历tcp连接

浏览器向web服务器发送HTTP请求

web服务器响应，返回指定请求的数据，

浏览器下载数据，并解析HTML，生成DOM树，解析css，js，渲染页面直到完成。

AJAX请求过程

创建XMLHTTPrequest对象。
创建一个新的HTTP请求，指定HTTP请求，URL及验证信息
设置HTTP请求状态变化的参数
发送HTTP请求
获取异步调用返回的参数
使用js和DOM实现局部刷新

$ajax({
	url:'http://www.baidu.com',//请求的URL地址
	dataType：‘json’,//返回的格式
	async:true,
	data:{'id':value},//参数自
	type:'POST',
	beforeSend:function(){},//请求前处理
	success:function(){},//请求成功
	complete:function(){},//请求完成
	error:function(){}
})

数组去重

let arr = [1,1,2,3];
let set = new Set(arr);//Set直接去重
或者利用indexOf,先创建一个空数组，然后一个一个向里面添加，如果indeOf不是-1，则不添加该元素。

set转为数组
let arr = Array.from(set);或
let arr = [...set];
Array.from()将一个类数组对象或者可遍历对象转化为一个真正的数组。

排序

arr.sort(function(a,b){
return a-b;
});//递增，递减可以b-a

原型

每个构造函数都会有一个prototype属性，也就是原型对象属性

每个构造函数的实例都包含一个内部属性__proto__ ,该属性指向构造函数的原型，即prototype属性。

function Person(){
....
}
var tom = new Person();

tom.__proro == Person.prototype  
并且tom继承Person.prototype里面的属性，除非自己有。

继承

1.原型链继承
function Cat(){ 
}
Cat.prototype = new Animal();//直接继承另一个构造函数的实例
2.构造继承
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
3.实例继承
function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

js基本类型

基本类型：string null undefined symbol Bollean Number
引用数据类型：Object
let id = Symbol("id“);//唯一标识

正则

var patt= /^(\d+)$/ig    //i不区分大小写，g全局查找
[abc]查找括号内任意字符
[0-9]查找任何0-9
[a-z]任意字母
(x|y)
\d 数字
\s 空白
\b 单词边界
\uxxx 十六进制
n+ 查找至少一格
n* 至少0个
n? 0或1个

括号内为要检测的
例patt.test('abcd');
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false
exec() 方法用于检索字符串中的正则表达式的匹配

JS操作数组

slice():返回原数组中指定开始下表到结束下标，一个参数时从指定坐标到结束位置，两个参数时不包括结束位置。

splice():

删除功能时，两个参数，第一个参数要删除的第一项位置，第二个参数，要删除的项数。

插入功能：至少三个，第二个为0时，直接插入后面的数字，不为零，替换

map():每一项都传给一个函数，返回调用的结果。

filter():返回满足过滤条件的数组

reduce():实现迭代，一个参数一项返回的结果，另一项是目前的一项。

闭包，闭包的优缺点

闭包就是能够读取其他函数内部变量的函数。

优点：方便调用上下文的变量，加强封装，达到对变量的保护。

缺点：内存浪费

阻止事件冒泡和默认事件

e.stopPropagation();
e.preventDefault();
return false;

vue给data新增属性，并视图更新

mounted(){
	this.$set(this.data,"key",value)
}

创建对象的方法

1.字面量 var person = {};
2.构造函数(定义属性用this)
function Person(){
...
}
var Tom = new Person();
3.Object创建
var obj = new Object();
obj.name = 'tom'

put post

put请求，改变信息，不改变种类

post：会插入新的种类，或数据

箭头函数与普通函数的区别

箭头函数：匿名函数，不能做构造函数，不能new ,无自己的this，不绑定arguments，用…rest解决，调用apply，call时对this无影响，

class

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

//拓展
class Other extend Point{
    constructor(x,y){
        super(x,y);
    }
}

Promise

对象状态不受外界影响，代表一个异步操作，有三种状态，pending,fulfilled,rejected,一旦状态改变，就不会再改变，只有，pending->fulfilled和pending->rejected

节点添加删除

document.createDocumentFragment()//创建虚拟节点对象，节点对象包含所有属性和方法。
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

appendChild() 添加
removeChild() 删除
replaceChild() 替换
insertBefore() 插入
查找
getELementsByTagName
getElementsByName
getElementsByClassName()
getElementByid
querySelector()

垃圾回收机制

定期找出那些不使用的变量，然后释放内存，这个过程是按照固定的时间间隔周期性的执行

标记清除：当变量进入环境，标记“进入环境”，当变量离开环境，标记“离开环境”，然后某一时间就会被垃圾回收器回收。

引用计数：根据变量引用的次数，引用一次加一，当引用次数为0时，就会被回收。

合理的GC方案：遍历所有可访问的对象，回收不可访问的。

缺点：停止响应其他，

优化：分代回收，增量GC

内存

内存泄露

当页面的元素被移除和替换，若元素绑定的事件仍没移除，IE上需要手工移除，不然会存在内存泄露
函数内又定义函数，并且回调引用暴露了，形成闭包，需要在最后清空。

Williamszwk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试

MVCmodel:(模型)数据层，负责存储数据，操作数据库view：视图层，负责展示。controller：控制层，负责协调model和view层，根据用户在view上的输入，在model上进行查询，修改，并及时返回显示在view上controller可以直接访问Model，也可以直接控制view，是两者的协调则，model->viewMVVMmodel：数据模型，存储数据，操作...
复制链接

扫一扫