前端面试题6道开胃菜CSS+JS+VUE

目录

css区 

一：BFC的相关：

二：类与ID的区别：

JS区

三：原型，原型链，继承

四.Ajax的优缺点：

 vue区

五：vue常用指令？

六：Vue的基本原理

---

 

css区 

---

一：BFC的相关：

BFC的概念？

了解：CSS2.1 中只有 BFC 和 IFC,  css3中还增加了 GFC 和 FFC。

BFC 定义：

BFC（Block formatting context）直译为“块级格式上下文”， 它是一个独立渲染区域，只有BLOCK-LEVEL BOX参与， 他规定内部的BLOCK-LEVEL BOX如何布局， 并与这个区域外部不相干

 如何开启元素的BFC？

1、设置元素浮动 float

2、设置元素绝对定位 position: absolute;

3、设置元素为inline-block

4、将元素的overflow设置为一个非visible的值

 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

BFC有什么作用呢？当开启元素的BFC以后，元素将会具有那些特性：

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会被浮动元素所覆盖

3、开启BFC的元素可以包含浮动的子元素

二：类与ID的区别：

1、使用范围不同：

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。ID属性的操作类似于CLASS属性，ID属性的值在整篇文档中必须是唯一的。

2、表示方法不同：

CLASS类选择器以标志符（句点）开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语，标志符表示“带有类名的元素”。ID选择器的标志符是散列符号（#）。标志符用来提醒浏览器接下来出现的是ID值。

3、用途不同：

可以使用CLASS属性来分类元素。ID属性用来标记文档中唯一元素。

---

JS区

---

三：原型，原型链，继承

1.原型：

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数所拥有

2.对象原型

      使用构造函数创建出的对象都会有一个属性_proto_，它指向构造函数的 prototype 原型对象。原型对象里面也有一个 constructor 属性 ，它指回构造函数本身。

3.简述原型链原理及作用：

1.当访问一个对象的成员时，首先查找这个对象自身有没有该成员。

2.如果没有就查找它的原型对象

3.如果还没有就查找原型对象的原型（Object的原型对象）。

4.依此类推一直找到 Object 为止（null）。

__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线，而这条路线就是原型链

4.原型链继承的本质

重写原型对象，代之是一个新类型的实例.

5.继承的方法：

1.原型链继承；2.构造函数继承；3.组合继承； 4.原型式继承； 5.寄生式继承 ；6.寄生组合式继承；

6.继承原理：

通过让子类的原型等于父类的实例，来实现继承。
优点：继承了超类型的构造函数的所有属性和方法。
缺点：1、在创建子类实例时，无法向超类型的构造函数传参，继承单一。
　　　2、所有新实例都会共享父类实例的属性。

（原型上的属性是共享的，一个实例修改了原型引用类型的属性，另一个实例的原型属性也会被修改！）

四.Ajax的优缺点：

 优点：    减轻服务器的负担,       按需取数据,最大程度的减少冗余请求，

                局部刷新页面,              减少用户心理和实际的等待时间,带来更好的用户体验，

                基于xml标准化,            并被广泛支持,

                不需安装插件等，       进一步促进页面和数据的分离
 缺点：.对搜索引擎支持较弱。

              安全问题较大

              AJAX不能很好支持移动设备。

             客户端复杂，太多客户端代码造成开发上的成本。

---

 vue区

---

五：vue常用指令？

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat)
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

六：Vue的基本原理

1、建立虚拟DOM Tree，通过document.createDocumentFragment()，遍历指定根节点内部节点，根据{{ prop }}、v-model等规则进行compile；
2、通过Object.defineProperty()进行数据变化拦截；
3、截取到的数据变化，通过发布者-订阅者模式，触发Watcher，从而改变虚拟DOM中的具体数据；
4、通过改变虚拟DOM元素值，从而改变最后渲染dom树的值，完成双向绑定

完成数据的双向绑定在于Object.defineProperty()