前端面试积累-1

@[TOC]前端面试
[写在前面]
优秀的前端面试经验-1

• VUE实现原理 MVVM原理

1. 基础概念–Object.defineProperty()
   1-1 首先vue采取的是mvvm，与mvc不同的是采取数据双向绑定。同时注意vue是不兼容低版本的，为什么不兼容，就要谈到Object.defineProperty()
   1-2 如何实现双向数据绑定—采取数据劫持与发布订阅模式
   1-3 平常我们创建属性的时候直接[对象.属性]，利用Object.defineProperty()则要写成[Object.defineProperty(对象，‘属性名’，{属性设置})]
   • 属性值1-删除属性[configurable:ture]
   • 属性值2-可写属性[writeable:true]
     *一般用set方法替换这个
   • 属性值3-枚举属性[enumerable:ture]
   • 属性值4-属性值[value=‘xxx’]
     *一般用get方法替换这个
2. 数据劫持-Observe(data)
   2-1 Vue方法支持数据劫持，理解如何劫持自己新创一个方法进行数据劫持内部逻辑
   2-2 数据劫持的本质是将[data:{a:1}]这个转化为[Object.defineProperty(对象，‘属性名’，{属性设置})],最后通过他的属性设置获取数据(前面谈到的1)，实现劫持
   2-3 而[data:{a:1}]可以像这样[data:{a:{a:1}}]递归下去，所以，需要在新创Observe中递归调用observe(newData)，这样的递归成为数据代理
   2-4 通过上面的学习，理解为什么在VUE中不能新增不存在的属性，因为没有对应的get，set方法，不能实现数据劫持
   2-5 而所谓的VUE可以深度响应就是指每次在div中新建一个对象时会自动增加数据劫持
   补充：this是当前获取对象实例，就是大括号里面的对象
3. 编译-Compile

• 使用JQuery操作DOM 截图来源
• Ajax实现步骤

1. ajax异步请求指在本地客户端在像服务器请求数据的时候，中间有个ajax引擎，它的作用是不把客户端的全部请求交付给服务器，而是进行筛选，一部分例如数据请求交给服务器，另外一部分例如数据校验和数据处理则由引擎代为执行
2. Ajax请求一共有如下几步：
   2-1. 新建XMLHttpRequest 对象，用于进行异步操作，语法为
   var xmlHttpRequest = new XMLHttpRequest();
   2-2. 新建HTTP请求，用来确定哪个URL进行相对应的异步操作获取数据，语法为 XMLHttpRequest.open(method,URL,flag,name,password)
   2-3. 判断request.state的状态，一共有五种状态，从0-4，分别为创建，初始化[使用open属性建议HTTP请求]，请求数据[使用send属性发送数据]，返回数据，完成请求。只有当status=4时，才证明拿到了数据
   2-4. 但这时调用过程完毕，但不表明调用成功，需要再判断status=200？，只有是的时候才表明拿到了数据[使用responseText/responseXml属性拿到数据]
   2-5. 上面的四步都属于初始化，这一步开始发出HTTP请求[使用open属性建议HTTP请求]
   2-6. 将获取到的数据进行表单的刷新。在script中写函数，通过更新表单对象的value值进行表单数据的刷新

• 什么是CSS reset

不同的浏览器对于HTML的默认样式有着不同的分别，例如对于缩进操作，UC浏览器默认缩进，火狐采用padding，IE采用margin。为了解决开发的兼容性问题，采用CSS reset将默认样式全部覆盖

• 什么是CSS预处理

CSS文件的编写是复杂的，css预处理器设计了一种新的编程语言，使得css文件更加容易维护，更容易理解。关于css预处理器的好处总结为以下几点：

1. 模块化，将一块大的分割，形成树形，根节点称为入口文件，其他节点称为模块节点，而入口文件依赖于好多个模块文件。这样做使得css可以像编程功能代码一样，可以实现复用，分层，函数依赖等，享受程序开发的便利。
2. 选择器的使用，基础的选择器有id 类 元素三种。每块代码都会有很多的标签，id及class的设置，预处理器可以进行选择符的嵌套，这样的话css的编写和html的编写有结构上的统一，有利于整理思路。
3. 变量的使用，使得可读性更高（例如：将一样的颜色用同一变量代替），而且还可以利用函数进行简单的计算（例如：颜色加深，可以使用darken($color, 20%)），
4. 现在的不足：html文件中需要加载css文件，所以需要将写好的源码进行编译，而这需要额外的付出。

• 对于js你平常用什么框架？

1. 框架是什么？框架就是js连接HTML与css时的固定规范，这样可以保证好多的js连接的有条理性。
2. 其次明确前端框架与前端库的区别。框架是一套完整的体系，要开发时需要完全整个体系标准走，而库就是方法和函数的集合，如何取用它，在于我们。
3. 常用的js前端框架有：VueJS,AngularJS,ReactJS(=react+react-route+react-redux ),bootstrop-CSS,Jsoup-后台

3.1 VueJS
1). 框架是嵌入式的，可以再网页的某个模块弄，也可以在网页的全局使用
2). 常用的属性有：

