- 之间联系(Model 和 ViewModel 的双向数据绑定)
解析:
MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象(桥梁)。
在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
85. MVC、MVP 与 MVVM 模式
参考答案:
一、MVC
通信方式如下
-
视图(View):用户界面。 传送指令到 Controller
-
控制器(Controller):业务逻辑 完成业务逻辑后,要求 Model 改变状态
-
模型(Model):数据保存 将新的数据发送到 View,用户得到反馈
二、MVP
通信方式如下
-
各部分之间的通信,都是双向的。
-
View 与 Model 不发生联系,都通过 Presenter 传递。
-
View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter 非常厚,所有逻辑都部署在那里。
三、MVVM
MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。通信方式如下
唯一的区别是,它采用双向绑定(data-binding):View 的变动,自动反映在 ViewModel,反之亦然。
86. 常见的实现 MVVM 几种方式
参考答案:
1.发布-订阅者模式(backbone.js) 最早的mvvm框架
一般通过pub、sub的方式来实现数据和视图的绑定 使用起来比较麻烦
2.脏值检查(angular.js)
用定时器轮训检测数据是否发生改变 性能低
3.(vue用什么方式实现的数据绑定?)
数据劫持 Object.defineProperty给对象的属性增加修饰符来劫持各个属性的setter getter(获取值和设置值的时候 你都能知道
然后就可以修改页面的视图了) 此外还结合了发布订阅模式 把所有订阅 指定 统一做更新的处理
IE8以下不支持 Object.defineProperty这个属性的 所以vue只兼容到ie9
87. 解释下 Object. defineProperty()方法
参考答案:
这是 js 中一个非常重要的方法,ES6 中某些方法的实现依赖于它,VUE 通过它实现双向绑定,此方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
解析:
Object. defineProperty(object, attribute, descriptor)
-
这三个参数都是必输项
-
第一个参数为 目标对象
-
第二个参数为 需要定义的属性或者方法
-
第三个参数为 目标属性所拥有的特性
前两个参数都很明确,重点是第三个参数 descriptor, 它有以下取值
-
value: 属性的值
-
writable: 属性的值是否可被重写(默认为 false)
-
configurable: 总开关,是否可配置,若为 false, 则其他都为 false(默认为 false)
-
enumerable: 属性是否可被枚举(默认为 false)
-
get: 获取该属性的值时调用
-
set: 重写该属性的值时调用
一个例子
var a = {};
Object.defineProperty(a, “b”, {
value: 123
});
console.log(a.b); //123
a.b = 456;
console.log(a.b); //123
a.c = 110;
for (item in a) {
console.log(item, a[item]); //c 110
}
因为 writable 和 enumerable 默认值为 false, 所以对 a. b 赋值无效,也无法遍历它
总开关,是否可配置,设置为 false 后,就不能再设置了,否则报错, 例子
var a = {};
Object.defineProperty(a, “b”, {
configurable: false
});
Object.defineProperty(a, “b”, {
configurable: true
});
//error: Uncaught TypeError: Cannot redefine property: b
是否可重写
var a = {};
Object.defineProperty(a, “b”, {
value: 123,
writable: false
});
console.log(a.b); // 打印 123
a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(a.b); // 打印 123, 赋值不起作用。
属性特性 enumerable 定义了对象的属性是否可以在 for… in 循环和 Object. keys() 中被枚举
var a = {};
Object.defineProperty(a, “b”, {
value: 3445,
enumerable: true
});
console.log(Object.keys(a)); // 打印[“b”]
enumerable 改为 false
var a = {};
Object.defineProperty(a, “b”, {
value: 3445,
enumerable: false //注意咯这里改了
});
console.log(Object.keys(a)); // 打印[]
如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个,否则报错
var a = {};
Object.defineProperty(a, “abc”, {
value: 123,
get: function() {
return value;
}
});
ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别?
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题:
最后
技术栈比较搭,基本用过的东西都是一模一样的。快手终面喜欢问智力题,校招也是终面问智力题,大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了,建议回去补一下。