vue 前端知识整理(补充ing)

1. mvc 、mvp、mvvm区别

(1) mvc 模式分为三个部分：

• 视图（View）：用户界面
• 控制器（Controller）：业务逻辑
• 模型（Model）：数据保存

各部分通信如下:

• View 传送指令到 Controller
• Controller 完成业务逻辑后，要求 Model 改变状态
• Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的

bg2015020105.png

用户可以直接向view发送指令（Dom事件），用户也可以直接向controller发送指令（改变 URL 触发 hashChange 事件）

(2) MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

bg2015020109.png

• 各部分之间的通信，都是双向的。
• View 与 Model 不发生联系，都通过 Presenter 传递。
• View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

(3) MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

bg2015020110.png

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

2. Padding 和 margin 有什么不同？

• padding内边距，margin外边距
• 作用对象不同，padding针对自身，作用于外部对象

3. vw与百分比的区别？

• vw根据视图窗口，百分比根据父元素

4. 设置小于12px字体尺寸？

transform: scale(0.8);
-webkit-transform: scale(0.8);

5. content-box和border-box区别

• content-box最大的特点是计算盒子宽高时会把padding和border的长度算进来（外边距不会算进来）。
• border-box则是你宽和高设置为多少，则这个盒子的宽高就是多少，如果设置padding和border，相应内容区域就会减少。

6. let、const、var的区别

• var是函数作用域，而let是块作用域。在函数内声明了var，整个函数内都是有效的，在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（for循环内）定义的变量，在其外面是不可被访问的。
• var可以允许重复声明相同的变量，后者会覆盖前者，let则不能重复声明相同的变量。
• var声明的变量有变量提升特性，let声明则没有这个特性
• const 声明一个只读的常量，一旦声明，常量值就不可以改变。所以const一旦声明就必须立即初始化。只声明，不赋值，会报错（注意：var let 只声明不赋值 ： undefined），不能重新赋值const定义的值，但是可以修改const声明的对象类型。
  eg:

const a = {name: 'aaa'}
a.name = 'bbb'
console.log(a.name)  bbb

const a = {name: 'aaa'}
a={name: 'ccc'}
console.log(a) 
VM333:2 Uncaught TypeError: Assignment to constant variable.

因为const 保存的是指向的数组活对象的指针，对于基本类型，被const声明的变量是不可以修改的，但是对于对象或者数组，指针依然不能修改，但是指针指向的对象或者数组可以修改。

7. 什么是变量提升

• javascript引擎的工作方式，是先解析代码，获取所有被声明的变量，然后在一行一行的运行。这造成的结果就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
  示例：

  function fun() {
    console.log(a)
    var a = 12
}
fun()
// 输出结果undefined

原因：就是js在创建执行上下文时，会检查代码，找出变量声明和函数声明，并将函数声明完全存储在环境中，而将通过var声明的变量设定为undefined，这就是所谓的变量提升。从字面上理解就是变量和函数声明会被移动到函数或者全局代码的开头位置。

8. 深copy 和 浅copy的区别

深copy和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
假设B复制了A，修改A的时候，看B是否发生变化：

• 如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
• 如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址
深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存

9.css文本多行或单行显示，超出显示...

单行

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

多行，比如2行

  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;

10.什么是数据类型隐式转换

在js中，当运算符在运算时，如果两边数据不统一，CPU 就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算。比如：1 > "0"这行代码在js中并不会报错，编译器在运算符时会先把右边的 "0" 转成数字 0 然后在比较大小。

一、JS中的数据类型隐式转换的三种情况

• 转换为boolean类型
• 转换为number类型
• 转换为string类型

二、js中数据类型转换的规则

转为Boolean类型

数据在 逻辑判断 和 逻辑运算 之中会隐式转换为boolean类型

数据类型	转换为true的值	转换为false的值
String	任何非空字符串	空字符串（""或’'）
Number	任何非零数字	0和NaN
Object	任何对象	null
Undefined	不适用	undefined

连续使用两个非操作符(!!)可以将一个数强制转换为boolean类型

转换为 string 类型

原始数据类型	转换之后的值
数字类型	数字类型的字符表示
null	‘null’
undefined	‘undefined’
布尔类型	true变’true’,false变’false’

转换为 number 类型

原始数据类型	转换之后的值
空字符 ''或""	0
非空字符串	将字符内的数据内容变为数据，如果还有其他符号中文等转为NaN
true	1
false	0
null	0
undefined	NaN
NaN	（不用转，typeof NaN 得到"number"）