1.v-text:显示文本信息，只会显示冒号后的message，不会显示两个标签体中间的内容,等价于{{message}}—data
2.v-html:和上一个文本信息的区别是v-html会将下面定义的HTML语句进行解析—data
3.v-on:为元素绑定事件，可以简写成@—methods
补充，可以限制在进行某些操作时调用对应的函数，具体的参考https://cn.vuejs.org/v2/api/#v-on，如：@keyup.enter 按下回车键时调用
同时，对于基础的@click里面还可以进行传参操作
4.v-show:根据表达式的真假，切换元素的显示与隐藏，true显示，false隐藏,通过操作display来实现，操作的是样式，当需要频繁操作时用v-show—methods
5.v-if:根据表达式的真假切换显示状态，操作DOM树，切换不频繁时用v-if—methods
6.v-bind:设置元素的属性，一般格式为v-bind:属性=" “，而其中的v-bind是可以忽略的，写成:属性=” “,
7.v-for:根据数据生成列表结构
8.v-model:获取表单中的值（双向数据绑定，说的是改变v-model或后面”"里定义的，都会同时改变没有改的一方）

3.2 AngularJS

3.3 ReactJS

4. 常用的库有：druid,jQuery,react,axios

4.1 axios
1). 使用:
通过document.querySeletor(".get").onclick = function(){
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})}
2). axios是一个强大的网络请求库，其中get和post的语法格式是这样的
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:values}).then(function(response){},function(err){})
其中地址是固定的，例子有：
get http://autumnfish.cn/api/joke/list 随机笑话 而key，即请求参数为num，后面的value只能为数字
post http://autumnfish.cn/api/user/reg 用户注册 而key，即请求参数为username，后面的value只能为字符串

4.2 jQuery
1). 是一个库，对于js原生代码的二次封装，jq对象可以通过直接调用方法实现相应的功能
2). jQuery的操作流程是，导入jq包，获取唯一jq对象，通过对象调用需要的方法
3). 唯一的jQuery对象我们就是 $ 来表示
4). 常用的方法：
var value = $.trim($(“选择器”).val())------------检查input输入是否为空
注：因为在JQuery中的each遍历中，没有break、continue方法。如果想跳出循环或continue，只能以return false、return true代替。但return false是跳出整个each循环，return true仅仅是跳出本次循环。
$(“选择器”).attr(“属性名”) ------------获取容器的属性值
$(“按钮id”).click(function() ------------按钮按下，调用函数

[about axios]
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

[about vue]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• js有哪些数据类型呢？这些数据类型，哪些是引用类型的呢

1. js基本的数据类型有Object，undefined，null，number，Boolean，bigint，string，symbol，其中bigint与symbol为ES6新增部分
2. Object为引用类型，它下面包含常用的function，array，date，math，RegExp五种数据类型
3. 关于数据类型主要掌握不同类型之间的转换工作，而这需要见我的另一篇文章
4. 关于其中引用数据类型

4.1 function

1. 方法定义是，形参的类型不用写，返回值的类型不用写因为都是var
2. 方法名是一个对象，重名会覆盖，不会报错
3. 在JS中，方法的调用只与方法的名称有关，与实际参数列表无关
4. 在方法声明中有一个隐藏的内置对象argument（数组），封装这个数组内所有的实际参数值
5. 属性length指形参的个数

4.2 Array

1. join(参数)：将数组中的元素按照指定的分隔符拼接成为字符串，默认是逗号
2. push() 向数组的末尾添加一个或更多元素，并返回新的长度
3. 属性length指数组的长度
4. JS中，数组元素的类型可变
5. JS中，数组的长度可变

4.3 Date

1. toLocaleString()，返回当前电脑上的地区的时间格式
2. getTime()，获取毫秒值，返回当前如期对象描述的时间到1970年1月1日零点的毫秒之差

4.4 Math

1. Math对象不用创建，直接使用，这是不同于其他四个的，其他四个都要new来创建
2. 方法

1. random() 返回0-1之间的随机数(0,1)
2. ceil(x) 对数进行向上舍入
3. floor(x) 对数进行向下舍入
4. round(x) 对数进行四舍五入操作，返回整数

3. 属性 PI指π

4.5 RegExp

1. 正则表达式构成

1. 单个字符[]

1. 如[a] [ab] [a-zA-Z0-9_]
2. \d:单个数字字符[0-9]
3. \w:单个单词字符[a-zA-Z0-9_]

2. 量词符号

1. ？：表示出现0次或1次
2. • ：表示出现0次或多次
3. +：出现1次或多次
4. {m,n}：表示m<=num<=n
5. 如：\w*

3. 符号

1. 开始符号：^
2. 结束符号：$

2. 正则表达式地使用

1. 创建有两种方式

1. var reg = new RegExp(“正则表达式”)------- 如(“^\w{6,12}$”)
2. var reg = /正则表达式/ ------- 如/^\w{6,12}$/

2. 常用方法为：test（参数），验证指定字符串是否符合正则定义的规范，返回true或false

• 对于文件的请求，有时候http的请求效率会很慢，怎么办呢？

使用文件合并，比如将多个小文件合并成大文件，或者将该嵌入的内容嵌入到html，css sprites等等，减少http请求数

• 浏览器可以并行下载多少个资源？

一般就是6个，如果的IE6就只有两个了

• 前端主要学习那几块？

html + css + javascript + nodejs

• define和require区别

define和require在依赖处理和回调执行上都是一样的，不一样的地方是define的回调函数需要有return语句返回模块对象，这样define定义的模块才能被其他模块引用；require的回调函数不需要return语句。

• 服务器发送请求后浏览器端做的动作

1. 客户端根据URL，进行DNS域名解析，
2. 然后根据IP地址，请求报头，向浏览器发出请求，请求的例如HTML，JS，CSS。
3. 浏览器收到请求后响应报头。
4. 客户端（本地）根据收到的文件，建立内部数据结构，例如HTML的DOM树，CSS 的样式规则，JS的对象属性表，
5. 最后渲染出界面。